Elevate Your Flutter Apps with Google-Inspired Navigation

Published on by Flutter News Hub

Elevate Your Flutter Apps with Google-Inspired Navigation

Introducing GoogleNavBar, a sleek and powerful Flutter widget that brings the sophistication of Google's bottom navigation bar to your mobile applications. Inspired by the renowned design principles of Aurelien Salomon and meticulously crafted by sooxt98, this widget empowers you to create intuitive and visually stunning navigation experiences.

Key Features

  • Modern and Google-style design
  • Customizable tab appearance and behavior
  • Haptic feedback for immersive interactions
  • Flexible styling options for seamless integration with your app's aesthetics

Getting Started

To incorporate GoogleNavBar into your Flutter project:

# Add to your pubspec.yaml
dependencies:
  google_nav_bar: ^5.0.6

# Import the library
import 'package:google_nav_bar/google_nav_bar.dart';

Comprehensive Usage Guide

Global Tab Styling

GNav(
  rippleColor: Colors.grey[800],
  hoverColor: Colors.grey[700],
  haptic: true,
  tabBorderRadius: 15,
  tabActiveBorder: Border.all(color: Colors.black, width: 1),
  tabBorder: Border.all(color: Colors.grey, width: 1),
  tabShadow: [
    BoxShadow(
      color: Colors.grey.withOpacity(0.5),
      blurRadius: 8,
    ),
  ],
  curve: Curves.easeOutExpo,
  duration: Duration(milliseconds: 900),
  gap: 8,
  color: Colors.grey[800],
  activeColor: Colors.purple,
  iconSize: 24,
  tabBackgroundColor: Colors.purple.withOpacity(0.1),
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
  tabs: [
    GButton(
      icon: LineIcons.home,
      text: 'Home',
    ),
    GButton(
      icon: LineIcons.heart_o,
      text: 'Likes',
    ),
    GButton(
      icon: LineIcons.search,
      text: 'Search',
    ),
    GButton(
      icon: LineIcons.user,
      text: 'Profile',
    ),
  ],
);

Individual Tab Styling

To style individual tabs separately, use the attributes of GButton directly:

GNav(
  ...
  tabs: [
    GButton(
      icon: LineIcons.home,
      text: 'Home',
      iconColor: Colors.red,
      textColor: Colors.blue,
    ),
    ...
  ],
);

Conclusion

GoogleNavBar seamlessly combines elegance with functionality, empowering you to create captivating navigation experiences that elevate the user experience of your Flutter applications. Explore the /example directory for diverse use cases and unlock the potential of this remarkable widget.

Flutter News Hub