I am trying to figure out how to display active tab in my bottom navigation bar. I am using Flutter GNav

Question

Here is my code. It is successfully changing screens but the active tab is not changing. Any help? I would like that if the for example it click on profile it will automatically show that the profile tab is active.

class BottomNavBar extends StatefulWidget {
const BottomNavBar({super.key});

@override
_BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
int _selectedIndex = 0;

static final List<String> _routeNames = [
   '/home',
   '/booking',
   '/settings',
  '/profile'
];

... designs in omy code and Gnav Widget

Gnav(tabs: const [
            GButton(
              icon: LineIcons.home,
              text: 'Home',
            ),
            GButton(
              icon: LineIcons.bookOpen,
              text: 'Bookings',
            ),
            GButton(
              icon: LineIcons.cog,
              text: 'Settings',
            ),
            GButton(
              icon: LineIcons.user,
              text: 'Profile',
            ),
          ],)

selectedIndex: _selectedIndex,
   onTabChange: (index) {
      setState(() {
          selectedIndex = index;
          final goRouter = GoRouter.of(context);
          goRouter.push(_routeNames[index]);
      });
   },

score 0 · Answer 1 · answered Jun 20 '23 at 09:55

On setState, you are navigating to a new page. I think this is causing the problem.

Instead of Navigating to a new page, you could just display the page of the selected index as the child in the same scaffold.

You could do something like

static final List<Widget> _pages = [
   Home(), Booking(), Setting(), Profile(),
];

int _selectedIndex = 0;

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ... ,
      body: _pages[_selectedIndex],
      bottomNavigationBar: GNav( ... ),
    );
  }

Mohamed Mansour · Answer 2 · 2023-06-21T13:08:48.460

check example provided within the package: https://pub.dev/packages/google_nav_bar/example Here's the content:

import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:line_icons/line_icons.dart';

void main() => runApp(MaterialApp(
    builder: (context, child) {
      return Directionality(textDirection: TextDirection.ltr, child: child!);
    },
    title: 'GNav',
    theme: ThemeData(
      primaryColor: Colors.grey[800],
    ),
    home: Example()));

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _Examenter code herepleState();
}

class _ExampleState extends State<Example> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.w600);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Home',
      style: optionStyle,
    ),
    Text(
      'Likes',
      style: optionStyle,
    ),
    Text(
      'Search',
      style: optionStyle,
    ),
    Text(
      'Profile',
      style: optionStyle,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 20,
        title: const Text('GoogleNavBar'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              blurRadius: 20,
              color: Colors.black.withOpacity(.1),
            )
          ],
        ),
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8),
            child: GNav(
              rippleColor: Colors.grey[300]!,
              hoverColor: Colors.grey[100]!,
              gap: 8,
              activeColor: Colors.black,
              iconSize: 24,
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
              duration: Duration(milliseconds: 400),
              tabBackgroundColor: Colors.grey[100]!,
              color: Colors.black,
              tabs: [
                GButton(
                  icon: LineIcons.home,
                  text: 'Home',
                ),
                GButton(
                  icon: LineIcons.heart,
                  text: 'Likes',
                ),
                GButton(
                  icon: LineIcons.search,
                  text: 'Search',
                ),
                GButton(
                  icon: LineIcons.user,
                  text: 'Profile',
                ),
              ],
              selectedIndex: _selectedIndex,
              onTabChange: (index) {
                setState(() {
                  _selectedIndex = index;
                });
              },
            ),
          ),
        ),
      ),
    );
  }
}

I am trying to figure out how to display active tab in my bottom navigation bar. I am using Flutter GNav

2 Answers2