Flutter: BottomNavigationBar rebuilds Page on change of tab

None of the previous answers worked out for me.

The solution to keep the pages alive when switching the tabs is wrapping your Pages in an IndexedStack.

class Tabbar extends StatefulWidget {

  static const Tag = "Tabbar";
  final List<Widget> screens;
  State<StatefulWidget> createState() {
  return _TabbarState();

class _TabbarState extends State<Tabbar> {
  int _currentIndex = 0;
  Widget currentScreen;

  Widget build(BuildContext context) {
    var _l10n = PackedLocalizations.of(context);

    return Scaffold(
  body: IndexedStack(
    index: _currentIndex,
    children: widget.screens,
  bottomNavigationBar: BottomNavigationBar(
    fixedColor: Colors.black,
    type: BottomNavigationBarType.fixed,
    onTap: onTabTapped,
    currentIndex: _currentIndex,
    items: [
        icon: new Icon(Icons.format_list_bulleted),
        title: new Text(_l10n.tripsTitle),
        icon: new Icon(Icons.settings),
        title: new Text(_l10n.settingsTitle),

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;

Leave a Comment