Flutter WebのhistoryモードのNavigationとRoutingをFirebase Hostingで行う方法

image

Flutter WebのhistoryモードのNavigationとRoutingをFirebase Hostingで行う方法を解説します。

Routingの種類

まず、Flutter WebはSPA(Single Page Application)なので、Routingにはhistoryモードとhashモードがあります。

hashモード

hashモードとはhash「#」の後にSPAで定義したRoutingがURLになる方式です。
例: http://localhost:3000/#/blog

historyモード

hashモードはSPAで定義したRoutingがそのままURLになる方式です。
例: http://localhost:3000/blog



SPAは/index.htmlを呼んで、そのページで全てが完結するので、何も考えないとRoutingはhashモードになる事が多いです。Flutter Webも同様です。

なぜデフォルトでhashモードになるかと言うと、静的Hostingサービスで/blogにアクセスした場合、/blogというファイルが存在していないため404判定を受けてしまうからです。
hashモードのURLの場合は、hashがある事によって、/#/blog/index.htmlを見に行っているので問題なく目的のページが表示されるわけです。
しかし、hashモードのURLはあまり見慣れないので、Flutter Webでもhistoryモードにする方法をみていきます。

vrouter

historyモード実現のために、vrouterというFlutter Pluginを使用します。
https://pub.dev/packages/vrouter

//blogというURLがあって、それ以外のURLにアクセスがあった場合は/にリダイレクトするという動きをするアプリのサンプルコードです。

  
  Widget build(BuildContext context) {
    return VRouter(
      debugShowCheckedModeBanner: false,
      mode: VRouterModes.history,
      routes: [
        VWidget(
          path: '/',
          widget: IndexPage(),
          buildTransition: (animation, _, child) {
            return FadeTransition(opacity: animation, child: child);
          },
        ),
        VWidget(
          path: '/blog',
          widget: BlogPage(),
          buildTransition: (animation, _, child) {
            return FadeTransition(opacity: animation, child: child);
          },
        ),
        VRouteRedirector(
          redirectTo: '/',
          path: r'*',
        ),
      ],
    );
  }

vrouterでは、VRouter()MaterialApp()の代わりに使うので、MaterialApp()は不要になります。
modeVRouterModes.historyに設定し、サンプルコードの通りにroutes実装するとRouting設定は完了です。

以下のコードで/から/blogに遷移できます。

context.vRouter.push('/blog');

動作確認

ChromeをターゲットにDebug Runしてみます。

デモ

無事historyモードでURLが表示されました!

ちなみに、ここでlocalhost:54025/blogのページをリロードしても、問題なくブログページは表示されます。

Firebase Hosting

Firebase Hostingにこのアプリをデプロイしてみます。

Firebaseでプロジェクトを作成し、Flutterアプリのディレクトリ内でfirebase initし、Firebase Hostingにデプロイできるようにします。

flutter build web --web-renderer html
firebase deploy

でFirebase Hostingにデプロイします。

動作確認

デプロイ先のリンクを見てみます。

デモ

いい感じに動作しています。

リロードする

/blogのページをリロードしてみます。すると、、、

デモ

404になってしまいました...これは最初に説明したように、/blogというファイルが存在していないからですね。

Firebase Hostingの設定を変更する

firebase.jsonの設定で、アクセスされたURLをrewriteする事ができるので、全てのURLアクセスを/index.htmlを見るように変更させます。

{
  "hosting": {
    ...
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

リロードを再度試す

再度Build&Deployして、リロードを試してみます。

デモ

/blogでリロードし、無事blogのページが表示されました🎉🎉🎉

さいごに

これで、Flutter Webでも通常のWebページと同じようなURLでRoutingできるようになりました。
vrouterはusers/:idのようなdynamicなURLにも対応しているので、Flutter WebでWebサービスを開発するという選択も現実的になってきたのではないでしょうか。
Hostingを使ってSPAをデプロイしている以上、ogpの問題はありますが、そこまでogpが重要なサービスも少ないでしょう、という事でそこは目を瞑って...

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (100)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (4)新卒 (4)就活 (4)デザイン (4)Dart (4)JavaScript (4)FlutterWeb (3)vscode (3)Prisma (3)NestJS (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)Image (2)File (2)画像 (2)Figma (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)flutter (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)CustomClipper (1)ClipPath (1)Material Design (1)カスタム認証 (1)figma (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More