sooxt98 / google_nav_bar

A modern google style nav bar for flutter.

google_nav_bar

    

A modern google style nav bar for flutter.

GoogleNavBar is a Flutter widget designed by Aurelien Salomon and developed by sooxt98.

Getting Started

Add this to your package's pubspec.yaml file:

...
dependencies:
  google_nav_bar: ^5.0.6
  

Now in your Dart code, you can use:

import 'package:google_nav_bar/google_nav_bar.dart';

Usage

Style your tab globally with GNav's attribute, if you wish to style tab separately, use GButton's attribute

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',
    )
  ]
)

View the example folder

There are 4 different use case included in the /example directory, go try it out!

google_nav_bar's Issues

animation with RTL Apps looks weird

showing the icon on the right and the title on the left make the transition looks weird really , any solution to reverse the the transition direction ?

RenderFlex

When The Display Size and Font Size are Large then it Shows pixel overflowed.

Allow icon to take Widget, not IconData

We can refactor GButton.icon to be a Widget and apply the icon settings as an IconTheme. This matches the semantics of other material widgets, and in our case, allows us to put a dynamic icon widget in GNav.

Is this a PR you would accept?

Can you provide the code of one of your examples?

At the beginning, when you change tabs it appears you're using a TabController? I'm trying to make the TabController animate the GoogleNavBar while the user swipes the screen, just like in your example. Thanks!

RenderFlex overflow when quickly switch tabs.

How to reproduce issue:

• Quickly switching between the last tab and the second last tab using gesture. (Sometimes it caused overflow)
  How often it happens:
• Occurs randomly in a very short duration.

