Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter】画面いっぱいに画像を表示する
2020.10.12
Flutterに関する記事を毎日投稿しています。
本日は、画像を画面いっぱいに表示する方法についてです。
以下のように記述すれば画像を表示することができますが、この画像はA4サイズのアスペクト比なので、ほとんどのスマホ端末では全体に表示されません。
Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://hatchout.net/assets/images/school_flyer1024.png'),
),
),
),
)
そこで、DecorationImageクラスに以下の1行を追加します。
fit: BoxFit.cover
追加後のコードはこちらです。
Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://hatchout.net/assets/images/school_flyer1024.png'),
fit: BoxFit.cover,
),
),
),
)
これで画像が画面全体に拡大表示することができました。
Flutterラボ
hatchoutschool
Flutter Daily
Flutterに関する記事を日々更新しています (223本)

【Dart】Stringからint, double, DateTimeに変換する
2020.09.14

【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18

【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01

【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13