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,
     ),
   ),
 ),
)

これで画像が画面全体に拡大表示することができました。