Flutter Web 中的路由有意外行为

Posted 2023-02-23

【中文标题】Flutter Web 中的路由有意外行为

【英文标题】：Routes in flutter web have unexpected behavior

【发布时间】：2020-01-23 19:54:15

【问题描述】：

在 Flutter 中使用内置脚手架/应用栏时，当使用导航器推送新路由时，应用栏上仍会显示后退按钮，并且浏览器中的 url 保持不变。这意味着浏览器的后退按钮不起作用，这是一个非常奇怪的用户体验。有没有办法解决这个问题？

我已经尝试过多种方式推送路由（pushReplacement 去掉了后退按钮，但浏览器后退按钮仍然不起作用）

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('/');
        ,
      ),
    );
  

我希望路由会更改浏览器中的 url，使我们能够使用后退按钮和其他正常路由的功能，但实际结果是在浏览器中显示相同的路由并且必须使用自动 AppBar 后退按钮

【问题讨论】：

你找到解决办法了吗？

@user2892437 我见过的大多数地方都在制作自定义导航栏，而不是使用材质导航栏。至于在地址栏中更改路由，我知道这是可能的，因为我看到其他 Flutter 网站这样做了，但我自己还没有找到解决方案。

【参考方案1】：

现在看来，flutter 的更新解决了这个问题。现在使用导航器时会发生预期的行为。