title: Flutter: BottomNavigationBar rebuilds Page on change of tab
body: <p>I have a problem with my BottomNavigationBar in Flutter. I want to keep my page alive if I change the tabs.</p>
  <p>here my implementation</p>
  <p>BottomNavigation</p>
  <pre><code>class Home extends StatefulWidget {
    @override
    State&lt;StatefulWidget&gt; createState() {
      return _HomeState();
    }
  }
  
  class _HomeState extends State&lt;Home&gt; {
    int _currentIndex = 0;
    List&lt;Widget&gt; _children;
    final Key keyOne = PageStorageKey(&quot;IndexTabWidget&quot;);
  
    @override
    void initState() {
      _children = [
        IndexTabWidget(key: keyOne),
        PlaceholderWidget(Colors.green),
        NewsListWidget(),
        ShopsTabWidget(),
        PlaceholderWidget(Colors.blue),
      ];
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(MyApp.appName),
          textTheme: Theme.of(context).textTheme.apply(
                bodyColor: Colors.black,
                displayColor: Colors.blue,
              ),
        ),
        body: _children[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          onTap: onTabTapped,
          key: IHGApp.globalKey,
          fixedColor: Colors.green,
          type: BottomNavigationBarType.fixed,
          currentIndex: _currentIndex,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Container(height: 0.0),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.message),
              title: Container(height: 0.0),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Container(height: 0.0),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.perm_contact_calendar),
              title: Container(height: 0.0),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              title: Container(height: 0.0),
            ),
          ],
        ),
      );
    }
  
    void onTabTapped(int index) {
      setState(() {
        _currentIndex = index;
      });
    }
  
    Column buildButtonColumn(IconData icon) {
      Color color = Theme.of(context).primaryColor;
  
      return Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(icon, color: color),
        ],
      );
    }
  }
  </code></pre>
  <p>This is my index page (first tab):</p>
  <pre><code>class IndexTabWidget extends StatefulWidget {
    IndexTabWidget({Key key}) : super(key: key);
  
    @override
    State&lt;StatefulWidget&gt; createState() {
      return new IndexTabState();
    }
  }
  
  class IndexTabState extends State&lt;IndexTabWidget&gt;
      with AutomaticKeepAliveClientMixin {
    List&lt;News&gt; news = List();
    FirestoreNewsRepo newsFirestore = FirestoreNewsRepo();
  
    @override
    Widget build(BuildContext context) {
      return Material(
        color: Colors.white,
        child: new Container(
          child: new SingleChildScrollView(
            child: new ConstrainedBox(
              constraints: new BoxConstraints(),
              child: new Column(
                children: &lt;Widget&gt;[
                  HeaderWidget(
                    CachedNetworkImageProvider(
                      'https://static1.fashionbeans.com/wp-content/uploads/2018/04/50-barbershop-top-savill.jpg',
                    ),
                    &quot;&quot;,
                  ),
                  AboutUsWidget(),
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: SectionTitleWidget(title: StringStorage.salonsTitle),
                  ),
                  StreamBuilder(
                    stream: newsFirestore.observeNews(),
                    builder: (context, snapshot) {
                      if (!snapshot.hasData) {
                        return CircularProgressIndicator();
                      } else {
                        news = snapshot.data;
                        return Column(
                          children: &lt;Widget&gt;[
                            ShopItemWidget(
                              AssetImage('assets/images/picture.png'),
                              news[0].title,
                              news[0],
                            ),
                            ShopItemWidget(
                              AssetImage('assets/images/picture1.png'),
                              news[1].title,
                              news[1],
                            )
                          ],
                        );
                      }
                    },
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                        left: 16.0, right: 16.0, bottom: 16.0),
                    child: SectionTitleWidget(title: StringStorage.galleryTitle),
                  ),
                  GalleryCategoryCarouselWidget(),
                ],
              ),
            ),
          ),
        ),
      );
    }
  
    @override
    bool get wantKeepAlive =&gt; true;
  }
  </code></pre>
  <p>So if I switch from my index tab to any other tab and back to the index tab, the index tab will always rebuild. I debugged it and saw that the build function is always being called on the tab switch.</p>
  <p>Could you guys help me out with this issue?</p>
  <p>Thank you a lot
  Albo</p>