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が重要なサービスも少ないでしょう、という事でそこは目を瞑って...

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

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

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

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

Read More

タグ

Flutter (70)初心者向け (22)イベント (15)Nextjs (8)Google Apps Script (7)可茂IT塾 (6)Firebase (6)React (5)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)JavaScript (3)TypeScript (3)インターン (3)FlutterWeb (2)画像 (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)設計 (1)フルリモート (1)学生向け (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)線型計画法 (1)事例 (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)Freezed (1)アイコン (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Figma (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

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

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

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

Read More