Flutter Navigation stack with Drawer - flutter

Question

I'm building a multi-page application using Flutter, and it would appear that I'm handling the navigation incorrectly. I've noticed that, as I navigate in between screens, it seems to just keep pushing pages onto my stack, and "evaluates" the whole stack each time. I have an app drawer widget that I include on all of my pages that looks like this:
#override
Widget build(BuildContext context) {
AuthenticationContext authenticationContext =
AuthenticationContext.of(context);
auth = authenticationContext.auth;
var drawerOptions = <Widget>[];
for (var i = 0; i < drawerItems.length; i++) {
var d = drawerItems[i];
drawerOptions.add(new ListTile(
leading: new Icon(d.icon),
title: new Text(d.title),
selected: i == _selectedDrawerIndex,
onTap: () => _onSelectItem(i),
));
}
return new Drawer(
child: new Column(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text(widget.name != null ? widget.name : ""),
accountEmail: Text(widget.email),
currentAccountPicture: CircleAvatar(
child: new Text(
widget.photoUrl == null ? widget.email[0].toUpperCase() : ""),
),
),
new Column(children: drawerOptions)
],
),
);
}
_getDrawerItemWidget(int pos) {
switch (pos) {
case 0:
return new HomePage();
case 1:
return new UserPantryPage();
case 2:
return new ShoppingListPage();
case 3:
return new FavoritesPage();
case 4:
auth.signOut();
return new RootPage();
default:
return new Text("Error");
}
}
_onSelectItem(int index) {
Navigator.of(context).pop();
Navigator.of(context)
.push(MaterialPageRoute<Null>(builder: (BuildContext context) {
return _getDrawerItemWidget(index);
}));
}
I have debug print statements in each of my page Widgets, and if I start clicking around on the drawer to navigate in between pages I notice that it'll start printing debug statements from, for example, the HomePage, even when I'm navigating to a completely separate page. I initially noticed it because one of my pages calls a few APIs to get data in its build method, and the more I used the app, the more the APIs were getting called. I traced it down to the fact that it appears that the build method of all of the page Widgets is getting called even when I'm going to another page Is there something I'm doing very wrong here in terms of navigating in a multi-page app?

Answer 1

Try the following pseudo code. Problem is that build method can be called multiple times during the apps life cycle, so to avoid your code being executed multiple times you move it into the initial state which is only ever called once, either using the override method or as the example below shows. more info here - https://flutterbyexample.com/stateful-widget-lifecycle/
class NavigationDraw extends StatefulWidget {
NavigationDraw({Key key, this.email, this.name}) : super(key:key);
final String email;
final String name;
#override
_NavigationDrawState createState() =>
new _NavigationDrawState();
}
class _NavigationDrawState extends State<NavigationDraw> {
BuildContext _ctx;
var navi;
_NavigationDrawState () {
navi = sideNavi();
}
#override
Widget build(BuildContext context) {
return navi;
}
sideNavi(){
_getDrawerItemWidget(int pos) {
switch (pos) {
case 0:
return new HomePage();
case 1:
return new UserPantryPage();
case 2:
return new ShoppingListPage();
case 3:
return new FavoritesPage();
case 4:
auth.signOut();
return new RootPage();
default:
return new Text("Error");
}
}
_onSelectItem(int index) {
Navigator.of(context).pop();
Navigator.of(context)
.push(MaterialPageRoute<Null>(builder: (BuildContext context) {
return _getDrawerItemWidget(index);
}));
}
AuthenticationContext authenticationContext = AuthenticationContext.of(context);
auth = authenticationContext.auth;
var drawerOptions = <Widget>[];
for (var i = 0; i < drawerItems.length; i++) {
var d = drawerItems[i];
drawerOptions.add(
new ListTile(
leading: new Icon(d.icon),
title: new Text(d.title),
selected: i == _selectedDrawerIndex,
onTap: () => _onSelectItem(i),
));
}
return new Drawer(
child: new Column(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text(widget.name != null ? widget.name : ""),
accountEmail: Text(widget.email),
currentAccountPicture: CircleAvatar(
child: new Text(
widget.photoUrl == null ? widget.email[0].toUpperCase() : ""),
),
),
new Column(children: drawerOptions)
],
),
);
}

Answer 2

When you navigate around, Flutter plays the animation of the transition of screens. Because of this, the widgets being animated keep rebuilding as they might change visually during the animation. With the default fade & slide animation, you tend to get 3 screens building at the same time - the old one fading away, the new one fading in, and the one below the old one which is slightly visible because of the other two being partially transparent while they fade.
The solution to your problem (and the way to work with Flutter in general) is to move everything that doesn't have to do with the UI out of the build function. If you need to fetch some data when a widget is initialized, move that code to the initState function of your StatefulWidget.