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
以上!!