※本記事で使用している環境
＜パソコン＞
機種：MacBook Air（13inch）
OS：macOS Sonoma（ver.14.5）
チップ：Apple M3
シェル：zsh
＜ソフトウェア＞
・Flutter（ver.3.22.3）
・Xcode（ver.15.4）
・CocoaPods（ver.1.15.2）
・Android Studio（ver.2024.1）
・Visual Studio Code（ver.1.92.0）
前回は、MaterialApp Widget についての解説を行いました。
今回は、画像を扱う Image Widget について解説します。
記事を執筆するにあたって、以下の書籍を参考にしました。
おすすめ書籍
公式ドキュメントの該当箇所
公式ドキュメントの解説は、以下のページにあります。
https://api.flutter.dev/flutter/widgets/Image-class.html
アプリ上で画像を表示させる方法
アプリ上で画像を表示させる方法は、様々ありますが、今回は2つ扱います。
- インターネット上にある画像を表示する
- フォルダの中にある写真を表示する
①のインターネット上にある画像を表示するには、「Image.network( )」を使います。
②のフォルダの中にある写真を表示する場合は、「Image.asset( )」を使います。
インターネット上にある画像を表示する手順
前回のコードを書き換えていく形で解説します。
コードの完成形は、以下のとおりです。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Hello First App Bar"),
),
body: Image.network(
"https://www.kantei.go.jp/jp/n5-common/img/r_logo.png",
),
),
);
}
}それでは、順番に解説していきます。
シミュレーターを実行すると、説明画像5 のようにコピーしたアイコン画像が表示されました。
フォルダの中にある写真を表示する手順
コードの完成形は、以下のとおりです。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Hello First App Bar"),
),
body: Image.asset("image/ocean.png")
),
);
}
}それでは、順番に解説していきます。
1: 新しいフォルダ をクリック
2: フォルダ名をつける
※今回は「image」という名前をつけました。
コメントからコードに変更したい箇所を選択した状態で、
Mac command ＋ K command ＋ U
Win Ctrl ＋ K Ctrl ＋ U
を押します。
そうすることで、コメントになっている部分を実行できるプログラムコードに変換することができます。
これを、コメントインと言います。
逆に、コードをコメントに変換することをコメントアウトと言います。
コメントアウトする方法
Mac command ＋ K command ＋ C
Win Ctrl ＋ K Ctrl ＋ C
image の中にある ocean.png なので、
image/ocean.pngと書きます。
このどこのフォルダに格納されているかを、階層構造で表したものをパスと言います。
場合によっては、複数の写真を表示させたいということもあるでしょう。
その場合は、pubspec.yaml の63行目の該当箇所に
image/というように、フォルダ名だけを記述します。
これで、先ほどと同じように、main.dart の Image.asset( ) の中に画像のパスを書きます。
更新されたことがわかるように、AppBar Widget の中の 「title」プロパティに設置した Text Widget の中に書いた文章を変更しました。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Hello 2nd App Bar"),
),
body: Image.asset("image/ocean.png"),
),
);
}
}
このようにしても、画像がしっかりと表示されていることがわかります。
これにて、Image Widget についての解説を終わります。
次は、debug banner を非表示にする方法についての解説を行います。
コメント