flutter

flutterでCustomFontをThemeに設定する

Introduce

今回はCustomFontをThemeに設定していきます。
GoogleFontのパッケージもありますが、アプリのサイズが大きくなるので、必要なフォントのttfだけ読み込ますようにしたいと思います。

Environment

  • MacOS Catalina 10.15.1
  • flutter --version
    Flutter 1.15.4-pre.240 • channel master • https://github.com/flutter/flutter.git
    Framework • revision 32b17974ea (28 hours ago) • 2020-02-29 06:41:00 -0500
    Engine • revision 755e2b559d
    Tools • Dart 2.8.0 (build 2.8.0-dev.10.0 09bbd3cca5)
  • Visual Studio Code

Usage

使いたいフォントのttfファイルをプロジェクトディレクトリ/assets/fontsディレクトリ配下にコピーします。

pubspec.ymlファイルに追記します。

:pubspec.yml
flutter:
uses-material-design: true
fonts:
- family: RobotoSlab
fonts:
- asset: assets/fonts/RobotoSlab-Bold.ttf
- asset: assets/fonts/RobotoSlab-Regular.ttf

<pre><code><br />前回のコードを引き続き使用します。
MaterialApp WidgetのthemeにfontFamilyをセットします。

</code></pre>

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Colors.lightBlue[700],
fontFamily: 'RobotoSlab',
),
home: MyHomePage(title: 'Aspace'),
);
}
}

これでTextStyleでいちいち指定しなくても、デフォルトのフォントがRobotoSlabにすることができます。

-flutter
-,

Translate »