Bottom navigation bar is reloading all the widgets each time I press a navigation item. The solution to keep the pages alive when switching the tabs is wrapping your Pages in a IndexedStack.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | class Tabbar extends StatefulWidget { Tabbar({this.screens}); static const Tag = "Tabbar"; final List<Widget> screens; @override State<StatefulWidget> createState() { return _TabbarState(); } } class _TabbarState extends State<Tabbar> { int _currentIndex = 0; Widget currentScreen; @override 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: [ BottomNavigationBarItem( icon: new Icon(Icons.format_list_bulleted), title: new Text(_l10n.tripsTitle), ), BottomNavigationBarItem( icon: new Icon(Icons.settings), title: new Text(_l10n.settingsTitle), ) ], ), ); } void onTabTapped(int index) { setState(() { _currentIndex = index; }); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
