How to use BottomNavigationBar with Navigator?

Question

The Flutter Gallery example of BottomNavigationBar uses a Stack of FadeTransitions in the body of the Scaffold.

I feel it would be cleaner (and easier to animate) if we could switch pages by using a Navigator.

Are there any examples of this?

Answer 1

int index = 0;  @override Widget build(BuildContext context) {   return new Scaffold(     body: new Stack(       children: <Widget>[         new Offstage(           offstage: index != 0,           child: new TickerMode(             enabled: index == 0,             child: new MaterialApp(home: new YourLeftPage()),           ),         ),         new Offstage(           offstage: index != 1,           child: new TickerMode(             enabled: index == 1,             child: new MaterialApp(home: new YourRightPage()),           ),         ),       ],     ),     bottomNavigationBar: new BottomNavigationBar(       currentIndex: index,       onTap: (int index) { setState((){ this.index = index; }); },       items: <BottomNavigationBarItem>[         new BottomNavigationBarItem(           icon: new Icon(Icons.home),           title: new Text("Left"),         ),         new BottomNavigationBarItem(           icon: new Icon(Icons.search),           title: new Text("Right"),         ),       ],     ),   ); } 

You should keep each page by Stack to keep their state. Offstage stops painting, TickerMode stops animation. MaterialApp includes Navigator.

Answer 2

Output:

Code:

int _index = 0;  @override Widget build(BuildContext context) {   Widget child;   switch (_index) {     case 0:       child = FlutterLogo();       break;     case 1:       child = FlutterLogo(colors: Colors.orange);       break;     case 2:       child = FlutterLogo(colors: Colors.red);       break;   }    return Scaffold(     body: SizedBox.expand(child: child),     bottomNavigationBar: BottomNavigationBar(       onTap: (newIndex) => setState(() => _index = newIndex),       currentIndex: _index,       items: [         BottomNavigationBarItem(icon: Icon(Icons.looks_one), title: Text("Blue")),         BottomNavigationBarItem(icon: Icon(Icons.looks_two), title: Text("Orange")),         BottomNavigationBarItem(icon: Icon(Icons.looks_3), title: Text("Red")),       ],     ),   ); }