flutterのフォントの設定について

# flutterアプリにフォントファミリーを設定する

assets/fonts
のようにassetsパスを作成して、その中にフォントフォルダを作って管理するようにする。

まず、
https://fonts.google.com/specimen/Open+Sans
こういうサイトからフォントファミリーをDLしてくる

フォントファイルをassets/fonts以下に置いて、（なかったら作る）`pubspec.yaml`  ファイルの中に

```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
```

のような箇所があるので、ここで設定する。

下記のように複数のフォントを記述することができる。
また、フォントのウェイトを記述して管理する。

```yaml
  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で指定する。

```dart
return MaterialApp(
      title: 'Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.purple,
        accentColor: Colors.amber,
        fontFamily: 'GenSenRounded',
      ),

```

### 個別にフォントを設定する
また、個別に指定したい場合は、Text Widgetの中に引数として渡すことで個別にスタイルを変更可能。

```dart
appBar: AppBar(
        title: Text('Personal Expense', style: TextStyle(fontFamily: 'OpenSans'),),
        actions: <Widget>[
          IconButton(
```

## 個別に設定するのが面倒なのでまとめて設定する
以下のように、appBarTheme内にtextThemeのtitleフォントを設定することで全ての画面を一括して設定することが可能。そのため、個別にタイトルに別のフォントを設定する必要がなくなる。

```dart
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:**

```dart
children: <Widget>[
                    // 商品タイトルをColumnのなかに表示
                    Text(
                      transactions[index].title,
                      style:
                          TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
                    ),

```

**after:**

```dart
Text(
                      transactions[index].title,
                      style: Theme.of(context).textTheme.title,
                    ),

```

styleの部分をこのように変更することでTextを個別に設定しなくてもtitleと同じフォント設定にすることができる。

## title以外のテキストフォントファミリーもグローバルに管理する
以下のようにtextThemeをappBarThemeの前に設定することで、全体のTextの管理もグローバルに行える。

```dart
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