BottomNavigationBar and Provider?

Question

I used the bottom navigation bar and added 3 buttons to the bottom.I was swapping pages with setsate. These buttons work fine. But if I call another page inside the pages called with those buttons, the BottomNavigationBar disappears. I've researched it and found this click me. Is it logical to use Provider to call pages? I think it keeps every page in memory, doesn't it consume too much ram?

 import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int selectedPage = 0;

  final _pageOptions = [
    HomeScreen(),
    InboxScreen(),
    SignInScreen()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: _pageOptions[selectedPage],
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home, size: 30), title: Text('Home')),
            BottomNavigationBarItem(icon: Icon(Icons.mail, size: 30), title: Text('Inbox')),
            BottomNavigationBarItem(icon: Icon(Icons.account_circle, size: 30), title: Text('Account')),
          ],
          selectedItemColor: Colors.green,
          elevation: 5.0,
          unselectedItemColor: Colors.green[900],
          currentIndex: selectedPage,
          backgroundColor: Colors.white,
          onTap: (index){
            setState(() {
              selectedPage = index;
            });
          },
        )
    );
  }
}

This is my home page.BottomNavigationBar disappears If I clicked on the text

class _HomePage extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(appBar: AppBar(title: Text('Page2')),body:GestureDetector(
        onTap: () {
    
            Navigator.of(context).push(MaterialPageRoute(builder: (context) => NewScreen()));

        },
        child:Text('clik')));
  }
}

I want to like this But my code run this

Some code would help to understand your problem here ! The Provider library would be helpful if you needed to share values and/or actions between your pages, your problem is elsewhere :) — FDuhen, Mar 30 '21 at 20:45
Just I want to call another page keep bottomnavigationbar . Just imagine instagram . If you search for someone on Instagram and click on their profile, bottomnavigation bar still stands there — coder12255, Mar 30 '21 at 20:58

FDuhen · Answer 1 · 2021-03-31T09:49:30.823

The code you posted looks perfectly fine !
Your problem must be elsewhere, probably in one of the Widgets

final _pageOptions = [
  HomeScreen(),
  InboxScreen(),
  SignInScreen()
];

There can be many root causes to your problem, you could start by identifying which Widget is making the bottomNavigationBar disappear.
Once you found it out, be sure that you didn't use the method Navigator.of(context).push which could be one of the reasons why your bottomNavigationbar is disappearing.

If you're still stuck, feel free to update your question with the source code of the Widget making the bar disappear and I'll update my answer

EDIT
As I mentioned earlier, whenever you call the Navigator.push(context, UserProfilePage); method, you're replacing your previous widget with a new one.
Since your previous Widget was holding your bottomNavigationBar, that's why it's disappearing.

What you are looking for here is, how to have a persistent navigation bar.
Here are two useful links that'll help you and the other people having this need, a Video tutorial to understand how to implement it and a well written article to fully understand how it works

BottomNavigationBar and Provider?

1 Answers1