Assets (Flutter Roadmap Working with Assets)

はじめに

Flutterを網羅的に学習するにあたってRoadmapを使って学習を進めることにしました。

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

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

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の設定を追加する必要があります。

例

flutter:
  assets:
    - assets/image.png
    - assets/data.json
    - assets/font.ttf
    - ...

3. Assetsの読み取り

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

以下のコードはアプリケーションがassets内のdata.jsonファイルを読み取り、内容を表示するコードです。

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などのウィジェット、プロパティを使用します。

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

Imageウィジェット

Imageウィジェットは、デバイス上のローカルファイル、ネットワーク上のリモート画像、またはアプリ内のAssetsから画像を読み込んで表示するために使用されます。

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に指定することで、アプリ全体でデフォルトのフォントに設定されます。

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に指定することで、個別に設定できます。

Text(
    'custom font',
    style: TextStyle(
        fontFamily: 'OpenSansCondensed',
        fontSize: 40,
    ),
),

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

まとめ

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

参考資料