How to preserve state of Widgets with BottomNavigationBar in Flutter?

Question

I have a BottomNavigationBar, specifically a BubbleBottomBar. I have nested MaterialApps to give a new Navigator to the inner Widgets. However, when I switch tabs each widget in the bottom navigation bar is rebuilt. This is not good for me, as I want to keep the widgets in the same state. How would I achieve this?

Answer 1

I think you can easily solve that problem with using CupertinoTabScaffold&CuppertinoTabBar&CupertinoTabView it has that feature.

read more about there if you needed: Cupertino Widgets

official example : Cupertino Navigation&TabBar

this is my code it works the way you want it to work.(not rebuilding when you change tabs) you can convert it to yours:

import 'package:flutter/cupertino.dart';

CupertinoTabScaffold(
          tabBar: CupertinoTabBar(items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.explore), title: Text('Explore')),
            BottomNavigationBarItem(
                icon: Icon(Icons.card_travel), title: Text('Adventure')),
            BottomNavigationBarItem(
                icon: Icon(Icons.search), title: Text('Search')),
            BottomNavigationBarItem(
                icon: Icon(Icons.collections_bookmark),
                title: Text('Bookmarks')),
            BottomNavigationBarItem(
                icon: Icon(Icons.person), title: Text('Profile')),
          ]),
          tabBuilder: (context, index) {
            return CupertinoTabView(
              builder: (context) {
                switch (index) {
                  case 0:
                    return ExplorePage();
                    break;
                  case 1:
                    return AdventurePage();
                    break;
                  case 2:
                    return SearchTourPage();
                    break;
                  case 3:
                    return Text('Bookmark Page');
                    break;
                  case 4:
                    return ProfilePage();
                    break;
                  default:
                    return SearchTourPage();
                }
              },
            );
          })

Answer 2

You can use AutomaticKeepAliveClientMixin to force your bottom bar content to not be disposed. But for this thing to work you might have to wrap your BottomNavigationBar inside a Stateful Widget.

I think this question might have the deatiled answer that you're looking for.

Example:

class CustomBottomBar extends StatefulWidget {
  @override
  _CustomBottomBarState createState() => _CustomBottomBarState();
}

class _CustomBottomBarState extends State<CustomBottomBar> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    return BubbleBottomBar(
      /*Your bottom bar code goes here*/
    );
  }

  // Setting it true will force the bottom bar to never be disposed. This could be dangerous.
  @override
  bool get wantKeepAlive => true;
}