简体   繁体   English

如何在浏览器中为Flutter Web App配置go后退按钮

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

I'm not asking about webview. This is about Flutter web app.我不是在问 webview。这是关于 Flutter web 应用程序。 I need to go back to a specific page when user press back button which is inbuilt in browser.当用户按下浏览器内置的后退按钮时,我需要 go 返回特定页面。

在此处输入图像描述

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)

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()
              ],
            ),
          ),
        ),
      ),
    );
  }

onWillPop Navigate to a new Page onWillPop导航到新页面

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"),
        ),
      ),
    );
  }
}
onWillPop: () {
  Navigator.pop(context);
  return new Future(() => true);
}

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:如果您希望从 Flutter web 应用程序中的推送路由中模拟浏览器后退按钮,我已经通过使用 Router.neglect 实现了这一点:

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

For disable this chrome back button you can use要禁用此 chrome 后退按钮,您可以使用

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

and for hand back press for back page you can use willPop:对于后页的手背压,您可以使用 willPop:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 Flutter Web 中处理浏览器的后退按钮 - How to handle back button of browser in Flutter Web 如何在flutter web中使用Go路由器在浏览器后退按钮或onReload页面上显示警告对话框? - How to display alert dialog box on back button of browser or onReload the page using Go Router in flutter web? 使用浏览器后退按钮的 go_router 额外是 null flutter web - go_router using browser back button extra is null flutter web Flutter、Web、导航2.0浏览器返回键 - Flutter, Web, navigation 2.0 browser back button 如何在颤抖中从Web视图返回? - How to go back from web view in flutter? 如何防止通过浏览器后退按钮返回 Flutter Web 上的上一页? - How to prevent going back to previous page on Flutter Web via browser back button? 浏览器和应用程序栏中的后退按钮在 Flutter web 开发中不起作用 - Back button in browser and app bar won't work in Flutter web development Flutter Web:如何使用 auto_route 插件禁用“点击 go 后退按钮”? - Flutter Web: How do i disable "click to go back Button" using auto_route plugin? Flutter:推回按钮应该允许应用程序进入后台 - Flutter: Pushing back button should allow the app to go to background 如何在“Flutter Web App”上全屏显示 - How to go full screen on a 'Flutter Web App'
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM