DOCSEARCHbyAlgolia
Submit Docs

google_nav_bar

repository·master·Indexed 21 days ago

https://github.com/sooxt98/google_nav_bar

A Flutter package providing a Google-style navigation bar component. It features the GNav container widget and GButton tab widgets, allowing for extensive customization of colors, animations, haptic feedback, and layout styles including GnavStyle.google and GnavStyle.oldSchool.

Tokens
2.3K
Snippets
7
Records
8
Agent score
72%

What's inside google_nav_bar

  2. Customize iOS Launch Screen Assets

    master

    To change the image displayed during the app's launch on iOS, you can replace the existing image files within the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory with your own assets.

    Alternatively, you can manage these assets using Xcode:

    1. Open the iOS project workspace by running open ios/Runner.xcworkspace from your terminal.
    2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
    3. Drag and drop your desired images into the asset catalog to replace the current launch images.
    open ios/Runner.xcworkspace

  4. Use GNav and GButton to create a navigation bar

    master

    The GNav widget is the main container for the navigation bar. You can style the tabs globally using GNav attributes. To style individual tabs separately, use the attributes provided by the GButton widget within the tabs list.

    Key GNav Attributes:

    • rippleColor: Color of the tab button ripple when pressed.
    • hoverColor: Color of the tab button when hovered.
    • haptic: Boolean to enable/disable haptic feedback.
    • tabBorderRadius: Radius for the tab button.
    • tabActiveBorder: Border for the selected tab.
    • tabBorder: Default border for all tabs.
    • tabShadow: List of BoxShadow for the tab buttons.
    • curve: Animation curve for tab transitions.
    • duration: Duration of the tab animation.
    • gap: Spacing between the icon and the text.
    • color: Color of unselected icons.
    • activeColor: Color of the selected icon and text.
    • iconSize: Size of the tab icons.
    • tabBackgroundColor: Background color of the selected tab.
    • padding: Padding for the entire navigation bar.
    • tabs: A list of GButton widgets.
    GNav(
  rippleColor: Colors.grey[800], // tab button ripple color when pressed
  hoverColor: Colors.grey[700], // tab button hover color
  haptic: true, // haptic feedback
  tabBorderRadius: 15, 
  tabActiveBorder: Border.all(color: Colors.black, width: 1), // tab button border
  tabBorder: Border.all(color: Colors.grey, width: 1), // tab button border
  tabShadow: [BoxShadow(color: Colors.grey.withOpacity(0.5), blurRadius: 8)], // tab button shadow
  curve: Curves.easeOutExpo, // tab animation curves
  duration: Duration(milliseconds: 900), // tab animation duration
  gap: 8, // the tab button gap between icon and text 
  color: Colors.grey[800], // unselected icon color
  activeColor: Colors.purple, // selected icon and text color
  iconSize: 24, // tab button icon size
  tabBackgroundColor: Colors.purple.withOpacity(0.1), // selected tab background color
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5), // navigation bar padding
  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',
    )
  ]
)

  5. Configure GNav appearance and behavior

    master

    The GNav widget offers extensive customization for the navigation bar's look and feel. Key configuration options include:

    • Styling: Use style to switch between GnavStyle.google and GnavStyle.oldSchool.
    • Colors: Set backgroundColor for the bar, tabBackgroundColor for individual tabs, activeColor for the selected state, and color for the unselected state.
    • Layout: Adjust padding, gap (spacing between tabs), tabMargin, and mainAxisAlignment (how tabs are distributed in the Row).
    • Shapes & Borders: Customize tabBorderRadius, tabBorder, tabActiveBorder, and tabShadow.
    • Typography: Control text appearance using textStyle or textSize.
    • Animation: Fine-tune the transition using duration and curve.
    • Interactions: Enable/disable haptic feedback with haptic and control the ripple effect with rippleColor.

  6. Use the GNav widget for navigation

    master

    The GNav widget is the main container for creating a Google-style navigation bar in Flutter. It manages a list of GButton tabs and handles the selection state and animations.

    To use it, provide a list of GButton objects to the tabs parameter. You can control the active tab using selectedIndex and respond to tab changes via the onTabChange callback.

    GNav(
  tabs: <GButton>[ 
    GButton(icon: Icons.home, text: 'Home'),
    GButton(icon: Icons.search, text: 'Search'),
  ],
  selectedIndex: _currentIndex,
  onTabChange: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
)

  7. Configure the GButton widget

    master

    The GButton is an individual navigation tab component used within the google_nav_bar package. It allows for highly customizable styling of icons, text, and background properties.

    Key Properties

    Required Properties:

    • icon: The IconData to display for the button.

    Styling Properties:

    • text: The label string to display next to the icon (defaults to empty string).
    • iconColor: Color of the icon when inactive.
    • iconActiveColor: Color of the icon when the button is active.
    • textColor: Color of the text label.
    • textStyle: Custom TextStyle for the label. If not provided, it defaults to FontWeight.w600 with the specified textColor.
    • textSize: A double to control the text size.
    • iconSize: A double to control the icon size.
    • backgroundColor: The solid background color of the button.
    • backgroundGradient: A Gradient for the button background.
    • borderRadius: Controls the corner rounding.
    • border / activeBorder: Defines the border around the button in its normal and active states.
    • shadow: A list of BoxShadow objects.
    • gap: The spacing between the icon and the text.
    • padding / margin: Spacing around the button content.

    Interaction Properties:

    • onPressed: Callback function triggered when the button is tapped.
    • active: A boolean indicating if the button is currently selected.
    • haptic: A boolean to enable/disable HapticFeedback.selectionClick() on press.
    • duration: The animation duration for state changes.
    • curve: The animation curve used for transitions.
    • rippleColor: The color of the ink ripple effect.
    • hoverColor: The color shown during hover states.

    Layout & Accessibility:

    • leading: An optional widget to display before the icon.
    • semanticLabel: A string used for accessibility (defaults to the text value if not provided).
    ```dart
GButton(
  icon: Icons.home,
  text: 'Home',
  active: true,
  onPressed: () => print('Home tapped'),
  iconColor: Colors.grey,
  iconActiveColor: Colors.white,
  backgroundColor: Colors.black,
  textStyle: TextStyle(fontWeight: FontWeight.bold),
)```