Flutterで画像、カスタムフォントを使用する方法

今回はFlutterアプリで画像とカスタムフォントを使用する方法を記述します。
## プロジェクトに画像とフォントを追加する
1. プロジェクト直下に`assets`フォルダを作成し、その直下に`images`と`fonts`フォルダを作成する。
2. 使用したい画像とフォントを各フォルダに格納する。

<img width="354" alt="スクリーンショット 2020-06-29 4.11.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663839/068eaddd-4561-15c9-dce8-a0612d0b31b4.png">

## `pubspec.yaml`にパスを記述する
Flutterで画像やフォントを使用するには、`pubspec.yaml`にパスを記述する必要があります。

```pubspec.yaml
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/
    - assets/fonts/

# An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # 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: OpenSansCondensed
      fonts:
        - asset: assets/fonts/OpenSansCondensed-Light.ttf
          weight: 300
        - asset: assets/fonts/OpenSansCondensed-Bold.ttf
          weight: 700
```
フォントファイルは太さによって複数に分かれていることが多いので、それぞれにweightを定義します。
`pubspec.yaml`に記述する際、インデントが揃っていないと、エラーになったり、上手く適用されないなどがあるので、注意が必要です。

## 画像を表示する
実際にアプリ上にプロジェクトに追加した画像を表示してみます。
#### aseetsの画像を表示する
```main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: Image.asset('assets/images/sample.png'),
        ),
      ),
    );
  }
}
```
ビルドすると以下のように画像を表示させることができました。
<img width="375" alt="Simulator Screen Shot - iPhone 11 Pro - 2020-06-28 at 21.53.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663839/59086dab-b0c6-451e-ae7e-4c0e7fe8acee.png">

#### ネットワーク上の画像を表示させる

```dart

Image.network('イメージのURL')
```
画像のURLを記述することで、URL先の画像を表示させることもできます。

## カスタムフォントを使用する
カスタムフォントを適用する方法は主に２種類あります。
#### アプリ全体のデフォルトに設定する
`MaterialApp()`の`theme`に指定してあげることで、デフォルトのフォントに設定されます。

```main.dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(fontFamily: 'OpenSansCondensed'),
      home: SamplePage(),
    );
  }
}
```
#### 個別に指定する
特定のTextにのみ適用させたい場合は、以下のように`TextStyle`の`fontFamily`に指定します。
`fontWeight `に`pubspec.yaml`に記述したweightを指定することで、それぞれのフォントファイルを使用することができます。

```main.dart
Text(
          'custom font',
          style: TextStyle(
            fontFamily: 'OpenSansCondensed',
            fontWeight: FontWeight.w300,
            fontSize: 40,
          ),
        ),
```
<img width="375" alt="Simulator Screen Shot - iPhone 11 Pro - 2020-06-29 at 04.16.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663839/94858ab0-96e4-dffb-5248-e49942502f3a.png">

## おまけ
フォントファイルをわざわざ用意しなくとも、google_fontsを使用することができるFlutterのパッケージがありますので、そちらを利用してみるのもいいかもしれません。
https://pub.dev/packages/google_fonts