CODEWITHSUNDEEP
flutternavigator
Andrei Calin
Andrei Calin

Reputation: 53

Flutter Remove Bottom Navigation Bar on Navigatore.push

I'm working on a project with flutter, I have a bottom navigation bar , this bar allow me to move on different scenes . I would like to remove my bottom navigation bar when i navigate to a detail page, there is any method? I'm trying all the possible solution , but i can't solve the problem, maybe i've implemented wrong my navigation bar !

Some Code:

My HomePage where i implemented the bottom navigation bar and where i call all the others pages:

class homeScreen extends StatefulWidget {
  @override
  _homeScreenState createState() => _homeScreenState();
}

class _homeScreenState extends State<homeScreen> {
  TextEditingController _linkController;
  int _currentIndex = 0;
  final _pageOptions = [
    meetingScreen(),
    dashboardScreen(),
    notificationScreen(),
    profileScreen(),

  ];


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _linkController = new TextEditingController();

  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 1125, height: 2436)..init(context);

    return MaterialApp(
      title: myUi.myTitle,
      theme: myUi.myTheme ,
      debugShowCheckedModeBanner: false,
      home:Scaffold(

        bottomNavigationBar: _buildBottomNavigationBar(),
        body: _pageOptions[_currentIndex] ,

      ) ,
    );

  }


  Widget _buildBottomNavigationBar() {
    return BottomNavigationBar(
      backgroundColor: Colors.white,
      selectedItemColor: Theme.of(context).primaryColor,
      //fixedColor: gvar.secondaryColor[gvar.colorIndex],

      currentIndex: _currentIndex,
      onTap: (index) {
        setState(() {
          _currentIndex = index;
        });
      },
      type: BottomNavigationBarType.fixed,

      items: [
        BottomNavigationBarItem(

            icon: Icon(Icons.explore,size: ScreenUtil().setWidth(80),),
            title: new Text("Esplora"),
        ),

        BottomNavigationBarItem(
          icon:Icon(Icons.dashboard,size: ScreenUtil().setWidth(80),),
          title: new Text("Attività"),

        ),

        BottomNavigationBarItem(
          icon:Icon(Icons.notifications,size: ScreenUtil().setWidth(80),),
          title: new Text("Notifiche"),

        ),

        BottomNavigationBarItem(
          icon:Icon(Icons.person,size: ScreenUtil().setWidth(80),),
          title: new Text("Profilo"),

        ),



      ],
    );
  }
}

This is the code i use into the dashboardScreen to push to my detail page:

            onTap: () {
              //method: navigate to Meeting

              Navigator.push(context, MaterialPageRoute(
                    builder: (BuildContext context) =>  new meetingScreen()),
              );

            },

In the new meetingScreen i have some ui , but i cant remove my old bottom navigation bar, i tried implementing a new navigation bar but it isn't displayed.

A partial working solution was to do like so:

Navigator.of(context, rootNavigator: true).pushReplacement(MaterialPageRoute(builder: (context) => new meetingScreen()));

But now I can't do Navigator.pop with the cool animation , because the new page is the root!

Thanks guys for the support !!

Upvotes: 4

Views: 2741

Answers (1)

Omatt
Omatt

Reputation: 10529

To navigate to a different screen without the bottom Navigation bar, you'd need to call Navigator.push() from _homeScreenState. For you to be able to do this, you need to create a NavigatorKey in _homeScreenState and set it in MaterialApp().

final _mainNavigatorKey = GlobalKey<NavigatorState>();

...

MaterialApp(
  navigatorKey: _mainNavigatorKey,
  ...
)

You can then pass the NavigatorKey to your pages. To use _mainNavigatorKey, fetch its current state to be able to invoke push().

navigatorKey.currentState!.push(...)

Here's a sample that I have. Though instead of a bottom Navigation bar, I'm using a Navigation Drawer. The same method applies in this sample.

Upvotes: 1

Related Questions