【Flutter】Flutter web で404ページを表示(URLのPathの#google_vignetteに対応する)

この記事で紹介すること

Flutter WebでGoogle AdsenseやrefererなどでURLのパスに想定外のパスが入力された場合デフォルトで表示されるエラーページを変更する方法

実際のデフォルトのエラーページがこのような感じです。

ちょっとイケてないですよね……。

構築後のエラーページの例

実際に構築した私のサービスでのエラーページはこのような感じになっています。

実装方法

go_routerパッケージを使用した方法

私の場合、ルーティングには、go_router パッケージを使用しているので以下のような書き方になります。

return GoRouter(
    navigatorKey: navigatorKey,
    debugLogDiagnostics: true,
    initialLocation: AppRoute.path,
    routes: $appRoutes,
    errorBuilder: (context, state) => const NotFoundPage(), //　ここを追加
  );

これで後はお好みのNotFoundPage Widgetを作成すれば、意図しないルーティングの場合、設定したページが表示されるようになります。

特にパッケージを使用しない場合での実装方法

特にパッケージを使用しない場合は、MaterialAppクラスの'onUnknownRoute'の引数を利用することで実装できます。

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/':
            return MaterialPageRoute(
              builder: (context) => HomePage(),
            );
        }
      },
      initialRoute: '/',
      // 以下のonUnknownRouteを追加
      onUnknownRoute: (RouteSettings settings) {
        return MaterialPageRoute(
          builder: (context) => const NotFoundPage(),
        );
      },
    );
  }
}

参考記事