How to configure go back button in Browser for Flutter Web App

Question

I'm not asking about webview. This is about Flutter web app. I need to go back to a specific page when user press back button which is inbuilt in browser.

Any guessing ?

I'm getting this error when I press back button

Error: Assertion failed: org-dartlang- 
    sdk:///flutter_web_sdk/lib/_engine/engine/history.dart:110:14 
    _userProvidedRouteName != null
    is not true
        at Object.throw_ [as throw] (http://localhost:8300/dart_sdk.js:4770:11)
        at Object.assertFailed (http://localhost:8300/dart_sdk.js:4721:15)

Antependium

have you tried WillPopScope() ? #45917158 – Cochrane

#59764279 – Cochrane

I'm getting this error – Antependium

Error: Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/history.dart:110:14 userProvidedRouteName != null is not true at Object.throw [as throw] (localhost:8300/dart_sdk.js:4770:11) at Object.assertFailed (localhost:8300/dart_sdk.js:4721:15) – Antependium

please share your code, if its not working :) – Cochrane

Please provide the solution as well. if it is working @FaslurRajah – Stauffer

Answer 1

onWillPop Navigate to a new Page

class webScope extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new WillPopScope(
      onWillPop: () async => Navigator.push(context, MaterialPageRoute(builder: (context) => new NewPageWidget())),
      child: Scaffold(
        appBar: new AppBar(
          title: new Text("webScope"),
        ),
      ),
    );
  }
}

Cochrane

Answer 2

In case if you don't want to navigate to a new page

    @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => true,
      child: Scaffold(

        key: _scaffold,
        backgroundColor: Colors.indigo,
        body: Center(
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                registerForm(),
                registerBtn(),
                SizedBox(height: 30,),
                _buildSignInButton()
              ],
            ),
          ),
        ),
      ),
    );
  }

Unschooled

Any idea why it doesn't work for Rony and Umut, as well as myself? – Gowen

Answer 3

onWillPop: () {
  Navigator.pop(context);
  return new Future(() => true);
}

Sponsor

Answer 4

If you are looking to emulate the browser back button from within a pushed route in your Flutter web app, I have achieved this via use of Router.neglect:

AppBar(
        leading: GestureDetector(
          child: const Icon(Icons.close_rounded, color: Colors.white),
          onTap: () => Router.neglect(context, () => context.pop()),
        ),
      ),

Daugavpils

Answer 5

For disable this chrome back button you can use

 onWillPop: () {
  exit(0);
  return new Future(() => true);
}

and for hand back press for back page you can use willPop:

 WillPopScope(
  onWillPop: () async => Navigator.push(context, MaterialPageRoute(builder: (context) => YOUROLDPAGE()),
  child: Scaffold(
    appBar: new AppBar(
      title: new Text("Home Page"),
    ),
  ),
);

Moron

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, can you edit your answer to include an explanation of what you're doing and why you believe it is the best approach? – Orlantha

Thank you Jeremy Caney for your feedback. Its my updated code please check. – Moron