🌊

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

2022/12/16に公開

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",といったように、上記3の部分でつけた名前を指定している(flutter:/fonts:/family: KleeOneの部分)
main.dart
class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

成功しました。終了

GitHubで編集を提案

Discussion

ログインするとコメントできます