Restarted application in 1,715ms.

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
�[38;5;244mThe following assertion was thrown during layout:�[39;49m
A RenderFlex overflowed by 1.2 pixels on the right.

�[38;5;244mThe relevant error-causing widget was�[39;49m
    �[38;5;248mGNav�[39;49m
�[38;5;244mThe overflowing RenderFlex has an orientation of Axis.horizontal.�[39;49m
�[38;5;244mThe edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.�[39;49m

�[38;5;248mConsider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.�[39;49m
�[38;5;248mThis is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.�[39;49m

�[38;5;244mThe specific RenderFlex in question is: RenderFlex#5e52c relayoutBoundary=up5 OVERFLOWING�[39;49m
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

setstate error with gnav

[VERBOSE-2:ui_dart_state.cc(199)] Unhandled Exception: setState() called after dispose(): _GNavState#175e8(lifecycle state: defunct, not mounted)
This error happens if you call setState() on a State object for a widget that no longer appears in the widget tree (e.g., whose parent widget no longer includes the widget in its build). This error can occur when code calls setState() from a timer or an animation callback.
The preferred solution is to cancel the timer or stop listening to the animation in the dispose() callback. Another solution is to check the "mounted" property of this object before calling setState() to ensure the object is still in the tree.
This error might indicate a memory leak if setState() is being called because another object is retaining a reference to this State object after it has been removed from the tree. To avoid memory leaks, consider breaking the reference to this object during dispose().

Riple radius doesn't change along with the tabBorderRadius

When I set the tabBorderRadius to 8 the ripple stays rounded as if its 15. This causes it to look odd and I can't seem to change it.

Screen.Recording.2021-02-24.at.10.11.23.mov

Code:

Container( child: GNav( mainAxisAlignment: MainAxisAlignment.spaceAround, backgroundColor: Color(0xFF279B40), tabBackgroundGradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [Color(0xFF7FCC27), Color(0xFF279B40)]), rippleColor: Color(0xFF7FCC27), hoverColor: Color(0xFF7FCC27), tabBorderRadius: 8, tabBorder: Border.all(color: Colors.white, width: 1), duration: Duration(milliseconds: 300), gap: 8, color: Colors.white, activeColor: Colors.white, curve: Curves.easeIn, iconSize: 24, padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5), tabs: [ GButton( icon: Icons.notifications, text: 'Notifications', ), GButton( icon: Icons.home, text: 'Dashboard', ), ], selectedIndex: this.activeIndex, onTabChange: (index) => onTap(index), ), );

Animation with custom curve looks weird in v4

Hi, first of all thank you very much for this great library. It is really the best flutter navigation bar I found so far.
After upgrading to version 4 today it looks like there is a regression with the animation when a custom curve is used, unfortunately. It is not so easy describe - maybe you just look at it yourself. I used the following values on GNav:

GNav(mainAxisAlignment: MainAxisAlignment.spaceAround,
     curve: Curves.easeOutExpo,
     duration: const Duration(milliseconds: 600),
)

This looks very smooth on version 3. After upgrading to version 4 the animation with the exact same values looks a bit harsh.
By removing the curve parameter completely from the widget it looks a lot better. So it is working fine when no custom curve is specified.

This has not high priority of course - just wanted to let you know :-)

Stack is missing overflow parameter in latest Flutter's master branch

Hey @sooxt98

Thanks for awesome package. Just want to point you out that in latest Flutter's master brunch there is no "overflow" parameter (that you use in your nav bar), so you will have to migrate to make it work on most recent Flutter version. Here is migration guide from Google:
https://docs.google.com/document/d/1gC5Di4ykTCqupD77PWpy9D8xXo0Ide5CnrH0zzVIhKo/edit#heading=h.qxzs91rbt759

Also attaching Issue from Flutter repo:
flutter/flutter#66030

Thanks in advance!

Add support for border color

First off, nice plugin! Been using it in some of my flutter apps

Is there anyway to add border color in GButtons?

Touch size of icon is too small

I think the touch area for icon is small. Only when you precisely touch icon then only it receives touch. Can we have something with which we can increase. touch area for icons? Its little inconvinient to change tabs

Migrate to null safety

Is there any plans to add null safety support?

GButton icon widget

does GButton's icon property accept a widget? Currently it only supports IconData and in my project I need to add the user's photo circled
EX:

Is there anyway to use a gradient color as backgroundcolor for the Gbuttons?

Is there anyway to use a gradient color as backgroundcolor for the Gbuttons?

RenderFlex overflow when adding 6 tabs

Unable to add 6 tabs, Gives RenderFlex overflow at right side.

Please suggest so that the space between the tabs can be decreased and 6 tabs can be added easily.

Key property for GButton is missing implementation

Passing key property to the GButton does nothing. The widget does not contain the passed key. This is required for performing tests using flutter driver.

feat: allow borderRadius on GButton

RTL problem

is there any solution for RTL support?

type 'BorderRadius' is not a subtype of type 'bool'

when I try to add borderRadius in Gbutton I got this error:
type 'BorderRadius' is not a subtype of type 'bool'

Missing icon color transition while switch to active

Updating selectedIndex does not update the index

Previously on 4.0.2, if I called setState() on a value passed to GNav, it would also animate the tab to the new index. This no longer works with 5.0.1.

A quick example where I use a PageController listener to update _index:

int _index;

@override
void initState() {
    _index = widget.pageController?.initialPage ?? 0;
    widget.pageController?.addListener(_pageControllerListener);
    super.initState();
}

@override
void dispose() {
    widget.pageController?.removeListener(_pageControllerListener);
    super.dispose();
}

void _pageControllerListener() {
    setState(() => _index = widget.pageController.page.round());
}

@override
Widget build(BuildContext context) => GNav(
    selectedIndex: _index,
    ... // Additional GNav parameters
);

The initially selected index is correct, but just does not update unless you tap on the GButton in the navigation bar.

Material Ripple & Haptic Feedback Support

Dark Mode support

I'm using a dark theme, but it doesn't look like google_nav_bar supports that? Is it possible to pull the Theme data for defaults?

Thanks for your time!

swip animation whene you switching between Pages tabs

why there is no swip animation whene you switching between Pages tabs
like in your Example !

Big grey box when switching pages in release mode

I have a big grey box which appear less than one second when switching between page, in release mode or in profile mode.

In profile I was able to get this message error :

Another exception was thrown: Instance of 'ft'
or
uid=10419(com.***) 1.ui identical 23 lines

Feature request: Tabbar like controller argument , so that animation changes smoothly on transition .

In tabbarview as user slides the screen slowly we can see the change at same rate in the tabs , I want to achieve same result with google_nav_bar any suggestions please .

GButton onPressed doesn't do anything

Hi, first of all I really like this widget, however I doesn't use it as a bottom navigation bar, but as an appbar, I have a problem for GButton the onPressed function doesn't do anything

Keep the navbar on route changes

I not sure if I'm doing this right but on the home page I am navigating to a new page with Navigator.push() but the nav bar disappears. How would I go about keeping the navbar when navigating to other pages?

Insert Widget to Container page index 0,1,2,3

Hi,

I am new on Flutter, your package is amazing.
How to insert widget to Container on different page index 0,1,2,3 with your package.

Thanks
M. Effendi

FR: Opacity transition on text

We have a feature request to have an opacity transition on the text with its own curve and duration. Is this a feature you would consider adding?

how to use it in other language

hello everyone,

I use the google_nav_bar package, it is good and very nice.

but when I convert the direction of the app to (right to left) the text is making an error.

like the photo below:

https://i.ibb.co/D183V9b/20200713-170022.jpg

how can I solve that ??

and I am sorry because my English is not very good

How can we add SvgPicture on GButton

GButton takes IconData as an icon! Is there any way to add svgPicture as an icon?

Feature request: Tooltip or Semantic Label

Hey @sooxt98!

Writing to you again! Thank you for the great package, but could you add some semantics? Because at the moment GButton doesn't allow us to add any tooltip or semantic tag, so Accessibility Checker or any other semantic analysis SW will not recognize the meaning of this button... Semantics are articularly helpful for people with visual impairments but are also great for testing. A Tooltip would be perfect, but the semanticLabel property should be okay too.

Thanks!

not applicable for responsive apps

there is no barHeight parameter inside constructor and if it is wrapped with SizedBox , bar becomes completely unusable, only way to change the height is iconsize.I should have been able to change the bar height and iconsize distinctly.

CupertinoIcons don't work

Hi,

I use your bar. It's very nice and simple to use :) Great Work.

When I use CupertinoIcons the icons will be shown double / strechted as seen in the screenshot.
e.g. GButton( icon: CupertinoIcons.home, text: 'Home', ),

normal Icons work like as expected.
e.g. GButton( icon: Icons.ac_unit, text: 'Home', ),

Maybe you have a solution for that. Thanks

Using label text only

Is there a way to use label text only without icon?

Hebrew GNav

Trying to make an RTL NavBar.
But the text gets over the icon.

The localization of the app is RTL (he,IL).
How could it be fixed?

Rework is needed to animate only icon instead of text

Skip animation on middle element when you go from first one to last one

Hi, I really like your lib and the amount of customization.
I have a PageView as a body and use your package as a bottom navigation bar.
I have 3 pages, when I go from 1 -> 3 then the 2nd one also gets highlighted on the navigation bar, which doesn't look very nice.

Would it be possible to fix it or add a new param?
Let me know if you need a gif, but I guess the description is clear.
If you are busy maybe I will be able to fix it and add PR, let me know your thoughts.

Analyzer Error on https://pub.green/packages/google_nav_bar

wrong version # in your docs

you show this in the docs:

dependencies:
  google_nav_bar: ^2.1.0

it should be this:

dependencies:
  google_nav_bar: ^2.0.1

Swipe to switch between tabs

Can there be an option to switch between tabs when swiping on the screen widget?

swipe left to right to shift to other tab

Why is GNav directly nested under body of Scaffold?

In mainlite, advanced and gallery GNav is not given as the bottomNavBar property of Scaffold but instead as a child of the body parameter. Is this the recommended way or am I missing something?

red dot

do you have red dots number , for example , you have 3+ message in tabs

Getting error

E/flutter (21944): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: setState() called after dispose(): _GNavState#81aa2(lifecycle state: defunct, not mounted)
E/flutter (21944): This error happens if you call setState() on a State object for a widget that no longer appears in the widget tree (e.g., whose parent widget no longer includes the widget in its build). This error can occur when code calls setState() from a timer or an animation callback.
E/flutter (21944): The preferred solution is to cancel the timer or stop listening to the animation in the dispose() callback. Another solution is to check the "mounted" property of this object before calling setState() to ensure the object is still in the tree.
E/flutter (21944): This error might indicate a memory leak if setState() is being called because another object is retaining a reference to this State object after it has been removed from the tree. To avoid memory leaks, consider breaking the reference to this object during dispose().

Suggestion for improvements

Firstly, very nice widget, I'll be trying it in my app.

Could you please add badges support for the icon.
Maybe instead of passing the icon, pass a widget, which then I can control how it looks like.
Also do that for text, for more granular control of style.
What do you think?

It won't desapear when opening new page

Hi,

so I am finding an issue in which when preasing navigation from the home page the bottom navigation bar won't desapare and I can't figure out why.

My code:

import` 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:hopeapp/screens/give_page.dart';
import 'package:hopeapp/screens/home_screen.dart';
import 'package:hopeapp/screens/morepage.dart';
import 'package:flutter/services.dart';

void main() => runApp(
      new MaterialApp(
        darkTheme: ThemeData.light(),
        home: MyApp(),
      ),
    );

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  int _selectedPage = 0;
  final _pageOptions = [
    HomeScreenTabBar(),
    GivePage(),
    MorePage(),
  ];

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.grey[900],
      statusBarIconBrightness: Brightness.light, // not working
      statusBarBrightness: Brightness.dark,
      // works
    ));
    return MaterialApp(
      title: 'Hope and Anchor App',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
        primaryColor: Colors.yellow,
        brightness: Brightness.dark,
        accentColor: Colors.yellow,
      ),
      home: Scaffold(
        body: Center(
          child: _pageOptions.elementAt(_selectedPage),
        ),
        bottomNavigationBar: Container(
          decoration: BoxDecoration(color: Colors.grey[900], boxShadow: [
            BoxShadow(blurRadius: 20, color: Colors.black.withOpacity(0.0))
          ]),
          child: SafeArea(
            child: Padding(
              padding:
                  const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10),
              child: GNav(
                  gap: 1,
                  activeColor: Colors.yellow,
                  iconSize: 24,
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 8),
                  duration: Duration(milliseconds: 800),
                  tabBackgroundColor: Colors.black,
                  tabs: [
                    GButton(
                      icon: Icons.video_library,
                      iconColor: Colors.grey[500],
                      text: 'Home',
                    ),
                    GButton(
                      icon: Icons.favorite_border,
                      iconColor: Colors.grey[500],
                      text: 'Give',
                    ),
                    GButton(
                      icon: Icons.menu_rounded,
                      iconColor: Colors.grey[500],
                      text: 'More',
                    ),
                  ],
                  selectedIndex: _selectedPage,
                  onTabChange: (int index) {
                    setState(() {
                      _selectedPage = index;
                    });
                  }),
            ),
          ),
        ),
        backgroundColor: Colors.grey[900],
      ),
    );
  }
}

Compatibility issues after null safety migration

@Ascenio Did you know why it's not compatible with Flutter 1.22.6?

Custom Icon support

Is it possible to use custom icons from assets ?

Add badging capabilities for displaying notification counters.

I think this library is really sleek, but I would like to see something like Badges having first-class support in this navigation bar. Are there any plans to add this? If not, I can look into this!

https://pub.dev/packages/badges