import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'タイトル',
      theme: new ThemeData(
        fontFamily: 'Hiragino Kaku Gothic ProN',
      ),
    );
  }
}

ThemeData の fontFamily にフォントの名前を指定します。

github.com

Flutter で使えるフォントであればこれで反映できます。Google Font にそれぞれ載っています。

fonts.google.com

カスタムフォントをダウンロードして使う方法

それでは Google Font に載っていないカスタムフォントを使う方法についてです。こちらは Flutter 公式ドキュメントにも実装の仕方が紹介されています。

flutter.dev

ということでこの通りにやっていきましょう。今回は「Arial」というフォントを使いたいのでダウンロードページからフォントをDLします。

jp.ffonts.net

ダウンロードして zip を解答すると拡張子が ttf のファイルが見つかります。これがフォントのファイルになります。

Flutter プロジェクトのルートに fonts パッケージを作成します。

f:id:qed805:20200517173958p:plain:w300 — fontsディレクトリー

この fonts ディレクトリにダウンロードしたフォントをインポートします。

f:id:qed805:20200517174054p:plain:w300 — フォントをインポート

次に pubspec.yaml ファイルを編集します。

  # example:
  fonts:
     - family: Arial
       fonts:
         - asset: fonts/Arial.ttf

このように変更しました。このあとに update してプロジェクトファイル全体に反映させます。

実際に使う際は - family で指定した文字列を使うのが正しいのかなと思います。

あとは main.dart などで ThemeData に設定すれば全体に反映されます。

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: new ThemeData(
        fontFamily: 'Arial',
      ),
    );
  }
}