くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

FlutterでカスタムフォントをTextウィジェットとThemeで利用する

Flutterでカスタムフォントを利用したいなと思ったので、その時調べた備忘録。

フォントファイルを配置するフォルダの作成

まずは、ディレクトリを作成する。

$ mkdir -p assets/fonts/

assets/fonts/に表示したいフォントファイルを配置しておく。

pubspec.yamlの設定

# ./pubspec.yaml

# ...略
flutter:
  # 利用するフォントを設定する
  fonts:
    - family: Hannari # フォントの名前(任意)
      fonts:
        # フォントファイルのパス
        - asset: assets/fonts/Hannari.otf

flutter packages getで変更を反映しておく

カスタムフォントを利用したTextウィジェット

あとはTextStyleを使えばOK

 Text(
  "はんなり明朝",
  style: TextStyle(
    fontFamily: "Hannari",
  ),
),

themeでカスタムフォントを使う

themeで使う場合は、以下のような感じ。
デフォルトのテーマを拡張したい場合は、
ThemeData.light().textTheme.apply()を使う必要がある。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: app_name,
      theme: new ThemeData.light().copyWith(
        textTheme: ThemeData.light().textTheme.apply(fontFamily: "Hannari"),
      ),
      home: MainPage(),
    );
  }
}

ちょっとわかりずらく、以下のissueをみたら解決した(´ω`)
Can't change fontFamily when using ThemeData light/dark constructors · Issue #41276 · flutter/flutter

以上!!

参考にしたサイト様