FlutterでWebサイトを作るときに注意すること

はじめに

久しぶりすぎてFlutterでWebサイトをiOS/Androidアプリと一緒に作るときの注意点を洗い出ししてみました。ChatGPTに聞いてみました。
自分用のメモです。

更新履歴

2025.4.22 初回投稿

ローカルやサーバで画面が真っ白になる問題

1. MAMPで試してみる
   URLが

   http://localhost:8888/sample_project/
   

であれば、以下のようにビルドします

flutter build web --base-href /sample_project/

2.　MAMPの htdocs に配置
ビルドされた /build/web フォルダの中身を、次のようにコピーします

/Applications/MAMP/htdocs/sample_project/

中に index.html, main.dart.js, assets/ フォルダなどがある状態になります。

3.　ブラウザでアクセス

http://localhost:8888/sample_project/

• サーバでも一緒です

URL内に#が付いてしまう

Flutter Webを使ってると、**URLに # が勝手に入る問題（例：https://example.com/#/home）に悩まされることありますよね。これは Flutter のデフォルトが「Hash URLルーティング」**になっているからです。

手順

1.url_strategy パッケージを追加

flutter pub add url_strategy

もしくは pubspec.yaml に直接追加

dependencies:
  url_strategy: ^0.3.0

2.main.dart に以下を追加

import 'package:flutter/material.dart';
import 'package:url_strategy/url_strategy.dart'; // ← 追加

void main() {
  setPathUrlStrategy(); // ← 追加
  runApp(MyApp());
}

これで # が消えます！
3.ビルドしてデプロイ

flutter build web

アップロードすれば、もう #/ のないキレイなURLで動きます

日本語の漢字が中国語のフォントになってしまう

Flutter Web はデフォルトで「Roboto」などを使いますが、
日本語を表示しようとしたときに指定フォントがなければ、システムのフォールバックフォントになります。

特に Web だと 中華系の「Noto Sans SC（Simplified Chinese）」などが使われてしまうことがあるとのこと。

1. google_fontsパッケージを追加

   flutter pub add google_fonts
   

   または

   dependencies:
     google_fonts: ^6.2.1
   

2. main.dartに以下を追加

   import 'package:google_fonts/google_fonts.dart';
   

3. MaterialAppのthemeに以下を入れる

   MaterialApp(
     theme: ThemeData(
       textTheme: GoogleFonts.sawarabiGothicTextTheme(
         Theme.of(context).textTheme
       ),
     ),
   );
   

4. ビルドしてデプロイ

   flutter build web
   

参考サイト