[Flutter] Image Widget
7190 ワード
Flutter Image Widgetを紹介
英語を理解できる人は公式ドキュメントへ
以下に簡単な使い方を紹介
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')
Author And Source
この問題について([Flutter] Image Widget), 我々は、より多くの情報をここで見つけました https://zenn.dev/0utdoorlife/articles/696fccf4349e4d著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol