[Flutter] Image.asset で画像を表示する

Image.asset はアプリにバンドルされたJSONや画像などのリソースを
アプリ実行時にアクセスして表示させることができます

Image.asset

アプリ内の images ディレクトリにimg_3.jpgを置いてあるとして

それを読み出し表示するコードは以下になります

Image.asset('images/img_3.jpg')

1	Image.asset('images/img_3.jpg')

後は、pubspec.yaml にAssetの設定をするだけです

Flutterでの画像表示方法はいくつかあります

Image.asset
- アプリ内のassetsに画像を置きそこから読み出して表示
Image.network
- Net上のURLから取得して表示
Image.file
- デバイス内の写真や画像ファイルを表示
Image.memory
- バイトストリーム、例えばBase64でエンコードされた画像を表示する

また、Imageクラスには特定の目的がないデフォルトのコンストラクタとしてImage.newがあります
これは明示的にコンストラクタを呼び出したい場合でほとんどのケースでは直接使われることはないようです

Image.new
- Image.newはImageクラスのデフォルトコンストラクタ
- ImageProvider
  - 異なるソースからの画像を取得するための統一されたインターフェースの役割

目次
1. Assetの設定
2. サンプルコード
3. 実行結果

Assetの設定

画像ファイルを入れるディレクトリを作成します

ここでは images を作成
ディレクトリ自体は、直接プロジェクトで作成できます

作成したディレクトリに画像を入れる

pubspec.yaml

assets: 
   - images/img_3.jpg

1 2	assets: - images/img_3.jpg

これを追加します

name: flutter_image_asset
description: "A new Flutter project."
publish_to: 'none'
version: 0.1.0

environment:
  sdk: '>=3.4.4 <4.0.0'

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

flutter:
  uses-material-design: true
  assets:
    - images/img_3.jpg

name: flutter_image_asset

description: "A new Flutter project."

publish_to: 'none'

version: 0.1.0

environment:

sdk: '>=3.4.4 <4.0.0'

dependencies:

flutter:

sdk: flutter

dev_dependencies:

flutter_test:

sdk: flutter

flutter_lints: ^3.0.0

flutter:

uses-material-design: true

assets:

- images/img_3.jpg

サンプルコード

Statelessで簡単に作成できます

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Image.asset('images/img_3.jpg'),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MainApp());

}

class MainApp extends StatelessWidget {

const MainApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

body: Center(

child: Image.asset('images/img_3.jpg'),

);

}

実行結果

Androidエミュレータで実行

iOS シミュレータ