【Flutter】フォントの設定方法について

Flutterでフォントを設定する基本的な手順

1. フォントをダウンロード
2. アプリの「プロジェクトルート」に「fonts」などといったディレクトリを作成
3. 「プロジェクトルート」のpubspec.yamlファイルにfonts:以下を追加
4. fontFamilyプロパティに追加

1.フォントをダウンロード

• 使いたいフォントをGoogle fontなどでインストールしてくる

2. アプリの「プロジェクトルート」に「fonts」などといったディレクトリを作成

• その中にダウンロードして解凍したファイルを設置(ここでは「Klee_One」)
  

3. 「プロジェクトルート」のpubspec.yamlファイルにfonts:以下を追加

pubspec.yaml

flutter: //「flutter：」以下に「fonts:」以下を追加
  fonts: //ここから追加
    - family: KleeOne //名前をつけてあげる
      fonts:
        - asset: fonts/Klee_One/KleeOne-Regular.ttf 
        //fontsのassets:に.ttfファイルを追加

flutter/fonts:以下の注意としては

• family:アプリ内で使うこのフォントの名前を命名
• fonts:フォントの情報が入ったファイルのパスを指定(assets:部分)
• assets:の部分にはfonts/Klee_One/KleeOne-Regular.ttfというようにttfファイルを置く。

4. fontFamilyプロパティに追加

• fontFamily: "KleeOne",といったように、上記３の部分でつけた名前を指定している(flutter:/fonts:/family: KleeOneの部分)

main.dart

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        fontFamily: "KleeOne",//Textの字体や大きさ
        appBarTheme: const AppBarTheme(
            titleTextStyle: AppTextStyles.appBarTitle,
            backgroundColor: AppColors.mainWhite),
      ),
      title: 'サンプルapp',
      home: MainPage(),
    );
  }
}

成功しました。終了