Closed JenishHirpara closed 4 years ago
I think this might be an issue that results from the navigator living underneath the scaffold layer. You might just have to stick with using the back button in the app bar. Using the stock back button kind of breaks the tab-based navigation with routes because of how Scaffold handles routes.
ok thanks!
ok here's how i solved the same issue using this CustomNavigator and WillPopScope. you can check out this medium article ------> by Andrea Bizzotto https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf
bonus: using this method also preserves the page state--- meaning when you navigate to page 1 and you open page1 detail page, then you go to say page 2... it ensures the detail page of page 1 remain as you left it (The detail page still opened)
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({Key key, this.title}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
final isFirstRouteInCurrentTab =
!await navigatorKeys[_currentIndex].currentState.maybePop();
if (isFirstRouteInCurrentTab) {
// if not on the 'main' tab
if (_currentIndex != 0) {
// select 'main' tab
setState(() {
_currentIndex = 0;
});
// back button handled by app
return false;
}
}
// let system handle back button if we're on the first route
return isFirstRouteInCurrentTab;
},
child: Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: _items,
onTap: (index) {
setState(() {
_currentIndex = index;
});
print(index);
},
currentIndex: _currentIndex,
),
body: Stack(
children: <Widget>[
_buildPageOffstage(navigatorKeys[0], 0),
_buildPageOffstage(navigatorKeys[1], 1),
_buildPageOffstage(navigatorKeys[2], 2),
],
)),
);
}
Widget _buildPageOffstage(GlobalKey<NavigatorState> key, int index) {
return Offstage(
offstage: _currentIndex != index,
child: CustomNavigator(
navigatorKey: key,
home: Page(title: 'Page $index'),
pageRoute: PageRoutes.materialPageRoute,
),
);
}
final navigatorKeys = [
GlobalKey<NavigatorState>(),
GlobalKey<NavigatorState>(),
GlobalKey<NavigatorState>(),
];
final _items = [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('home')),
BottomNavigationBarItem(icon: Icon(Icons.event), title: Text('events')),
BottomNavigationBarItem(
icon: Icon(Icons.save_alt), title: Text('downloads')),
];
}
@IMEF-FEMI Thank you so much!! It works perfect now
Thanks for this package, however i face an issue here, i have an app with a signup screen after which the screen with custom Scaffold appears(with the bottom Navbar), in there in my bottom Navbar i have four items, if i am currently in the first screen i.e., the HomePage(corresponding to the first item in Navbar) and i navigate to some other screen on pressing a button(say) which is in the HomePage , the bottom Navbar works perfectly and it remains in the navigated screen, but if i use my androids back button it will go directly to the signup page and not to the HomePage as it should, however if i use the backbutton in the appbar it will go to Homepage as intended, i dont know if everyone is facing this issue or i am the only one??