2021/3/7 :Flutter : Imageウィジェットを使った画像の読み込み

 

広告

ChatGPTの回答のシェア機能を利用して、ChatGPTの回答の質を評価する投稿アプリ「Engineers and GAI」をPlay storeにリリースしました。

ReactとFlutterに関する回答を対象としております。

今後いろいろなジャンルを追加していきます🔥

投稿の閲覧はアカウント登録無しで可能、投稿・フォロー・ブックマークなどはアカウント登録後ご利用いただけます。

現在全機能無料でご利用いただけます。

Google Play で手に入れよう


 

Engineer’s companionというエンジニア・プログラマーの学習をサポートするwebアプリを公開致しました😆🎉

 

フロントエンドフレームワーク公式ドキュメント用

https://fh1.okutaro.com


サーバーサイドフレームワーク公式ドキュメント用

https://fh2.okutaro.com


演習回数・メモ書きの保存機能、エクスポート/インポート機能、URLやメモの内容での検索機能など豊富な機能で日々の学習を強力にサポート!!

ほとんどのページに操作説明が付いていて操作がわかりやすい!

現在全機能完全無料でご利用可能です。

ユーザー登録不要、アクセス後すぐにご利用可能です。

ぜひ日々の学習にご利用いただけますと幸いでございます。


アプリ内に置いている画像をImage.assetメソッドで読み込んで表示させます。

基本

(1)読み込みたい画像をプロジェクトルート直下のassetsディレクトリに入れます。

ということでまずプロジェクトルート直下に画像などのアセットを入れるディレクトリ、assetsディレクトリを作ります(androidディレクトリの下)。


(2)次にassetsディレクトリに、読み込みたい画像を入れます。

assetsディレクトリ直下に

Screenshot_1596586622.png

を入れました。

そしてassetsディレクトリ内にもう一つディレクトリ「imagesディレクトリ」を作ります。

そしてassets/imagesディレクトリ内に

diamond.png

ファイルを入れました。


(3)pubspec.yamlファイルに、「assetsディレクトリ内のアセット(画像)をアプリで使う」ことを示すコードを記述します。

pubspec.yaml

flutter:

  uses-material-design: true
  assets:
    - assets/

pubspec.yamlファイルのflutterセクションのassetsサブセクションに上記のように記述します。

インデントが「スペース二つ」でないと画像を読み込めませんので注意しましょう。


(4)これで

Screenshot_1596586622.png

を読み込めるようになったので、main.dartファイルに

//main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(home:MyApp(),),);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child:Image.asset('assets/Screenshot_1596586622.png'),
      ),
    );
  }
}

↑のように記述して実行すると

画像が読み込めました。


(5)次にassets/imagesディレクトリ内のdiamond.pngを表示させます。

pubspec.yamlファイルを(3)のように記述して、main.dartファイルを

//main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(home:MyApp(),),);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child:Image.asset('assets/images/diamond.png'),
      ),
    );
  }
}

上記のように記述して実行させると、

════════ Exception caught by image resource service ════════════════════════════════════════════════
Unable to load asset: assets/images/diamond.png

このようなエラーが発生して、画像が読み込めません。

画像のpathは間違っていないのですが、原因はpubspec.yamlファイルの記述です。

pubspec.yamlファイルで

flutter:

  uses-material-design: true
  assets:
    - assets/

このように指定すると、assetsディレクトリ直下の画像ファイルは全て読み込めるようになりますが、この指定方法だとassetsディレクトリ内のサブディレクトリやそのサブディレクトリ、、、の中にある画像は読み込めません。(Asset variantsのケースを除く)

この例で言うと、assetsディレクトリ直下にある

Screenshot_1596586622.png

は((4)でやったように)読み込めますが、assetsディレクトリのサブディレクトリであるimagesディレクトリ内にある

diamond.png

は読み込めません。

diamond.pngファイルを読み込みたい場合pubspec.yamlファイルで

pubspec.yamlファイル

flutter:

  uses-material-design: true
  assets:
    - assets/
    - assets/images/

↑のように指定する必要があります。

↑のように指定して、

pub get

を実行して、アプリを再実行(ホットリスタートではなくて再実行)すると、

diamond.pngを表示できました。

 

参考

Adding assets and images – Flutter

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です