Flutter Drawer navigate to a single page multiple times

Question

when i pull the drawer and select a page to navigate to it is like create a new instance of that, for example if i clicked on the same page 4 times it shows the animation of opening a new page 4 times and same when i press the back button of the phone.

  new ListTile(
        leading: Icon(Icons.home),
        title: new Text("Home"),
        onTap: () {
          Navigator.pop(ctxt);
          Navigator.push(
              ctxt, new MaterialPageRoute(builder: (ctxt) => MyHomePage()));
        },

here's the drawer file i'm using in all the pages

class DrawerOnly extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new Drawer(
      child: new ListView(
        children: <Widget>[
          new UserAccountsDrawerHeader(
            accountName: new Text('Fethi'),
            accountEmail: new Text('Myemail@Mail.com'),
            currentAccountPicture: new CircleAvatar(
              backgroundImage: new NetworkImage('http://i.pravatar.cc/300'),
          ),
        ),
      new ListTile(
        leading: Icon(Icons.home),
        title: new Text("Home"),
        onTap: () {
          Navigator.pushReplacement(
              ctxt, new MaterialPageRoute(builder: (ctxt) => MyHomePage()));
        },
      ),
      new ListTile(
        leading: Icon(Icons.note),
        title: new Text("ADD Notes"),
        onTap: () {
          Navigator.pushReplacement(
              ctxt, new MaterialPageRoute(builder: (ctxt) => EditNote()));
        },
      ),
    ],
  ),
);

} }

please show your full code – Sami Kanafani Mar 11 '19 at 16:00 — Sami Kanafani, Mar 11 '19 at 16:00
it is too long man, that's the part causing the issue. – Mar 13 '19 at 08:22 — , Mar 13 '19 at 08:22

score 1 · Accepted Answer · answered Mar 11 '19 at 16:43

1

Simply replace the Navigator.push to Navigator.pushReplacement & remove Navigator.pop

It will replace the current screen with the new screen. And it will solve your problem.

To know in detail, just check this documentation: https://docs.flutter.io/flutter/widgets/Navigator/pushReplacement.html

answered Mar 11 '19 at 16:43

Dhrumil Shah - dhuma1981

15,166
6
31
39

now when i make changes in home page and go to the second page then go back to home page those changes aren't saved, it is like i opened the page for the first time. – Mar 13 '19 at 08:18
does it has a relation with the database ? – Mar 13 '19 at 08:20
Yes, it will replace the current page with the new one which you apply. And it does not have a relation with the database. – Dhrumil Shah - dhuma1981 Mar 13 '19 at 09:26
so how can i get back to the old page without losing data? – Mar 15 '19 at 09:17

Amol Gangadhare · Answer 2 · 2019-03-11T16:34:29.200

As per your code, you are initializing the MyHomePage screen on top of the current screen(starting new screen). In drawer navigation you have to replace the body: with the screens you wish to show.

Example :

Take a variable like

  int selectionScreen = 0;

you can take it as per your need, I took an int. Now based on this you can choose which screen you wish to show.

new Scaffold(
        appBar: new AppBar(
          // here we display the title corresponding to the fragment
          // you can instead choose to have a static title
          title: new Text("Drawer navigation"),
        ),
        drawer: new Drawer(
          child: new Column(
            children: <Widget>[
              new ListTile(
                  leading: Icon(Icons.home),
                  title: new Text("Home"),
                  onTap: () {
                    setState(() {
                      selectionScreen = 0;
                    });
                    Navigator.pop(context);
                  })
            ],
          ),
        ),
        body: _getScreen(selectionScreen));

Now you can use _getScreen() to get multiple screens, as you add more ListTile to drawer list.

_getScreen(int selection) {
    switch (selection) {
      case 0:
        return MyHomePage();

      case 1:
        return Screen2();
      default:
    }
  }

This will replace the screens in the existing drawer navigation screen.

Please acknowledge if this was the issue you were facing. Thank you.

yeah i fixed the issue and it is now replacing the pages but when i make changes in home page and go to the second page then go back to home page the changes aren't saved, it is like i opened the page for the first time. — , Mar 13 '19 at 08:17

Flutter Drawer navigate to a single page multiple times

2 Answers2