deep-linking-for-flutter-web

Flutter Web 深度链接

本文将介绍如何为应用实现完善的 URL 导航，包括打开特定页面的链接、受保护的路由和自定义过渡效果。

简而言之 最终源代码见此处，在线演示。

设置

创建一个名为“flutter_deep_linking”的新 Flutter 项目。

在 VSCode 中打开该文件夹。

按以下内容更新“pubspec.yaml”：

步骤 1

创建文件“lib/ui/home/screen.dart”，并添加以下内容：

按以下内容更新“lib/main.dart”：

运行应用，你应该会看到以下内容：

步骤 2

现在，我们需要获取用户在地址栏中输入的 URL。

在此位置创建文件夹“lib/plugins/navigator”。

在文件夹内创建名为“web.dart”的文件，并添加以下内容：

在文件夹内创建名为“unsupported.dart”的文件，并添加以下内容：

在文件夹内创建名为“navigator.dart”的文件，并添加以下内容：

现在，回到“lib/main.dart”文件并添加导航器：

请务必按示例所示导入导航器，因为其中包含用于 Web 编译的条件导入。

现在运行应用，应该不会有任何变化。

步骤 3

现在来添加合适的路由。

创建新文件“lib/ui/router.dart”，并添加以下内容：

同时按以下内容更新“lib/main.dart”：

注意，我们移除了 MaterialApp 的“home”字段。这是因为所有操作都将由路由器处理。默认情况下，访问“/”时会返回主页。

步骤 4

现在添加多个屏幕来测试一下！添加以下文件夹和文件。

创建文件“lib/ui/account/screen.dart”，并添加以下内容：

创建文件“lib/ui/settings/screen.dart”，并添加以下内容：

创建文件“lib/ui/about/screen.dart”，并添加以下内容：

将以下内容添加到“lib/ui/router.dart”：

现在，导航到 /about、/account 和 /settings 时，就会进入对应的新页面！

步骤 5

现在，我们来接入浏览器的导航按钮！按以下内容更新“lib/ui/home/screen.dart”：

现在运行应用并点击设置图标，就会按预期打开新屏幕。但如果点击浏览器的后退按钮，就会返回主页！

步骤 6

这些 URL 很不错，但如果想传递 ID 之类的、事先未知的数据，该怎么办？别担心！

按以下内容更新“lib/ui/account/screen.dart”：

接下来，按以下内容更新“lib/ui/router.dart”：

现在运行应用并导航到“/account/40”，就会看到以下内容：

总结

动态路由非常适合 Flutter Web，只要知道该调整哪些地方就行！这个软件包使用了一个分支版本的 fluro，其中包含我添加的一些修复；不过 PR 合并后，你就可以直接使用常规版本的软件包了。欢迎在下方告诉我你的想法，以及你是否发现了更好的方法！

最终代码见：https://github.com/rodydavis/flutter_deep_linking