How to achieve each screen having Scaffold widget while using BottomNavigation bar?

Question

I am new to flutter and recently I am implementing bottom navigation bar for the first time.

So As any of the general apps , I want to achieve a screens which can be navigated using bottom navigation bar and each screen has its own Appbar and all stuff ( in short Scaffold widget ).

But as bottom navigation bar itself is wrapped inside Scaffold and I have read somewhere that it's advisable not to nest Scaffold widgets.

So in this case , is there any alternate ways to do so or How can I achieve this ?.

Thank you :)

score 0 · Answer 1 · edited Oct 02 '20 at 17:26

you can make only one scaffold for your 3 or 4 or 5 screens

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
     Screen1(); // this is your first screen which return let's say listview builder
     Screen2(); // this is your second screen which return let's say container
     Screen3(); // this is your third screen which return let's say gridview or column
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

here onTap method navigates your screen. you don't need navigator.push or navigator.pushNamed to navigate the screen.

You misunderstood the question , Suppose I have 5 screens then I need all of them to have Scaffold as their root widget. How to achieve it ? — Kartik Bhanderi, Sep 27 '20 at 17:12
No, you don't need 5 `scaffold` for that. you can directly return the widget which you want. — Abhishek Ghaskata, Sep 27 '20 at 17:13
you can refer this https://stackoverflow.com/questions/45235570/how-to-use-bottomnavigationbar-with-navigator and https://willowtreeapps.com/ideas/how-to-use-flutter-to-build-an-app-with-bottom-navigation and https://brainsandbeards.com/blog/bottom-navigation-with-a-list-screen-in-flutter — Abhishek Ghaskata, Sep 27 '20 at 17:16

How to achieve each screen having Scaffold widget while using BottomNavigation bar?

1 Answers1