POSTED BY
2022-10-28

Flutterでアプリ内にファイルをあらかじめ埋め込んでおき、コードで読み込むにはassetsフォルダを使う。

assetsディレクトリの作成

左ペインのプロジェクト名を右クリック→New→Directoryとし、「assets」と入力しOK。するとトップにassetsディレクトリができるので、ここに読み込みたい任意のファイルを入れ込んでいく。

ひとまずテストで、「テストテキストファイルの中身です」とだけかかれたテキストファイルをtest.txtとして保存してassetsディレクトリに置いておく。assets/test.txt

pubspec.yamlにファイルパスを記述

置くだけではだめで、pubspec.yamlのflutter:ブロックにパスを書かないと、認識してくれない。

flutter:
  assets:
    - assets/test.txt

テキストファイル読み込み、表示

読み込みはrootBundle.loadStringで行うがこれは非同期に行われるため結果がFuruteクラスで返るので、コールバック関数と一緒に定義する。

import 'package:flutter/services.dart'; //rootBundle
import 'dart:async'; //Future

Stateウイジェットで読み込んで表示する

class _MyHomePageState extends State<MyHomePage> {

  String _assets_text = '';

  Future<String> loadAssetsTextFile(String name) async {
    return rootBundle.loadString('assets/' + name);
  }

  @override
  Widget build(BuildContext context) {
    loadAssetsTextFile('test.txt').then((text) => {
      setState(() {
        _assets_text = text;
      })
    });

    return Scaffold(
      appBar: AppBar(
        title: Text('Load assets data file test'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Load assets data file test',
            ),
            Text(
              '$_assets_text',
            ),
          ],
        ),
      ),
    );
  }
}

画像ファイルの場合

AssetImageクラスにパスを渡せばそのままImageProviderクラスとして、Imageウイジェットの中身に使えます。

flutter:
  assets:
    - assets/test.txt
    - assets/test.png

//中略..
    Text(
              '$_assets_text',
            ),
    Image(image: AssetImage('assets/test.png')),

任意のバイナリファイルの場合

rootBundle.loadで読み込んで、Unit8List配列として返すので、あとは利用側でなんとかする。

Future<Uint8List> loadAssetsBinaryFile(String name) async {
    var data = await rootBundle.load('assets/$name');
    return data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
  }

loadAssetsBinaryFile('test.bin').then((data) => {
     // 処理
    });