在flutter web中直接使用url参数导航到一个网页

Posted 2023-02-23

【中文标题】在flutter web中直接使用url参数导航到一个网页

【英文标题】：Navigate to a webpage directly with url parameters in flutter web

【发布时间】：2020-06-20 07:41:31

【问题描述】：

我正在为带有 Flutter Web 的文章创建一个简单的 Web 应用程序，用户可以使用包含文章 ID 的参数的链接导航到特定文章，例如 webpage.com/articles/123。到目前为止，我已经阅读并尝试了很多东西但没有任何效果。我能够从 URL 中提取 Id。但是，当用户尝试在地址栏中执行此操作并且用户被重定向到主页时，不会显示任何页面。我怎样才能做到这一点。

【参考方案1】：

我试用了 flutter_modular 包，效果很好。

【讨论】：

您好，我也在使用 flutter_modular。但是，当我尝试直接访问 url 或重新加载页面时，它会重定向回我的初始路由。您是否需要做一些特别的事情才能直接导航到网址？

不，我按照页面上的正常文档进行操作。

@user1026498 您好，在使用 Navigator velocity_x 库完成 URl 导航后，我也遇到了同样的问题。你解决了你的问题吗？你也能帮帮我吗？提前致谢

【参考方案2】：

首先，您需要使用路由导航并在MaterialApp 类中定义它们。正确完成后，您的 Flutter 应用程序将直接启动特定的 ArticlesScreens - 然后您可以分享链接（例如 webpage.com/articles/123），将其粘贴到浏览器中，然后登陆您的应用程序的 ArticlesScreen，显示 id 为 123 的文章.

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      onGenerateRoute: (settings) 
        if (settings.name.contains("/articles/")) 
          //parse the URL and get the article ID here
          final String articleId = getArticleIdFromUrl(settings.name);

          return ArticleScreen(articleId: articleId);
        

        switch (settings.name) 
          case "/":
            return MainScreen();
          default:
            return MainScreen();
        
      ,
      initialRoute: "/",
    );
  

【参考方案3】：

你需要在你的 Material 应用中添加路由：

home: ProjectPage(),
routes: <String, WidgetBuilder>
      '/home': (BuildContext context) => HomePage(),
      '/login': (BuildContext context) => LoginPage(),
,

【讨论】：

您没有在答案中解决 url 参数

其实从那以后，我只使用Getx进行路由管理和导航，它处理URL参数非常好和容易。