Flutterの中華フォントを直す

はじめに

Flutterを使い始めて3日くらいですが、初期アプリを少しだけいじって日本語を表示しようとすると、まさかの中華フォント・・・

「直感的に気付く、認証する」という単語はこんな感じで表示されてしまいます。

Flutterをそのままの環境で使うと中華フォントになってしまうようなので、日本語フォントへ変更しましょう。

設定方法

色々と日本語フォントへ直す方法を探して、２つの方法があるようです。

方法1:flutter_localizationsを追加

Flutterプロジェクト下にできるpubspec.yamlを以下のように修正します。

dependencies:
  flutter:
    sdk: flutter
  # -----中華フォント対応-----
  flutter_localizations: 
    sdk: flutter
  # -----ここまで-----

そのあと、コンソールにてflutter pub getしてプラグインやライブラリを更新します。
次にmain.dartを以下のように修正します。

import 'package:flutter_localizations/flutter_localizations.dart'; // import追加

// 省略

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // -----以下を追加-----
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale("ja", "JP"),
      ],
      // -----ここまで-----
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

ただし、この方法では自分はうまくいかなかったので、次の方法を実施しました。

※こちらの記事をベースに修正しました。
https://qiita.com/najeira/items/dbf5663d1ed845fb1f51

方法2:日本語フォントを埋め込む

まず、Flutterプロジェクトの下にfontsというディレクトリを作ります。

次に使用する日本語フォントをfontsに配置します。
私はGoogle FontsからNoto Sans JPをダウンロードしました。
https://fonts.google.com/specimen/Noto+Sans+JP?query=noto#standard-styles

次にpubspec.yamlを以下のように編集します。

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # -----中華フォント対策の追加-----
  fonts:
    - family: Noto Sans JP
      fonts:
        - asset: fonts/NotoSansJP-Regular.otf
  # ----- ここまで -----

次にmain.dartのtheme部分にフォント設定を追加すればOKです。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: "Noto Sans JP", // ここを追加
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

無事に日本語フォントになりました。

おまけ

色々やってうまくいかない人は、VSCode再起動、flutter upgradeをやるとうまくいくかもしれません。