Prevent navigate the page same to current page when tapping drawer item in flutter

2,183

A fairly simple solution to this would be to simply make the button for the current page disabled. You could make an enum of all the pages and pass in a 'currentPage', and then when you're building the list tiles you could do something like onTap: currentPage == Pages.Search ? null : () { .... }

If you want to do something a bit more configurable, you could do something like what I do for my app - for my drawer menu, I have an enum that lists all of the options (i.e. enum DrawerSections { home, profile, settings, about, logout } and my drawer class takes a list of sections to show, as I don't want all of the menu sections shown in each case. You could pass in a list of something like DrawerSectionSpec that has a DrawerSection and a bool enabled.

Share:
2,183
Vincent
Author by

Vincent

Live in a planet 1.5 billion light years from Earth.

Updated on December 07, 2022

Comments

  • Vincent
    Vincent over 1 year

    Suppose I have a drawer, and the app already in 'Home' page.

    When tapping the 'Settings' item in drawer, it will navigate again to 'Settings'.

    How to prevent it, prevent navigate to the page same with current page.

    Widget build(BuildContext context) {
        return new Drawer(
          child: new ListView(
            children: <Widget>[
              new ListTile(
                title: new Text("Home"),
                trailing: new Icon(Icons.local_florist),
                onTap: (){
                  Navigator.of(context).pop();
                  Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new HomePage()));
                  Navigator.pushNamedAndRemoveUntil(context, '/', (_) => false);
                },
              ),
              new ListTile(
                title: new Text("Search"),
                trailing: new Icon(Icons.search),
                onTap: (){
                  Navigator.of(context).pop();
                  Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new SearchPage('Search Web')));
                },
              ),
              new Divider(),
              new ListTile(
                title: new Text("Settings"),
                trailing: new Icon(Icons.settings),
                onTap: (){
                  Navigator.of(context).pop();
                  Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new SettingsPage('Settings Center')));
                },
              ),
            ],
          ),
        );
      }
    
    • Andrey Turkovsky
      Andrey Turkovsky over 5 years
      It'll be better if you'll paste some code - how exactly you make this
    • Vincent
      Vincent over 5 years
      Code updated...
    • Vincent
      Vincent over 5 years
      I use pop() to close the drawer after tapping. push() to navigate to the selecting page. And I add this drawer to every page.
    • Andrey Turkovsky
      Andrey Turkovsky over 5 years
      It seems quite a boilerplate. I think it'll be better to make one abstract class with drawer to avoid this copypaste
    • Andrey Turkovsky
      Andrey Turkovsky over 5 years
      And about your question - try to look at this - docs.flutter.io/flutter/material/RadioListTile-class.html - maybe using them instead of 'ListTile`s will help. Or you can save current state of your drawer and check it before pushing new route
    • Vincent
      Vincent over 5 years
      I wrapped the drawer into a class already. and use drawer: new drawerEx(), in each Scaffold.
  • Vincent
    Vincent over 5 years
    I used the first simple to do it. The second is a little complex, I will do it later, cause I'm learning flutter not very long. If you have any samples, It will be much more thankful.