※本記事で使用している環境
<パソコン>
機種: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
Win Ctrl + K Ctrl + U
を押します。
そうすることで、コメントになっている部分を実行できるプログラムコードに変換することができます。
これを、コメントインと言います。
逆に、コードをコメントに変換することをコメントアウトと言います。
コメントアウトする方法
Mac command + K
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 を非表示にする方法についての解説を行います。
コメント