0

I have been struggling to figure out how to navigate back to my bottom navigation bar after navigating to a page without it. Using Navigator pop does not work and produces an error, I have looked at other questions where people asked the same thing, but no one seems to answer this question everyone just explains how to navigate between different items within the Navigation Bar... which is easy.

Below is the code of the Navigation bar, which works without any problems. Again I CAN navigate between different Navigation Bar pages easily.

`import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:flutter/material.dart';
import '../../Screens/screens_export.dart';

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

  @override
  State<GoogleNavBar> createState() => _GoogleNavBarState();
}

class _GoogleNavBarState extends State<GoogleNavBar> {
int currentIndex = 2;
final Screens = [
  nderChat(),
  TBD(),
  Reports(),
  Drawer(),
];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Screens[currentIndex],
      bottomNavigationBar: Container(
        color: Colors.black,
        child: Padding(
          padding: const EdgeInsets.symmetric(
           horizontal: 15,
           vertical: 20),
          child: GNav(
            backgroundColor: Colors.black,
            color: Colors.white,
            activeColor: Colors.white,
            tabBackgroundColor: Colors.grey.shade800,
            padding: EdgeInsets.all(16),
            gap: 8,
            onTabChange: (index) => setState(() => currentIndex = index),
            tabs: const[
            GButton(
              icon: Icons.groups_outlined,
              text: 'Global',
            ),
            GButton(
              icon: Icons.rss_feed_outlined,
              text: 'TBD',
              ),
            GButton(
              icon: Icons.running_with_errors_rounded,
              text: 'Alerts',
              ),
            // GButton(
            //   icon: Icons.sports,
            //   text: 'Reports',
            //   ),
            GButton(
              icon: Icons.account_circle_outlined,
              text: 'Profile',
              ),
          ]
          ),
        ),
      ),
    );
  }
}

In the Screen Drawer, I open a drawer, which probably isn't a good practice. Clicking one of the Drawer options takes me to another page such as a Profile Page(which is not part of the Nav Bar).

After navigating to Profile, when I do "Navigation Pop" it gives me "route error".

I do not know what to do, I have tried using Pushnamed, but also gave me a error, perhaps I did it wrong.

A similar question which went unanswered : Flutter pass bottom navigation bar selected index when navigating back to page with bottom nav bar


To add some more information:

 class ModalDrawer extends StatelessWidget {
  const ModalDrawer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double drawerWidth = MediaQuery.of(context).size.width;
    return Drawer(
      width: drawerWidth,
      backgroundColor: Colors.lightBlue,
      child: ListView(
        padding: const EdgeInsets.all(0),
        children: [
          const DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blueGrey,
              // image: DecorationImage(
              //     image: AssetImage("assets/images/city_night.jpg"),
              //        fit: BoxFit.cover)
            ),
            child: UserAccountsDrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              accountName: Text(
                "Alpha",
                style: TextStyle(fontSize: 18),
              ),
              accountEmail: Text("alpha@alphamail.com"),
              currentAccountPictureSize: Size.square(50),
              currentAccountPicture: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text(
                  "A",
                  style: TextStyle(
                      fontSize: 30.0,
                      color: Color.fromARGB(255, 255, 255, 255)),
                ),
              ),
            ),
          ),
          buildMenuItem(
            text: AppLocalizations.of(context)!.home,
            icon: Icons.home_outlined,
            onClicked: () => selectedItem(context, 0),
            // selectedColor: Colors.white,
            // selected: true,
          ),
          buildMenuItem(
            text: AppLocalizations.of(context)!.profile,
            icon: Icons.person_outline,
            onClicked: () => selectedItem(context, 1),
            // selectedColor: Colors.white,
            // selected: true,
          ),
          buildMenuItem(
            text: AppLocalizations.of(context)!.faq,
            icon: Icons.question_mark_outlined,
            onClicked: () => selectedItem(context, 2),
            // selectedColor: Colors.white,
            // selected: true,
          ),
          buildMenuItem(
            text: AppLocalizations.of(context)!.settings,
            icon: Icons.settings,
            onClicked: () => selectedItem(context, 3),
            // selectedColor: Colors.white,
            // selected: true,
          ),
          buildMenuItem(
            text: 'chat',
            icon: Icons.message_outlined,
            onClicked: () => {
              showDialog(context: context, builder:  (context) => SimpleDialogBox()),
              selectedItem(context, 4),},
            // selectedColor: Colors.white,
          ),
        ],
      ),
    );
  }
//
  Widget buildMenuItem({
    required String text,
    required IconData icon,
    required onClicked,
    // required selectedColor,
    // required selected,
  }) {
    const colorImage = Color.fromARGB(255, 3, 3, 3);
    const colorText = Color.fromARGB(255, 0, 0, 0);

    return Padding(
      padding: const EdgeInsets.only(bottom: 1),
      child: ListTile(
        leading: Icon(icon, color: colorImage),
        title: Text(text, style: const TextStyle(color: colorText)),
        onTap: onClicked,
        // selectedTileColor: selectedColor,
        // selected: selected,
      ),
    );
  }

  void selectedItem(BuildContext context, int index) {
    Navigator.of(context).pop();
    switch (index) {
      case 0:
        Navigator.pushNamed(context, '/home');
        break;
      case 1:
        Navigator.pushNamed(context, '/user');
        break;
      case 2:
        Navigator.pushNamed(context, '/faq');
        break;
      case 3:
        Navigator.pushNamed(context, '/settings');
        break;
      case 4:
      Navigator.pushNamed(context, '/chatscreen');
      break;
    }
  }
}

here are some screenshots

Profile bar item

Page without Navigation Bar

On pressing back button in top left corner of App Bar

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
  • Can you add some images for better understanding and can you also share your code where you are pushing and popping your screens – Risheek Mittal Dec 22 '22 at 09:10
  • Alright, going to add now – alphacruze Dec 22 '22 at 09:13
  • our post appears to contain code that is not properly formatted as code. Please indent all code by 4 spaces using the code toolbar button or the CTRL+K keyboard shortcut. For more editing help, click the [?] toolbar icon. I keep getting this error when adding the pictures – alphacruze Dec 22 '22 at 09:35
  • Please share your code for pushing and popping screens – Nams Dec 22 '22 at 10:00
  • Please remove Navigator.of(context).pop() from selected item and try – Nams Dec 22 '22 at 10:15

1 Answers1

0

Profil page is piece of bottom navigation.

  onWillPop: () async {

    if (_currentIndex != 0) {
      
      setState(() {
        _currentIndex = 0;
      });
      return false;
    } else {
      
    }
    return widget.go_back;
  },

you should use like that. (main.dart)

return  WillPopScope(
  onWillPop: () async {
    if (currentIndex != 0) {
      setState(() {
        currentIndex = 0;
      });
      return false;
    } 
  },
  child:Scaffold(

  body: Screens[currentIndex],
  bottomNavigationBar: Container(
    color: Colors.black,
    child: Padding(
      padding: const EdgeInsets.symmetric(
       horizontal: 15,
       vertical: 20),
      child: GNav(
        backgroundColor: Colors.black,
        color: Colors.white,
        activeColor: Colors.white,
        tabBackgroundColor: Colors.grey.shade800,
        padding: EdgeInsets.all(16),
        gap: 8,
        onTabChange: (index) => setState(() => currentIndex = index),
        tabs: const[
        GButton(
          icon: Icons.groups_outlined,
          text: 'Global',
        ),

        GButton(
          icon: Icons.rss_feed_outlined,
          text: 'TBD',
          ),
        GButton(
          icon: Icons.running_with_errors_rounded,
          text: 'Alerts',
          ),
        // GButton(
        //   icon: Icons.sports,
        //   text: 'Reports',
        //   ),
        GButton(
          icon: Icons.account_circle_outlined,
          text: 'Profile',
          ),
      ]
      ),
    ),
  ),
)
);