今回は「Image」の基本的な使い方について紹介します。
Imageでは画像を表示させる以外にも色の合成、画像の表示方法を変更したりできます！
下準備：ローカル画像をassetsに追加
ローカル画像を表示させたい方は先に画像をassetsに追加しておきましょう。
本記事ではFlutter公式が提供している「フクロウのオンライン画像」を使用します。パスは「https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg」
Imageの基本コンストラクタ
Imageで画像を表示させる方法は2種類あります。
一度それぞれの方法で上のようにオンライン画像を表示させてみます。
方法１：imageプロパティで画像タイプに合わせる
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: const Center(
child: Image(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
),
),
),
);
}imageプロパティのNetworkImageでオンライン画像を指定します。
方法２：コンストラクタで画像タイプに合わせる（おすすめ！）
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: Center(
child: Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
),
),
);
}コンストラクタに直接パスを書いてオンライン画像を指定できます。コードが短くなり、表示させたい画像タイプが一目で分かるのでこちらがおすすめです！
以後、後者の方法で基本プロパティの使い方を紹介します。
Imageの基本プロパティ
image（方法１の場合）
//ローカル画像を表示させる場合
Image(
image: AssetImage('assets/images/blue-bird.png'),
)
//オンライン画像を表示させる場合
Image(
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)実装できるWidget：AssetImage, FileImage, MemoryImage, NetworkImage, etc
height/width
heightプロパティで高さ、widthプロパティで横幅を指定します。片方の幅を指定すれば別の側面はレスポンシブ対応します。（fitプロパティを指定する場合は異なる場合がある）
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: Center(
child: Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
width: 200,
),
),
),
);
}color & colorBlendMode
画像に色をブレンドさせるにはcolorBlenadModeプロパティを使用します。画像に合成する色をcolorプロパティで指定します。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: Center(
child: Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
color: Colors.blue,
colorBlendMode: BlendMode.softLight,
),
),
),
);
}colorBlendModeには「BlendMode」を使用します。かなり種類があるのでドキュメントを一度チェックするのがおすすめです！
fit
fitプロパティを使えば、画像の高さだけheightに合わせて横幅をオリジナルのまま維持したりなど表示方法を指定できます。
//ソース（heightにだけ画像サイズを合わせる）
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: Center(
child: Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
width: 150,
height: 300,
fit: BoxFit.fitHeight,
),
),
),
);
}fitプロパティにはBoxFitを使用します。
以上です。