Flutter Web+Firebaseでのポイント

久しぶりにFlutter Webを触った際に、ハマったポイントをメモしておきます。

まずはfirebase.jsonの設定です。

{
  "hosting": {
    "public": "build/web",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

ここで、rewritesの設定が重要で、これがないとリロード時に404エラーが発生します。
宣言的なルーティングを行っている場合、この設定が必要です。
私はgo_routerを使っていて、webアプリと同じ挙動をさせたかったので、この設定が必要でした。
これがないと、例えば/homeにアクセスした際に、/homeというファイルが存在しないため、404エラーが発生します。
rewritesの設定により、パスはそのままで、index.htmlを表示するようになります。

次に、Fontの設定です。
Flutterのデフォルトでは英文フォントが設定されているため、日本語を混ぜて使うと、範囲選択時などで不揃いになります。
基本的にはgoogle_fontsを使えば問題ありませんが、豆腐が気になる場合はassetsにフォントファイルを追加して、pubspec.yamlに設定することで解決します。