deep-linking-for-flutter-web
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseDeep Linking for Flutter Web
Flutter Web 深度链接
In this article I will show you how to have proper URL navigation for your application. Open links to specific pages, protected routes and custom transitions.
Setup
环境搭建
Create a new flutter project called “flutter_deep_linking”
Open that folder up in VSCode.
Update your “pubspec.yaml” with the following:
创建一个名为“flutter_deep_linking”的新Flutter项目
在VSCode中打开该文件夹。
更新你的“pubspec.yaml”文件，添加以下内容：
Step 1
步骤1
Create a file at “lib/ui/home/screen.dart” and add the following:
Update your “lib/main.dart” with the following:
Run your application and you should see the following:
在“lib/ui/home/screen.dart”路径下创建文件，并添加以下内容：
更新你的“lib/main.dart”文件，添加以下内容：
运行应用，你应该会看到以下界面：
Step 2
步骤2
Now we need to grab the url the user enters into the address bar.
Create a folder at this location “lib/plugins/navigator”
Create a file inside named: “web.dart” with the following:
Create a file inside named: “unsupported.dart” with the following:
Create a file inside named: “navigator.dart” with the following:
Now go back to your “lib/main.dart” file and add the navigator:
It’s important to import the navigator as shown as this will have the conditional import for web compiling.
If you run the app now nothing should change.
现在我们需要获取用户在地址栏中输入的URL。
创建“lib/plugins/navigator”文件夹
在该文件夹下创建名为“web.dart”的文件，添加以下内容：
创建名为“unsupported.dart”的文件，添加以下内容：
创建名为“navigator.dart”的文件，添加以下内容：
现在回到“lib/main.dart”文件，添加导航器：
请注意导入导航器的方式，这将为Web编译提供条件导入支持。
现在运行应用，界面应该不会有变化。
Step 3
步骤3
Now let’s add the proper routing.
Create a new file “lib/ui/router.dart” and add the following:
Also update “lib/main.dart” with the following:
Notice how we removed the “home” field for MaterialApp. This is because the router will handle everything. By default we will go home on “/”
现在让我们添加合适的路由配置。
创建新文件“lib/ui/router.dart”，添加以下内容：
同时更新“lib/main.dart”文件，添加以下内容：
注意我们移除了MaterialApp的“home”属性，因为路由将处理所有页面导航。默认情况下，访问“/”路径会跳转到首页。
Step 4
步骤4
Now let’s add multiple screens to put this to the test! Add the following folders and files.
Create a file “lib/ui/account/screen.dart” and add the following:
Create a file “lib/ui/settings/screen.dart” and add the following:
Create a file “lib/ui/about/screen.dart” and add the following:
Add the following to “lib/ui/router.dart”:
Now when you navigate to /about, /account and /settings you will go to the new pages!
现在让我们添加多个页面来进行测试！创建以下文件夹和文件。
创建文件“lib/ui/account/screen.dart”，添加以下内容：
创建文件“lib/ui/settings/screen.dart”，添加以下内容：
创建文件“lib/ui/about/screen.dart”，添加以下内容：
在“lib/ui/router.dart”中添加以下内容：
现在当你访问/about、/account和/settings路径时，会跳转到对应的新页面！
Step 5
步骤5
Now let’s tie into the browser navigation buttons! Update “lib/ui/home/screen.dart” with the following:
Now when you run the application and click on the settings icon it will launch the new screen as expected. But if you click your browsers back button it will go back to the home screen!
现在让我们对接浏览器的导航按钮！更新“lib/ui/home/screen.dart”文件，添加以下内容：
现在运行应用，点击设置图标会跳转到新页面，符合预期。而当你点击浏览器的返回按钮时，会回到首页！
Step 6
步骤6
These urls are great but what if you want to pass data such as an ID that is not known ahead of time? No worries!
Update “lib/ui/account/screen.dart” with the following:
Let’s update our “lib/ui/router.dart” with the following:
Now when you run your application and navigate to “/account/40” you will see the following:
这些URL功能很棒，但如果你想传递未知的动态数据（比如ID）该怎么办？别担心！
更新“lib/ui/account/screen.dart”文件，添加以下内容：
更新“lib/ui/router.dart”文件，添加以下内容：
现在运行应用并访问“/account/40”路径，你会看到以下界面：
Conclusion
总结
Dynamic routes work great for Flutter web, you just need to know what to tweak! This package uses a forked version of fluro for some fixes I added but once the PRs is merged you can just use the regular package. Let me know what you think below and if there is a better way I am not seeing!
Here is the final code: https://github.com/rodydavis/flutter_deep_linking
动态路由在Flutter Web中表现出色，你只需要知道如何调整即可！本项目使用了我修改过的fluro分支版本来修复一些问题，一旦PR合并，你就可以使用官方原版包了。欢迎在下方留言告诉我你的想法，以及是否有我没考虑到的更好实现方式！