flutterアプリにフォントファミリーを設定する
assets/fonts
のようにassetsパスを作成して、その中にフォントフォルダを作って管理するようにする。
まず、
https://fonts.google.com/specimen/Open+Sans
こういうサイトからフォントファミリーをDLしてくる
フォントファイルをassets/fonts以下に置いて、（なかったら作る）pubspec.yaml ファイルの中に
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
のような箇所があるので、ここで設定する。
下記のように複数のフォントを記述することができる。
また、フォントのウェイトを記述して管理する。
fonts:
- family: OpenSans
fonts:
- asset: assets/fonts/OpenSans-Regular.ttf
- asset: assets/fonts/OpenSans-Bold.ttf
style: italic
weight: 700 # assets/fonts/OpenSans-Bold.ttfのウェイトを指定
- family: Quicksand
fonts:
- asset: assets/fonts/Quicksand-Regular.ttf
- asset: assets/fonts/Quicksand-Bold.ttf
weight: 700
pubspec.yamlで設定した後はアプリ側で使うように設定する。
以下のようにfontFamilyで指定する。
return MaterialApp(
title: 'Flutter App',
theme: ThemeData(
primarySwatch: Colors.purple,
accentColor: Colors.amber,
fontFamily: 'GenSenRounded',
),
個別にフォントを設定する
また、個別に指定したい場合は、Text Widgetの中に引数として渡すことで個別にスタイルを変更可能。
appBar: AppBar(
title: Text('Personal Expense', style: TextStyle(fontFamily: 'OpenSans'),),
actions: <Widget>[
IconButton(
個別に設定するのが面倒なのでまとめて設定する
以下のように、appBarTheme内にtextThemeのtitleフォントを設定することで全ての画面を一括して設定することが可能。そのため、個別にタイトルに別のフォントを設定する必要がなくなる。
return MaterialApp(
title: 'Flutter App',
theme: ThemeData(
primarySwatch: Colors.purple,
accentColor: Colors.amber,
fontFamily: 'GenSenRounded',
appBarTheme: AppBarTheme(
textTheme: ThemeData.light().textTheme.copyWith(
title: TextStyle(
fontFamily: 'OpenSans',
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
)),
home: MyHomePage(),
);
titleに設定したフォントファミリーをTextにも適用する
Textではこのように個別にフォント設定をしていたが、これをtitleと同じにする場合は以下のように書く。
before:
children: <Widget>[
// 商品タイトルをColumnのなかに表示
Text(
transactions[index].title,
style:
TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
),
after:
Text(
transactions[index].title,
style: Theme.of(context).textTheme.title,
),
styleの部分をこのように変更することでTextを個別に設定しなくてもtitleと同じフォント設定にすることができる。
title以外のテキストフォントファミリーもグローバルに管理する
以下のようにtextThemeをappBarThemeの前に設定することで、全体のTextの管理もグローバルに行える。
theme: ThemeData(
primarySwatch: Colors.purple,
accentColor: Colors.amber,
fontFamily: 'GenSenRounded',
textTheme: ThemeData.light().textTheme.copyWith(
title: TextStyle(
fontFamily: 'OpenSans',
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
appBarTheme: AppBarTheme(
textTheme: ThemeData.light().textTheme.copyWith(
title: TextStyle(
fontFamily: 'OpenSans',
fontSize: 20,
),
),
)),
What’s the difference between primarySwatch and primaryColor?
primarySwatchを使うことでいい感じに配色を行ってくれる。
https://qiita.com/granoeste/items/352d19157c21cd35e21f#primaryswatch