Flutterで画像の表示方法を知りたい。
FlutterのImageウィジェットの使い方がよく分からない。
ということで悩んでませんか?
そこで、今回はFlutterのImageにおける基本的な使い方をサンプルコードとアプリ画面で解説します。Image
を使ことで、画像表示が簡単にできます。
- ネット上の画像を表示する方法
- アプリ内のローカル画像を表示する方法
ちなみに、プログラミング初心者は疑問やエラーの解消に時間が掛かり、学習が前に進まなくて挫折することはよくあります。独学でFlutterを学習する場合は、次のことも考えないといけません。
- 学習の計画
- スケジュール管理
- ポートフォリオ作成時に技術選定 など
初心者にとっては大変です。そこで、自走できるまでの手段にスクールを利用するのは1つの手です!Flutterが学べるおすすめスクールはこちらで詳しく解説してます。月2万ほど〜学べるスクールもあるのでご参考にどうぞ。
【Flutter】Image:画像を簡単に表示できる

Image
についてFlutter公式サイトをもとに解説します。Image
を使えば、上記のように画像の表示が簡単に作成できます。
Imageについて
A widget that displays an image.
(直訳)画像を表示するウィジェット。
引用:Flutter公式サイト「Image class」
【Flutter】Imageのサンプルコード
Image
のサンプルコードは以下の通りです。コピペでそのまま使えます。
import 'package:flutter/material.dart';
void main() => runApp(StatelessDemo());
class StatelessDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('画像表示デモ'),
),
body: Column(
children: [
Center(
//アプリ内から画像を表示
child: Image.asset('images/image_flutter.png'),
),
Center(
//指定URLから画像を表示
child: Image.network('https://yakiimosan.com/wp-content/uploads/2022/07/yakiimo_pc-150x150.png'),
),
],
),
),
);
}
}
Image
で押さえておくべきポイントは以下の2点です。順番に解説していきます。
Image.asset | アプリ内のローカル画像を表示する方法 |
Image.network | ネット上の画像を表示する方法 |
Image.asset
Image.asset
の使い方を以下3ステップで解説します。
① 画像ファイルの格納
プロジェクトの直下に「images」フォルダを作成し、その下に表示させたい画像ファイルを保存します。

② 画像ファイル格納先の定義
pubspec.yamlファイルに画像を保存したディクトりを指定します。
# To add assets to your application, add an assets section, like this:
assets:
- images/
③ コーディング
Image.asset
の指定値に画像ファイルを格納したディレクトリを設定する。
Center(
child: Image.asset('images/image_flutter.png'),
),
Image.network
Image.network
で指定したURLの画像を表示します。
Center(
child: Image.network('https://yakiimosan.com/wp-content/uploads/2022/07/yakiimo_pc-150x150.png'),
),
まとめ:Flutter入門者は画像の表示方法:Imageは押さえておくべき!
今回の記事では、FlutterのImageにおける基本的な使い方をサンプルコードとアプリ画面で解説しました。
Imageで押さえておくべきポイント
Image.asset | アプリ内のローカル画像を表示する方法 |
Image.network | ネット上の画像を表示する方法 |
Flutterエンジニアになるには?
初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。
Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

おまけ:Flutter入門の完全ガイド

Flutter/Dartの基礎一覧
Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。
画面レイアウト
ボタン
- ボタン(ElevatedButton、TextButton、OutlinedButton、IconButton、FloatingActionButton)
- Flutterのアイコンの探し方
入力・出力
- 文字・数値の入力(Text Field)
- 文字・数値の表示(Text)
- 画像の表示(Images)
- スクロール可能リスト(ListView.builder)
- スクロール可能マス目レイアウト(GridView.builder)
ページ遷移
状態管理
- 状態(State)管理の基本(Stateless Widget・Stateful Widget)
非同期処理
- 非同期処理・同期処理(Future)
- ローカルデータベース(SQLite)
- グラフ①(fl_chart)
- グラフ②(syncfusion_flutter_charts)
- カレンダーから日付取得①(syncfusion_flutter_datepicker)
- カレンダーから日付取得②(month_picker_dialog_2)