Assets (Flutter Roadmap Working with Assets)

## はじめに
Flutterを網羅的に学習するにあたって[Roadmap](https://roadmap.sh/flutter)を使って学習を進めることにしました。

この記事では、Flutter初学者やこれからFlutterを学習し始める方に向けて、**Assetsの操作**についてまとめています。

RoadmapはFlutterだけでなく、他の言語やスキルのロードマップも提供されており、何から学習して良いか分からないと悩んでいる方にとって有用なサイトになっています。
ぜひ[Roadmap](https://roadmap.sh/)を利用して学習してみてください。

## Roadmapとは

簡潔に言えば、Roadmap.shは学習者にとっての**ガイドブック**であり、**学習の方向性を提供する学習ロードマップサイト**です。

初心者から上級者まで、ステップバイステップでスキルを習得するための情報が提供されています。

学習の進め方が分かりやすく示されているだけでなく、個々の項目に参考資料やリソースへのリンクも提供されているので、学習者は目標を設定し、自分自身のペースで学習を進めることができます。

## Working with Assets
FlutterロードマップWorking with Assetsでは以下の7つのサイトが紹介されています。興味のある方はぜひお読みください。

- Flutter Tutorial - Assets: https://www.youtube.com/watch?v=Hxh6nNHSUjo
- Adding Assets in Flutter: https://docs.flutter.dev/ui/assets/assets-and-images
- Font - Flutter: https://docs.flutter.dev/cookbook/design/fonts
- How to use custom fonts in Flutter: https://blog.logrocket.com/use-custom-fonts-flutter/
- Adding assets and images: https://docs.flutter.dev/ui/assets/assets-and-images
- Images in Flutter: https://docs.flutter.dev/cookbook/images
- File class: https://api.flutter.dev/flutter/dart-io/File-class.html

## Assetsとは
アセット（Assets）とは、アプリケーションに埋め込まれた**リソースファイルやデータ**を指します。登録したファイルを**アプリケーションが実行されるときに読み取る**ことができ、テキストファイル、画像、フォント、JSONデータ、音声ファイルなど、さまざまな種類のリソースを含めることができます。アセットを使用することで、アプリケーションに必要なデータを管理することができるのです。

## Assetsの使用方法

### 1. Assetsフォルダの作成
Assetsを管理するために、Flutterのプロジェクト内に、`assets`という名前のディレクトリを作成します。
ディレクトリはプロジェクトのルートディレクトリ直下に配置します。
```:例
project_root/
├── assets/
│   ├── image.png
│   ├── data.json
│   └── font.ttf
│   └── ...
├── lib/
└── ...
```

### 2. yamlファイルの設定
Assetsをプロジェクトに取り込むためには、`pubspec.yaml`ファイルにAssetsの設定を追加する必要があります。
```yaml:例
flutter:
  assets:
    - assets/image.png
    - assets/data.json
    - assets/font.ttf
    - ...
```

### 3. Assetsの読み取り
Flutterでは、Assetsを読み取るために、`rootBundle`というオブジェクトを所持しています。JSON(テキスト)ファイルを読み込む際には`rootBundle`を利用してアクセスします。

以下のコードはアプリケーションが`assets`内の`data.json`ファイルを読み取り、内容を表示するコードです。
```dart
import 'package:flutter/services.dart' show rootBundle;

Future<void> loadAsset() async {
  final data = await rootBundle.loadString('assets/data.json');
  print(data);
}
```

### 4. イメージやフォントの使用
イメージファイルやフォントをアセットとして組み込む場合、`Image.asset`や`fontFamily`などのウィジェット、プロパティを使用します。

```dart
Image.asset('assets/image.png'),
Text(
  'Custom Font Text',
  style: TextStyle(fontFamily: 'font'),
),
```

#### Imageウィジェット
`Image`ウィジェットは、デバイス上のローカルファイル、ネットワーク上のリモート画像、またはアプリ内のAssetsから画像を読み込んで表示するために使用されます。
```dart: Imageウィジェット使用例
Image.network('https://example.com/image.jpg'), // ネット画像の読み込み
Image.asset('assets/local_image.png'), // アプリ内のアセットから画像を読み込み
Image.file(File('path_to_local_image.jpg')), // ローカルファイルから画像を読み込み
```

#### カスタムフォント
カスタムフォントの適用方法は2パターンあります。

##### 1. アプリ全体に設定する
`MaterialApp`内の`theme`に指定することで、アプリ全体でデフォルトのフォントに設定されます。
```dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(fontFamily: 'OpenSansCondensed'),
      home: SamplePage(),
    );
  }
}
```


##### 2. 個別に設定する
`Text`内の`TextStyle　fontFamily`に指定することで、個別に設定できます。
```dart
Text(
    'custom font',
    style: TextStyle(
        fontFamily: 'OpenSansCondensed',
        fontSize: 40,
    ),
),
```

**google_fontsパッケージ**を利用すると、フォントを用意せずとも、google_fontsが使えるので、興味があれば、ぜひ使ってみてください。

https://pub.dev/packages/google_fonts

## まとめ
**Assets**を取り込むためには、プロジェクト内で、`assets`という名前のディレクトリを作成して、作成した`assets`ファイルを`pubspec.yaml`ファイルに追加することで使用できるようになります。**Assets**を使用することで、**動作や外観をカスタマイズ**することができるようになるので、アプリケーションをより魅力的にするために画像、アイコン、フォント、テキストデータなどを活用していきましょう。

## 参考資料

https://qiita.com/kaleidot725/items/938e6c8d597e7aa427fd

https://qiita.com/yama__0808/items/d3b6a4a0fa436ce252ca

https://note.com/hatchoutschool/n/n071d5d93e948

https://qiita.com/unsoluble_sugar/items/3e0bb6760eb572bc9253