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],
      ),
    );
  }
}

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

E/flutter ( 7192): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: setState() called after dispose(): _GNavState#fb094(lifecycle state: defunct, not mounted) E/flutter ( 7192): 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 ( 7192): 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 ( 7192): 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().

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

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!

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!

As you can see in the image, the text has been removed, but the icon is not centered.

I have set the gap to zero.

GNav(
	iconSize: 24,
	padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
	duration: Duration(milliseconds: 400),
	gap: 0,
	tabs: [
	  GButton(
		icon: Icons.home,
		backgroundColor: Colors.white,
		iconColor: Colors.black,
		iconActiveColor: Colors.purple,
		borderRadius: BorderRadius.all(Radius.circular(30)),
	  ),
	],
	selectedIndex: selectedScreenIndex,
	onTabChange: (index) {
	  setState(() {
		selectedScreenIndex = index;
	  });
	},
),

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

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?

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.

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.

I am trying to prevent the user from entering screen number 2, and I succeeded in that by controlling the screenIndex variable , but in all cases the nav button is activated and its state changes! . How can I prevent the nav but from changing its state. Note : i already tried to set active to false .

So in my app, I have the GNav bar to navigate between some pages. I use Firebase Auth to sign in users. Right after a user signs in, the app navigates to the main page where the GNav is.

class MainPage extends StatefulWidget
{
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage>
{
  final _utils = Utils();
  int _gNavBarIndex = 0;
  final _listPages = [const HomePage(), const Rides(), const ProfilePage()];

  @override
  Widget build(BuildContext context)
  {
    return Scaffold(
      backgroundColor: Colors.blueGrey[100],
      body: _listPages[_gNavBarIndex],
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          color: _utils.darkBlueGrey,
          borderRadius: BorderRadius.circular(16)
        ),
        child:  Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: GNav(
            backgroundColor: _utils.darkBlueGrey!,
            color: Colors.tealAccent,
            activeColor: _utils.titleTextColor,
            tabBackgroundColor: Colors.white.withOpacity(0.5),
            gap: 10,
            padding: const EdgeInsets.all(8.0),
            selectedIndex: _gNavBarIndex,
            onTabChange: (index) {
              setState(() => _gNavBarIndex = index);
            },
            tabs: const [
              GButton(
                icon: Icons.home,
                text: 'Home',
              ),
              GButton(
                icon: Icons.car_crash_outlined,
                text: 'Rides',
              ),
              GButton(
                icon: Icons.person,
                text: 'Profile',
              )
            ],
          ),
        ),
      ),
    );
  }
}

so from here, the user can now see the HomePage, one of the tabs of the GNav bar. But each time a user logs out and laogs back in, the GNav bar does not appear when they log back in. The debug console shows this message, "ensureControlAlpha: for ITYPE_NAVIGATION_BAR" and I have searched for it and there aren't any information about this message. As a user, I have to close the app and relaunch it, then the GNav bar appears again. Does anyone know how I can fix this issue?

Similar to https://pub.dev/packages/convex_bottom_bar

I have made 4 useful updates:

1. animteTo which will only change the active index without any firing tab events.
2. clickTo which will fire click event to wanted index similar to a manual click.
3. Made the state public so we can make keys to control the nav bar.
4. Added extensions so now you can do the following:

context.gNav?.animateTo(tabsRouter.activeIndex);
context.gNav?.clickIndex(tabsRouter.activeIndex);

or through using keys:

appBarKey.currentState?.animateTo(tabsRouter.activeIndex),
appBarKey.currentState?.clickIndex(tabsRouter.activeIndex),

This is a PR of an issue in open a few minutes ago (#77 )

This allows me to do the following in my code:

  @override
  Widget build(BuildContext context) {
    final appBarKey = GlobalKey<GNavState>(); // This was not possible with the state being private

    const _kPages = <String, IconData>{
      'Home': Icons.home,
      'Explore': Icons.search,
      'Alerts': Icons.notifications,
      'Leagues': CommunityMaterialIcons.trophy
    };

    return Consumer(
      builder: (context, ref, child) {
        var currentPageIndex = ref.watch(bottomNavigationProvider); //My Navigation Drawer can update this value when a user clicks on a menu item on it

        if (currentPageIndex < _kPages.length) {
          appBarKey.currentState?.animateTo(currentPageIndex); // Now I can animate the bottom navigation drawer to the index which the navigation drawer is also pointing to
        }

        return GNav(
          key: appBarKey,
          tabs: buildGNavButtons(_kPages),
          activeColor: Colors.redAccent,
          gap: 8.0,
          onTabChange: (int i) =>SonicNavigator.navigateToPage(ref, i),
        );
      },
    );
  }