Want to do nested navigation in Flutter. Here is a simple example that even supports popping to the first screen with a tab bar.
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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | import 'package:flutter/material.dart'; import '../bible/screen.dart'; import '../library/screen.dart'; import '../playlists/screen.dart'; import '../search/screen.dart'; import '../settings/screen.dart'; class TabsScreen extends StatefulWidget { @override _TabsScreenState createState() => _TabsScreenState(); } class _TabsScreenState extends State<TabsScreen> { int _currentIndex = 0; final _libraryScreen = GlobalKey<NavigatorState>(); final _playlistScreen = GlobalKey<NavigatorState>(); final _searchScreen = GlobalKey<NavigatorState>(); final _bibleScreen = GlobalKey<NavigatorState>(); final _settingsScreen = GlobalKey<NavigatorState>(); @override Widget build(BuildContext context) { return Scaffold( body: IndexedStack( index: _currentIndex, children: <Widget>[ Navigator( key: _libraryScreen, onGenerateRoute: (route) => MaterialPageRoute( settings: route, builder: (context) => LibraryScreen(), ), ), Navigator( key: _playlistScreen, onGenerateRoute: (route) => MaterialPageRoute( settings: route, builder: (context) => PlaylistsScreen(), ), ), Navigator( key: _searchScreen, onGenerateRoute: (route) => MaterialPageRoute( settings: route, builder: (context) => SearchScreen(), ), ), Navigator( key: _bibleScreen, onGenerateRoute: (route) => MaterialPageRoute( settings: route, builder: (context) => BibleScreen(), ), ), Navigator( key: _settingsScreen, onGenerateRoute: (route) => MaterialPageRoute( settings: route, builder: (context) => SettingsScreen(), ), ), ], ), bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, currentIndex: _currentIndex, onTap: (val) => _onTap(val, context), backgroundColor: Theme.of(context).scaffoldBackgroundColor, items: [ BottomNavigationBarItem( icon: Icon(Icons.library_books), title: Text('Library'), ), BottomNavigationBarItem( icon: Icon(Icons.list), title: Text('Playlists'), ), BottomNavigationBarItem( icon: Icon(Icons.search), title: Text('Search'), ), BottomNavigationBarItem( icon: Icon(Icons.import_contacts), title: Text('Bible'), ), BottomNavigationBarItem( icon: Icon(Icons.settings), title: Text('Settings'), ), ], ), ); } void _onTap(int val, BuildContext context) { if (_currentIndex == val) { switch (val) { case 0: _libraryScreen.currentState.popUntil((route) => route.isFirst); break; case 1: _playlistScreen.currentState.popUntil((route) => route.isFirst); break; case 2: _searchScreen.currentState.popUntil((route) => route.isFirst); break; case 3: _bibleScreen.currentState.popUntil((route) => route.isFirst); break; case 4: _settingsScreen.currentState.popUntil((route) => route.isFirst); break; default: } } else { if (mounted) { setState(() { _currentIndex = val; }); } } } } |
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.
