Flutter Web×Firebaseで困ったことリスト

Flutter Web, Firebaseを利用してWebアプリケーション開発をしている。
ちょっとでも困ったことを備忘録としてできるだけ残しておく。

$ flutter --version
Flutter 2.8.1 • channel stable

み

課題

AlertDialogのなかでColumnを使ったとき、ダイアログが無駄に大きくなってしまう

解決

mainAxisSizeを与える

Column(
  mainAxisSize: MainAxisSize.min,
  children: [],
),

み

課題

Snackbarに表示したテキストがデフォルトフォントのままになる

解決

MaterialAppのThemeDataでsnackBarThemeを指定する、もしくは利用する場面で都度都度fontFamily指定をする

MaterialApp(
  title: 'My App',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    textTheme: GoogleFonts.zenMaruGothicTextTheme(Theme.of(context).textTheme),
    snackBarTheme: SnackBarThemeData(
      contentTextStyle:GoogleFonts.zenMaruGothic(color: Colors.white),
    ),
  ),
),

み

課題

Flutter WebでTextウィジェットを使うと、その部分をコピペできない（通常のWebページの挙動と異なる）

解決

SelectableTextウィジェットを利用する。
ただし、長い文字列あふれを制御するTextOverflow.ellipsisオプションが効かないため注意。

み

課題

envファイルで指定したURL文字列がFirebase Hosting環境で読み込めない
※ローカルでは問題なく動作

解決

Firebase Hosting環境では.env系の環境変数設定は利用できない。

そもそも利用しない
必要な場合、--dart-defineをつかう
必要な場合、Cloud Functionsをつかう（process.env）

み

課題

showlicensepage()にて生成したライセンスページをスマホで参照するとヘッダのフォントがデフォルトフォントになる

解決

MaterialAppのThemeDataでAppBarTheme.textThemeを指定する。
なおAppBarTheme.textThemeはDeplicatedされてるのでtitleTextStyle, toolbarTextStyleの利用が推奨されている

main.dart

appBarTheme: AppBarTheme(
  textTheme: GoogleFonts.sampleTextTheme(),
),

み

課題

Firestoreのキャッシュオプションを渡しているのに毎回サーバーから取得されてしまう

解決

Flutter Webの場合はキャッシュ動作がデフォルトでオフになっているため明示的に有効化する必要がある。ただしタブを複数開くと動作がおかしくなる（画面描画できない）ため現時点では実質不可能？

main.dart

    await Firebase.initializeApp(options: FirebaseOptions);
    // enable firestore cache
    await FirebaseFirestore.instance.enablePersistence();

み

課題

ElevatedButtonの余白がスマホとPCで異なる

解決

ThemeData.materialTapTargetSizeによる挙動で、スマホではボタンの高さが48になる。MaterialTapTargetSize.shrinkWrapを設定することでこの挙動を回避できる。

main.dart

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap
  ),
  home: MyWidget(),
)