Zenn
🖼️

[Flutter] Image Widget

2022/04/22に公開
Flutter
Dart
tech

Flutter　Image　Widgetを紹介

英語を理解できる人は公式ドキュメントへ
https://api.flutter.dev/flutter/widgets/Image-class.html

以下に簡単な使い方を紹介

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(
          title: Text('home'),
          backgroundColor: Colors.amberAccent,
        ),
        body: Center(
	// Image Widget を配置する
          child: const Image(
	    // ImageProviderを必ず設定する。
	    image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
	    // 高さの設定
            height: 370,
	    // 画像の説明文
            semanticLabel: 'owl',
          ),
        ),
      ),
    ),
  );
}

Networkから画像を取得する場合

Networkの画像を表示する場合は,NetworkImageかImage.Networkを利用

Image(image: NetworkImage('画像のURL'))
or
Image.network('画像のURL')

File(Path,URI)から画像を取得する場合

Pathから画像を表示する場合は,FileImageかImage.File()を利用
flutterのプロジェクト外にあるローカルの画像などを取得するときに便利

import 'dart:io';
Image(image: FileImage(File('画像のPathを設定')))
or
Image.file(File('画像のPathを設定'))

Assetsから画像を取得する場合

assets(Flutterのプロジェクト内にある画像)から画像を表示する場合は,AssetImageかImage.asset()を利用
assetsディレクトリ内に表示したい画像を配置
'assets/images/表示したい画像.png'
pubspec.yamlのassetsの部分にassets/images/を追加する

import 'packate:';
Image(image: AssetImage('assets/images/表示したい画像.png'))
or
Image.asset('assets/images/表示したい画像.png')

Discussion