Flutterでフォントを動的に読み込む
Flutterは標準でカスタムフォントに対応しています。
一般的な使い方は公式サイトの Use a custom font にある通り、
- カスタムフォントのファイルをassetとしてアプリに内包する
- pubspec.yaml にカスタムフォントの定義を追加する
- ソースコード内で
fontFamilyにカスタムフォント名を設定する
という感じ。アプリにフォントファイルを組み込んでしまうやり方ですね。
手軽ですが、フォントファイルを内包するのでアプリのバイナリサイズが大きくなってしまいます。特に日本語フォントはファイルサイズ大きめなので、できれば内包したくありません。
じゃあ動的読み込みだよね、ということで探してみたらやり方発見。
FontLoader を使えばいいんですね。フォント名とフォントデータを与えてロードする仕組みになっています。
ファイルから読み込む場合はこんな感じ。
/// フォントを動的にロードする
void loadFontDinamically() async {
String fontName = 'フォント名';
Future<ByteData> fontData = _loadFont();
FontLoader fontLoader = FontLoader(fontName);
fontLoader.addFont(fontData);
await fontLoader.load();
// これでカスタムフォントとして fontName が使えるようになるので
// あとは通常のカスタムフォントと同様の使い方をすればOK
}
/// フォントデータをファイルから読み込む
Future<ByteData> _loadFont(File file) async {
Uint8List bytes = Uint8List.fromList(file.readAsBytesSync());
return Future.value(ByteData.view(bytes.buffer));
}
同期／非同期の使い分けがぐちゃぐちゃだな… いい感じに読み替えてください。
実際にアプリに組み込む場合は
- インターネット上からフォントをダウンロード
- キャッシュ領域かどこかにファイルとして保存
- ファイルからフォントデータを読み込む
みたいな作りにするのがいいんじゃないでしょうか。
関連(するかもしれない)記事
おススメ