[英]how to setup 404 Not found page in Flutter using Firebase Hosting
I am trying to show a custom 404 not found page in my website with Flutter.我正在尝试在我的网站中显示自定义 404 未找到页面,页面编号为 Flutter。
I am using the following code:我正在使用以下代码:
MaterialApp(
debugShowCheckedModeBanner: false,
initialRoute: "/",
routes: {
"/": (context) => Scaffold(),
"/test": (context) => TestPage()
},
onUnknownRoute: (settings) {
return MaterialPageRoute(builder: (_) => Scaffold(
body: Center(
child: Text("Page not found !"),
),
));
},
i have rebuild my app and deploy it with Firebase Hosting.我已经重建我的应用程序并使用 Firebase 托管进行部署。 However i am seeing this if i enter a wrong url:
但是,如果我输入错误的 url,我会看到这个:
Since i am using flutter, i don't really want to add an.html file as it is said, even if it works.因为我使用的是 flutter,所以我真的不想添加 an.html 文件,即使它可以工作。
I would rather display a custom page built in dart.我宁愿显示一个内置于 dart 的自定义页面。
How can i display my custom "Page not found" in such case?在这种情况下如何显示我的自定义“找不到页面”?
EDIT :编辑:
Here is my current firebase.json
file:这是我当前的
firebase.json
文件:
{
"hosting": {
"cleanUrls": true,
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
What i have tried and what didn't work:我尝试了什么,什么没用:
In the end:到底:
The only thing that is working is:唯一有效的是:
firebase.json
firebase.json
中的重写However this is not what i want, i would like to display my not_found_page.dart instead.然而,这不是我想要的,我想改为显示我的 not_found_page.dart。
This might be a Flutter issue, i keep this open in the meantime but i will dig deeper on the Flutter side.这可能是一个 Flutter 问题,我在此期间保持开放状态,但我将在 Flutter 方面进行更深入的研究。
The problem was indeed on the Flutter side.问题确实出在Flutter这边。 I was using "/" as
initialRoute
and "/" as another route which was creating conflicts apparently and was actually useless in my code as the first page returned is defined under the MaterialApp
's child
.我将“/”用作
initialRoute
,将“/”用作另一条路线,这显然会造成冲突,但实际上在我的代码中毫无用处,因为返回的第一页是在MaterialApp
的child
页面下定义的。
Flutter was redirecting my routes to "/"
instead of calling onUnknownRoute
and there was a conflict with the rewrites in firebase.json Flutter 将我的路由重定向到
"/"
而不是调用onUnknownRoute
,并且与 firebase.json 中的重写发生冲突
So i have removed the "/": (context) => Scaffold(),
from the routes
map. I have also removed rewrites
in firebase.json
in order for this to work.所以我从
routes
map 中删除了"/": (context) => Scaffold(),
我还删除了firebase.json
中的rewrites
,以使其工作。
I have also set back the URL
strategy, all the steps above were not working with the PATH
strategy.我还设置了
URL
策略,上面的所有步骤都不适用于PATH
策略。
EDIT : i have figured out that the PATH
strategy can work only if there is no home
property on the MaterialApp
widget.编辑:我发现
PATH
策略只有在MaterialApp
小部件上没有home
属性时才能工作。
If so, all of the wrong routes will be redirected to the home
and not call the onUnknownRoute
如果是这样,所有错误的路线将被重定向
home
,而不是调用onUnknownRoute
- For the / route, the home property, if non-null, is used.
对于 / 路由,使用 home 属性(如果非空)。
- Otherwise, the routes table is used, if it has an entry for the route.
否则,如果路由表有路由条目,则使用路由表。
- Otherwise, onGenerateRoute is called, if provided.
否则,如果提供,则调用 onGenerateRoute。 It should return a non-null value for any valid route not handled by home and routes.
对于未由 home 和 routes 处理的任何有效路由,它应该返回一个非空值。
- Finally if all else fails onUnknownRoute is called.
最后,如果所有其他方法都失败,则调用 onUnknownRoute。
PS: There is no need to implement 404.html
file PS:不需要执行
404.html
文件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.