title: Flutter - Persistent Navigation Bar
body: <p>I hope that you are doing well.</p>
  <p>Bellow, you will find some code I am using for a test. For those of you who are using Google Mail application, I am trying to reproduce the same. It has a bottom navigation Bar staying always on the screen, even when I use the drawer and select one of the option.</p>
  <p>Right now, I am getting this error. I do not know how to fix it. Many thanks for your help.</p>
  <p>The method '[]' was called on null.
  Receiver: null
  Tried calling: </p>
  <pre><code>//Home
  
  import 'package:flutter/material.dart';
  import 'package:flutter/cupertino.dart';
  import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart';
  
  import 'myDrawer_Widget.dart';
  
  
  class HomePage extends StatefulWidget {
    HomePage ({Key key}) : super(key : key);
  
    @override
    _HomePageState createState() =&gt; _HomePageState();
  }
  
  class _HomePageState extends State&lt;HomePage&gt; {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        drawer:  new MyMenu(),
        appBar: new AppBar(
          title: new Text('Home Page'),
        ),
        body: Column(
          children: [
            Expanded(
                child: Text(&quot;Home Page&quot;)
            ),
          ],
        ),
       // bottomNavigationBar: ,
      );
      throw UnimplementedError();
    }
  }
  </code></pre>
  <pre><code>//Main
  import 'package:flutter/material.dart';
  
  
  import 'Home.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Persistent Bottom Navigation Bar example project',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomePage(),
        initialRoute: '/',
      );
    }
  }
  
  </code></pre>
  <pre><code>//MyDrawer
  
  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  
  import 'View1.dart';
  import 'View2.dart';
  import 'View3.dart';
  import 'View4.dart';
  
  class MyMenu extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Drawer(
        elevation: 5.0,
  
        child: Column(
          children: [
            Expanded(
              flex: 1,
              child: Container(
  
                child: UserAccountsDrawerHeader()
              ),
            ),
            Expanded(
              flex: 4,
              child: ListView(
                //padding: EdgeInsets.zero,
                children: [
                  ListTile(
                      dense: true,
                      //tileColor: Colors.lightBlue[300],
                      title: new Row(children: &lt;Widget&gt;
                      [new Text(&quot;View1&quot;,
                          style: new TextStyle(
                              color: Colors.blue[900],
                              fontWeight: FontWeight.bold, fontSize: 13.0),)
                      ],
                        mainAxisAlignment: MainAxisAlignment.start,),
  
                      onTap: () {
                        Navigator.pop(context);
                        Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) =&gt; View1(),));
                      }),
  
                  ListTile(
                      dense: true,
  
                      leading: Icon(Icons.home),
  
                      title: Transform(transform: Matrix4.translationValues(distanceEntreTextAndIcon, alignementTextWithIcon, 0.0),
                          child: new Row(children: &lt;Widget&gt;
                          [new Text(&quot;View2&quot;,
                              style: new TextStyle(
                                  color: Colors.black,
                                  fontWeight: FontWeight.normal, fontSize: 13.0),)
                          ],
                            mainAxisAlignment: MainAxisAlignment.start,)
                      ),
  
                      onTap: () {
  
                       Navigator.pop(context);
                        Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) =&gt; View2(),));
                      }
                  ),
  
                  Divider(),
  
                  ListTile(
                      dense: true,
  
                      // tileColor: Colors.lightBlue[300],
                      title: new Row(children: &lt;Widget&gt;[new Text(&quot;View3&quot;,
                        style: new TextStyle(
                            color: Colors.blue[900],
                            fontWeight: FontWeight.bold, fontSize: 13.0),)
                      ], mainAxisAlignment: MainAxisAlignment.start,),
  
                      onTap: () {
                        Navigator.pop(context);
                        Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) =&gt; View3(),));
                      }
                  ),
  
                  Divider(),
  
                  ListTile(
                    dense: true,
                    // tileColor: Colors.lightBlue[300],
                    title: new Row(children: &lt;Widget&gt;[new Text(&quot;View4&quot;,
                      style: new TextStyle(
                          color: Colors.blue[900],
                          fontWeight: FontWeight.bold, fontSize: 13.0),
                    )
                    ],
                      mainAxisAlignment: MainAxisAlignment.start,),
                      onTap: () {
                        Navigator.pop(context);
                        Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) =&gt; View4(),));
                      }
  
                  ),
  
                ],
                padding: EdgeInsets.all(0.0),
              ),
            ),
          ],
        ),
      );
    }
  }
  </code></pre>
  <pre><code>//persistentBottomNavBar
  
  import 'package:flutter/material.dart';
  
  import 'View1.dart';
  import 'View2.dart';
  import 'View3.dart';
  
  
  class PersistentBottomNavBar extends StatefulWidget {
    @override
    _PersistentBottomNavBarState createState() =&gt; _PersistentBottomNavBarState();
  }
  
  class _PersistentBottomNavBarState extends State&lt;PersistentBottomNavBar&gt; {
    final Key keyOne = PageStorageKey('View1');
    final Key keyTwo = PageStorageKey('View2');
    final Key keyThree = PageStorageKey('View3');
  
  
    int currentTab = 0;
  
    View1 one;
    View2 two;
    View3 three;
  
    List&lt;Widget&gt; pages;
    Widget currentPage;
  
    final PageStorageBucket bucket = PageStorageBucket();
  
    @override
    void initState() {
  
      one = View1(
        key: keyOne,
      );
      two = View2(
        key: keyTwo,
      );
      three = View3(
        key: keyThree,
      );
  
      pages = [one, two, three, ];
  
      currentPage = one;
  
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
  
        body: PageStorage(
          child: currentPage,
          bucket: bucket,
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: currentTab,
          onTap: (int index) {
            setState(() {
              currentTab = index;
              currentPage = pages[index];
            });
          },
          type: BottomNavigationBarType.fixed,
          items: &lt;BottomNavigationBarItem&gt;[
             BottomNavigationBarItem(
              icon: currentTab==0? Icon(Icons.home,size: 40.0):Icon(Icons.home,size: 40.0),
              title: Text('View1',
                style: currentTab==0?
                TextStyle(color:(Colors.blue ), fontSize: 12.0):
                TextStyle(color:(Colors.black ), fontSize: 12.0)) ),
  
  
            BottomNavigationBarItem(
              icon: currentTab==1? Icon(Icons.save,size: 40.0):Icon(Icons.save,size: 40.0),
                  title: Text('View2',
                    style: currentTab==1?
                  TextStyle(color:(Colors.blue ), fontSize: 12.0):
                  TextStyle(color:(Colors.black ), fontSize: 12.0)) ),
  
            BottomNavigationBarItem(
            icon: currentTab==2? Icon(Icons.insert_invitation,size: 40.0):Icon(Icons.insert_invitation,size: 40.0),
            title: new Text(&quot;View3&quot;,
            style: currentTab==2?
                 TextStyle(color:(Colors.blue ), fontSize: 12.0):
                 TextStyle(color:(Colors.black ), fontSize: 12.0)) ),
          ],
        ),
      );
    }
  }
  </code></pre>
  <pre><code>//View1
  import 'package:flutter/material.dart';
  import 'package:flutter/cupertino.dart';
  import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart';
  
  import 'myDrawer_Widget.dart';
  
  
  class View1 extends StatefulWidget {
    View1 ({Key key}) : super(key : key);
  
    @override
    _View1State createState() =&gt; _View1State();
  }
  
  class _View1State extends State&lt;View1&gt; {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        drawer:  new MyMenu(),
        appBar: new AppBar(
          title: new Text('View1'),
        ),
        body: Column(
          children: [
            Expanded(
                child: Text(&quot;View1&quot;)
            ),
          ],
        ),
        bottomNavigationBar: PersistentBottomNavBar(),
      );
      throw UnimplementedError();
    }
  }
  
  class BottomNavB extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return PersistentBottomNavBar();
    }
    void initState() {}
  }
  </code></pre>
  <pre><code>//View2
  
  import 'package:flutter/material.dart';
  import 'package:flutter/cupertino.dart';
  
  import 'myDrawer_Widget.dart';
  
  
  class View2 extends StatefulWidget {
    View2 ({Key key}) : super(key : key);
  
    @override
    _View2State createState() =&gt; _View2State();
  }
  
  class _View2State extends State&lt;View2&gt; {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        drawer:  new MyMenu(),
        appBar: new AppBar(
          title: new Text('View2'),
        ),
        body: Column(
          children: [
            Expanded(
                child: Text(&quot;View2&quot;)
            ),
          ],
        ),
        //bottomNavigationBar: MyBottomAppBar(),
      );
      throw UnimplementedError();
    }
  }
  </code></pre>
  <pre><code>//View3
  import 'package:flutter/material.dart';
  import 'package:flutter/cupertino.dart';
  
  import 'myDrawer_Widget.dart';
  
  
  class View3 extends StatefulWidget {
    View3 ({Key key}) : super(key : key);
  
    @override
    _View3State createState() =&gt; _View3State();
  }
  
  class _View3State extends State&lt;View3&gt; {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        drawer:  new MyMenu(),
        appBar: new AppBar(
          title: new Text('View3'),
        ),
        body: Column(
          children: [
            Expanded(
                child: Text(&quot;View3&quot;)
            ),
          ],
        ),
        //bottomNavigationBar: MyBottomAppBar(),
      );
      throw UnimplementedError();
    }
  }
  </code></pre>
  <pre><code>//View4
  import 'package:flutter/material.dart';
  import 'package:flutter/cupertino.dart';
  
  import 'myDrawer_Widget.dart';
  
  
  class View4 extends StatefulWidget {
    View4 ({Key key}) : super(key : key);
  
    @override
    _View4State createState() =&gt; _View4State();
  }
  
  class _View4State extends State&lt;View4&gt; {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        drawer:  new MyMenu(),
        appBar: new AppBar(
          title: new Text('View4'),
        ),
        body: Column(
          children: [
            Expanded(
              child: Text(&quot;View4&quot;)
            ),
          ],
        ),
        //bottomNavigationBar: MyBottomAppBar(),
      );
      throw UnimplementedError();
    }
  }
  </code></pre>
  <pre><code>//View5
  import 'package:flutter/material.dart';
  import 'package:flutter/cupertino.dart';
  
  import 'myDrawer_Widget.dart';
  
  
  class View5 extends StatefulWidget {
    View5 ({Key key}) : super(key : key);
  
    @override
    _View5State createState() =&gt; _View5State();
  }
  
  class _View5State extends State&lt;View5&gt; {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        drawer:  new MyMenu(),
        appBar: new AppBar(
          title: new Text('View4'),
        ),
        body: Column(
          children: [
            Expanded(
                child: Text(&quot;View4&quot;)
            ),
          ],
        ),
        //bottomNavigationBar: MyBottomAppBar(),
      );
      throw UnimplementedError();
    }
  }
  </code></pre>