【Flutter】カスタムフォントの導入方法
はじめに
デフォルトフォントの Roboto だと漢字が中華風になってしまいますので、好きなフォントを導入して見栄えを良くしましょう。ちなみに私のお気に入りは Murecho です。
| Roboto（デフォルト） | Murecho（カスタム） |
|---|---|
 |
 |
環境
Flutter 2.10.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 5464c5bac7 (13 hours ago) • 2022-04-18 09:55:37 -0700
Engine • revision 57d3bac3dd
Tools • Dart 2.16.2 • DevTools 2.9.2
手順
フォントをダウンロードする
一番手っ取り早いのが Google Fonts から好きなフォントをダウンロードしてくることです。他にもいろんなサイトから無料でダウンロードできます。フォントファイルの拡張子は .ttf や .otf が多いです。
今回は、Google Fonts から Murecho フォントをダウンロードしてきました。ダウンロードした zip ファイルを展開して次のように保存しておきます。
assets
└── fonts
└── Murecho
├── Murecho-VariableFont_wght.ttf
├── OFL.txt
├── README.txt
└── static
├── Murecho-Black.ttf
├── Murecho-Bold.ttf
├── Murecho-ExtraBold.ttf
├── Murecho-ExtraLight.ttf
├── Murecho-Light.ttf
├── Murecho-Medium.ttf
├── Murecho-Regular.ttf
├── Murecho-SemiBold.ttf
└── Murecho-Thin.ttf
pubspec.yaml を編集する
flutter セクションにフォント関連の宣言を追記します。インデントに注意して下さい。編集後は flutter pub get を忘れずに。
flutter:
+ fonts:
+ - family: Murecho
+ fonts:
+ - asset: assets/fonts/Murecho/static/Murecho-Thin.ttf
+ weight: 100
+ - asset: assets/fonts/Murecho/static/Murecho-ExtraLight.ttf
+ weight: 200
+ - asset: assets/fonts/Murecho/static/Murecho-Light.ttf
+ weight: 300
+ - asset: assets/fonts/Murecho/static/Murecho-Regular.ttf
+ weight: 400
+ - asset: assets/fonts/Murecho/static/Murecho-Medium.ttf
+ weight: 500
+ - asset: assets/fonts/Murecho/static/Murecho-SemiBold.ttf
+ weight: 600
+ - asset: assets/fonts/Murecho/static/Murecho-Bold.ttf
+ weight: 700
+ - asset: assets/fonts/Murecho/static/Murecho-ExtraBold.ttf
+ weight: 800
+ - asset: assets/fonts/Murecho/static/Murecho-Black.ttf
+ weight: 900
uses-material-design: true
アプリ全体にカスタムフォントを適用する
MaterialApp に与える ThemeData の fontFamily プロパティにカスタムフォント名（pubspec.yaml の family で指定したフォント名）を指定することでアプリ全体にカスタムフォントを適用することができます。お手軽ですね。
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
+ fontFamily: 'Murecho',
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
個別にカスタムフォントを適用する
例えば、Text に適用する場合は次のように style プロパティで指定ができます。
Text(
'テキスト',
+ style: TextStyle(
+ fontFamily: 'Murecho',
+ ),
);
カスタムフォント名を定数として扱いたい
カスタムフォント名（'Murecho'）は文字列なので typo の心配があります。できれば FontFamily.murecho みたいに定数として扱いたいですよね。そんなときは flutter_gen_runner を使いましょう。
flutter_gen_runner の使い方は下記のサイトに詳しく載っています。
検証アプリ
今回の検証をするために、動的にカスタムフォントを切り替えるアプリを作りました。Google Fonts で FontWeight が 5 種類以上あって人気の高いフォントを選びました。
コードはこちらで公開しています。参考にして下さい。
最後に
Flutter 大学という Flutter エンジニアに特化した学習コミュニティに所属しています。オンラインでわいわい議論したり、Flutter の最新情報をゲットしたりできます！こちらのページから参加すると 100 FUT (Flutter Univercity Token) がもらえます！ぜひ Flutter 界隈を盛り上げていきましょう！
Author And Source
この問題について(【Flutter】カスタムフォントの導入方法), 我々は、より多くの情報をここで見つけました https://zenn.dev/susatthi/articles/20220419-143426-flutter-custom-fonts著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol