🌐

Flutter Webでのフォント問題を解決する

2022/03/24に公開

アプリを実行すると、日本語の漢字が中国語のフォントになっている。
これを避けるためには、フォントを指定する必要がある。
（Localeを指定する方法もあるっぽいが、英語と日本語に対応したアプリにしたのでその方法は採らなかった）
assetsフォルダからフォントを読み込む方法もあるが、今回は簡単にgoogle_fontsパッケージを利用する方法を採用した。
https://pub.dev/packages/google_fonts

基本的な使い方

import文

import 'package:google_fonts/google_fonts.dart';

main.dartのMyAppにあるThemeDataにtextThemeを追加する。これにより、アプリ全体にこのフォントが反映される。
sawarabiGothicのところでフォント指定する。

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

使用できるフォント

使える日本語フォントについては以下参照。

sawarabiGothicが一番デフォルトに近かったのでこれにした。

モバイル端末では標準フォントを使う

Webでのみこのフォントを使い、モバイル端末では標準のフォントを使いたかったので、kIsWebを使って以下のようにした。

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

ダークモード対応

また、ダークモードを使用する際は、Theme.of(context).textThemeをThemeData(brightness: Brightness.dark).textThemeにすると、ダークモードに対応した文字色になってくれる。

adaptive_themeを使用した実装例

ダークモードと切り替えるためにadaptive_themeを使っている。
https://pub.dev/packages/adaptive_theme
以下のようにした。

//省略
@override
  Widget build(BuildContext context) {
    return AdaptiveTheme(
        light: ThemeData(
          brightness: Brightness.light,
          primarySwatch: Colors.indigo,
          visualDensity: VisualDensity.adaptivePlatformDensity,
          textTheme: kIsWeb
              ? GoogleFonts.sawarabiGothicTextTheme(
                  ThemeData(brightness: Brightness.light).textTheme,
                )
              : null,
        ),
        dark: ThemeData(
          brightness: Brightness.dark,
          primarySwatch: Colors.cyan,
          accentColor: Colors.cyan,
          visualDensity: VisualDensity.adaptivePlatformDensity,
          textTheme: kIsWeb
              ? GoogleFonts.sawarabiGothicTextTheme(
                  ThemeData(brightness: Brightness.dark).textTheme,
                )
              : null,
        ),
	//省略

他言語の表示

他言語の文字も、表示まで少し時間がかかるものもあるが表示される。

[追記]TabBar, TabViewでフォント指定

TabBar, TabViewでは、ThemeDataのとこで指定したフォントになっていなかったので、個別に指定した。

bottom: TabBar(
//省略
  labelStyle: TextStyle(
    fontFamily:
      kIsWeb ? GoogleFonts.sawarabiGothic().fontFamily : null),
//省略
),

TextStyle(
    fontFamily:
      kIsWeb ? GoogleFonts.sawarabiGothic().fontFamily : null),