アプリケーション開発ポータルサイト
ServerNote.NET
カテゴリー【FlutterAndroidiPhone/iPad
Flutterでassetsリソースファイルを使う
POSTED BY
2023-10-27

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',
            ),
          ],
        ),
      ),
    );
  }
}
</widget></string></myhomepage>

画像ファイルの場合

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) => {
     // 処理
    });
</uint8list>

※本記事は当サイト管理人の個人的な備忘録です。本記事の参照又は付随ソースコード利用後にいかなる損害が発生しても当サイト及び管理人は一切責任を負いません。
※本記事内容の無断転載を禁じます。
【WEBMASTER/管理人】
自営業プログラマーです。お仕事ください!
ご連絡は以下アドレスまでお願いします★

【キーワード検索】