如何为Flutter Web应用配置浏览器的返回按钮

Question

12 浏览2023年4月4日

匿名的 2023年4月4日

0 Comments

我不是在问有关WebView的问题。这是关于Flutter Web应用程序的问题。当用户按下浏览器内置的返回按钮时，我需要返回到特定的页面。\n $\"enter$ \n有什么猜测吗？\n当我按下返回按钮时，我得到了以下错误：\nError: Assertion failed: org-dartlang- \n sdk:///flutter_web_sdk/lib/_engine/engine/history.dart:110:14 \n _userProvidedRouteName != null\n is not true\n at Object.throw_ [as throw] (http://localhost:8300/dart_sdk.js:4770:11)\n at Object.assertFailed (http://localhost:8300/dart_sdk.js:4721:15)\n

0

3 答案

匿名的 · Answer 1 · 2023-04-13T08:39:40+00:00

在Flutter Web应用中，配置浏览器的返回按钮是一个常见的需求。下面是一个示例代码，展示了如何在Flutter Web应用中配置浏览器的返回按钮：

import 'package:flutter/material.dart';


class WebScope extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => NewPageWidget(),
          ),
        );
        return true;
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text("WebScope"),
        ),
      ),
    );
  }
}
class NewPageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("New Page"),
      ),
      body: Center(
        child: Text("This is a new page."),
      ),
    );
  }
}

在这个示例代码中，我们使用了`WillPopScope`组件来监听返回按钮的点击事件。当返回按钮被点击时，`onWillPop`回调函数会被触发。在回调函数中，我们使用`Navigator.push`方法来导航到一个新的页面（`NewPageWidget`）。同时，我们需要在`onWillPop`回调函数的最后返回`true`，表示我们已经处理了返回按钮的点击事件。

通过这样的配置，当用户在浏览器中点击返回按钮时，会自动导航到新的页面（`NewPageWidget`）。

以上就是如何在Flutter Web应用中配置浏览器的返回按钮的方法。通过使用`WillPopScope`组件和`Navigator.push`方法，我们可以实现这个功能。希望对你有所帮助！

匿名的 · Answer 2 · 2023-08-15T07:37:04+00:00

问题：如何在Flutter Web应用中配置浏览器的返回按钮？

原因：在Flutter Web应用中，浏览器的返回按钮默认不会触发Flutter的导航栈的返回操作。因此，需要手动配置浏览器的返回按钮，使其能够触发Flutter的导航栈的返回操作。

解决方法：

1. 使用Flutter的WillPopScope组件来处理导航栈的返回操作。

2. 在需要处理返回操作的页面的build方法中添加WillPopScope组件，并设置onWillPop回调函数。

3. 在回调函数中调用Navigator.pop方法来执行导航栈的返回操作，并返回一个Future对象，表示是否允许返回。

4. 在返回操作完成后，返回一个Future.value(true)来表示允许返回。

代码示例：

onWillPop: () {


  Navigator.pop(context);
  return Future.value(true);
}

通过以上配置，可以使浏览器的返回按钮触发Flutter的导航栈的返回操作。

匿名的 · Answer 3 · 2023-08-28T05:35:15+00:00

问题的原因是在Flutter Web应用程序中配置浏览器的返回按钮时，无法实现预期的效果。以下是一个示例的代码片段，用于在不导航到新页面的情况下构建Flutter Web应用程序的界面。但是，该代码似乎在某些情况下无法正常工作，包括Rony、Umut和提问者自己。

要解决这个问题，我们可以尝试使用WillPopScope小部件来处理返回按钮的行为。WillPopScope小部件是一个用于包装窗口小部件的小部件，它可以在用户点击返回按钮时执行自定义的操作。

首先，在构建方法中使用WillPopScope小部件包装Scaffold小部件。然后，我们将onWillPop属性设置为一个异步函数，该函数返回true。这将告诉WillPopScope小部件在用户点击返回按钮时返回true，从而允许执行自定义操作。

以下是修改后的代码示例：


  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: [
                registerForm(),
                registerBtn(),
                SizedBox(height: 30,),
                _buildSignInButton()
              ],
            ),
          ),
        ),
      ),
    );
  }

通过这种方式，我们可以在Flutter Web应用程序中配置浏览器的返回按钮，以执行自定义操作而不是导航到新页面。希望这个解决方法对于Rony、Umut和其他遇到相同问题的人们也有帮助。