Routes in flutter web have unexpected behavior

1,521

It looks like an update to flutter now solves this question. The expected behavior now happens when using the Navigator.

Share:
1,521
Emmett Deen
Author by

Emmett Deen

Mobile Developer looking to enhance his skills.

Updated on December 14, 2022

Comments

  • Emmett Deen
    Emmett Deen over 1 year

    When using the built in scaffold / app bar in flutter for flutter web, when pushing new routes using the navigator a back button is still shown on the app bar and the url in the browser goes unchanged. This means the browser's back button does not work which is a very strange UX. Is there a way to get around this?

    I have already tried pushing the route in many different ways (pushReplacement gets rid of the back button, but the browser back button still does not work)

    HomeScreen.dart

      @override
      State<StatefulWidget> createState() {
        return HomeScreenState();
      }
    }
    
    class HomeScreenState extends State<HomeScreen> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          endDrawer: Navbar.buildDrawer(context),
          appBar: Navbar.buldNavbar(context),
          body: _buildBody(),
        );
      }
    
      Widget _buildBody(){
        return Text('Home');
      }
    }
    

    Navbar.dart

      static Drawer buildDrawer(BuildContext context) {
        return Drawer(
          child: ListView(
            children: <Widget>[
              ListTile(
                title: Text('Home'),
                leading: Icon(Icons.home),
                onTap: (){
                  Navigator.of(context).pushReplacementNamed('/');
                },
              ),
              ListTile(
                title: Text('About Us'),
                leading: Icon(Icons.people),
                onTap: (){
                  Navigator.of(context).pushReplacementNamed('/about');
                },
              ),
              ListTile(
                title: Text('Contact'),
                leading: Icon(Icons.contact_mail),
                onTap: (){
                  Navigator.of(context).pushReplacementNamed('/contact');
                },
              )
            ],
          ),
        );
      }
    
      static AppBar buldNavbar(BuildContext context) {
        return AppBar(
          title: FlatButton(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: Image.asset('assets/whiteLogo.png'),
            ),
            onPressed: () {
              Navigator.of(context).pushNamed('/');
            },
          ),
        );
      }
    }
    

    I would expect the routes to change the url in browser, enabling us to use the back button and other functionality of normal routing, but the actual result is the same route displaying in the browser and having to use the automatic AppBar back button