title: Need a persistent/same Bottom Navigation Bar for all screens - Flutter
body: <p>I am a beginner with flutter and dart. I have been trying to implement a <code>navigationBar</code> on three different pages in my app. The toggling works well for an individual page but I have problems persisting the active and inactive tabs state on all the pages. It seems like when it navigates to another page, I lose the active state too the tabs. This is my code.</p>
  
  <p><strong>AppFooter.dart</strong></p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  class AppFooter extends StatefulWidget {
    @override
    _AppFooterState createState() =&gt; _AppFooterState();
  }
  
  class _AppFooterState extends State&lt;AppFooter&gt; {
    int index = 0;
    @override
    Widget build(BuildContext context) {
      return new Theme(
        data: Theme.of(context).copyWith(
            // sets the background color of the `BottomNavigationBar`
            canvasColor: Colors.white,
            // sets the active color of the `BottomNavigationBar` if `Brightness` is light
            primaryColor: Colors.green,
            textTheme: Theme.of(context)
                .textTheme
                .copyWith(caption: new TextStyle(color: Colors.grey))),
        child: new BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            currentIndex: index,
            onTap: (int index) {
              setState(() {
                this.index = index;
              });
            switch (index){
              case 0:  Navigator.of(context).pushNamed('/dashboard');
              break;
              case 1:  Navigator.of(context).pushNamed('/medical centre');
              break;
              case 2:  Navigator.of(context).pushNamed('/history');
              break;
  
            }
  
            },
            items: [
              new BottomNavigationBarItem(
                  backgroundColor: Colors.white,
                  icon: index==0?new Image.asset('assets/images/dashboard_active.png'):new Image.asset('assets/images/dashboard_inactive.png'),
                  title: new Text('Dashboard', style: new TextStyle(fontSize: 12.0))),
             new BottomNavigationBarItem(
                 backgroundColor: Colors.white,
                 icon: index==1?new Image.asset('assets/images/medical_sevice_active.png'):new Image.asset('assets/images/medical_sevice_inactive.png'),
                 title: new Text('Health Services', style: new TextStyle(fontSize: 12.0))),
              new BottomNavigationBarItem(
                  icon: InkWell(
                    child: Icon(
                      Icons.format_align_left,
                     // color: green,
                      size: 20.0,
                    ),
                  ),
                  title: new Text('History', style: new TextStyle(fontSize: 12.0))),
            ]),
      );
    }
  }
  </code></pre>