Flutter で Assets から画像を表示するサンプルコード

Flutter で assets から画像を表示するサンプルコードをご紹介します。

Flutter

前提

Flutter Assets 実装の参考情報

Flutter 公式ドキュメントから以下の記事を参考にして assets から画像を表示する機能を実装しました。

本記事での assets ファイル

本記事で扱う assets は assets/images/codenote-net-200×200.jpg だけとします。

$ tree assets 
assets
└── images
    └── codenote-net-200x200.jpg

1 directory, 1 file

Flutter Assets 画像表示 サンプルコード

Flutter アプリに assets/ に追加した画像を表示するサンプルコードは以下の GitHub Pull Request に公開していますので、ぜひご覧ください。

🔗 Display the image from assets · Pull Request #12 · codenote-net/flutter_sandbox

EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE

もし、Unable to load asset: assets/images/xxx.jpg というようなエラーメッセージが発生した場合、pubspec.yaml 内の assets の定義を確認しましょう。

間違った assets の定義

flutter:
  assets:
    - assets/

正しい assets の定義

Note that only files located directly in the directory are included. To add files located in subdirectories, create an entry per directory.

🔗 Specifying assets | Adding assets and images – Flutter

と公式ドキュメントに記載されている通り、assets/ という定義だけだと assets/ 直下のディレクトリ内のファイルまで再帰的に指定されません。

よって、正しくは以下のように画像ファイルが有るディレクトリまで明示的に定義する必要があります。

flutter:
  assets:
    - assets/images/

詳細なエラーメッセージ

I/flutter ( 8558): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
I/flutter ( 8558): The following assertion was thrown resolving an image codec:
I/flutter ( 8558): Unable to load asset: assets/images/codenote-net-200x200.jpg
I/flutter ( 8558): 
I/flutter ( 8558): When the exception was thrown, this was the stack:
I/flutter ( 8558): #0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
I/flutter ( 8558): 
I/flutter ( 8558): #1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:484:44)
I/flutter ( 8558): #2      AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:469:14)
I/flutter ( 8558): #3      ImageProvider.resolve... (package:flutter/src/painting/image_provider.dart:327:17)
I/flutter ( 8558): #4      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:160:22)
I/flutter ( 8558): #5      ImageProvider.resolve.. (package:flutter/src/painting/image_provider.dart:325:84)
I/flutter ( 8558): (elided 13 frames from package dart:async)
I/flutter ( 8558): 
I/flutter ( 8558): Image provider: AssetImage(bundle: null, name: "assets/images/codenote-net-200x200.jpg")
I/flutter ( 8558): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#5006d(), name:
I/flutter ( 8558):   "assets/images/codenote-net-200x200.jpg", scale: 1.0)
I/flutter ( 8558): ════════════════════════════════════════════════════════════════════════════════════════════════════

以上、Flutter で assets から画像を表示する機能を実装した、現場からお送りしました。

関連記事