虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

Flutterでフォントを設定する

f:id:superman199323:20180929003432p:plain

iOS12にしてからFlutterから生成するフォントがダサかったのでTrueTypeでフォントを設定する方法について書いていきます。

フォントの設定はすごく簡単

すごく簡単です。

pubspec.ymlを編集

画像を読み込ませるのと同様の手順です。

まずは、適当な場所にTrueType(拡張子が.ttd)であるファイルを置きます。 自分は font/ の下に配置しました。

f:id:superman199323:20180929002702p:plain

配置したら pubspec.yml を編集します。

fonts:
    - family: HigashiOme
      fonts:
        - asset: font/HigashiOme-Gothic.ttf

HigashiOme-Gothic.ttf の部分は設定したファイル名を指定します。

設定できたら flutter packages get をして成功したら完了です。

MaterialAppのオプションに設定する

次に画面に設定していきます。

ThemeData の下に fontFamily という設定があるのでそこに pubspec.yml で設定した family の文字列を設定します。

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'GroupSnap',
      theme: new ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.white,
        accentColor: Colors.red,
        fontFamily: "HigashiOme" // ←これを設定する
      ),
      routes: <String, WidgetBuilder> {
        '/': (_) => new Splash(),
      },
    );
  }
}

これでビルドすれば完了です。

参考

flutter.io