【Flutter】フルスクリーンでの背景画像

こんにちは、株式会社Pentagonでアプリ開発をしている山田です。
https://pentagon.tokyo
今日は、背景画像をフルスクリーンで表示させる際について2パターンの方法を記載します。

■ Stack Widgets を用いた表示方法

stack widgets  は複数の子widgetsを重ね合わせたい時に使います。Positioned.fill　を使うことによって、隙間なくimageを埋めることができます。

class MyPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Stack(
       children: [
         Positioned.fill(
           child: Image(
             image: AssetImage("assets/images/sampleVertical.jpg"),
             fit: BoxFit.cover,
           ),
         ),
         Positioned(
           child: Center(
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 Text(
                   'テスト画像',
                   style: TextStyle(
                     fontSize: 35.0,
                     fontWeight: FontWeight.bold,
                     color: Colors.white,
                   ),
                 ),
               ],
             ),
           ),
         ),
       ],
     ),
   );
 }
}

■ BoxDecoration Widgetsを用いた表示方法

元々はBoxを描くためのWidgetsです。 BoxConstraints.expand()　によって要素サイズいっぱいに拡大させます。

class MyPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       body: Container(
         constraints: BoxConstraints.expand(),
         decoration: BoxDecoration(
           image: DecorationImage(
             image: AssetImage('assets/images/sampleVertical.jpg'),
             fit: BoxFit.cover,
           ),
         ),
         child: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Text(
                 'テスト画像',
                 textAlign: TextAlign.center,
                 style: TextStyle(
                   fontSize: 35.0,
                   fontWeight: FontWeight.bold,
                   color: Colors.white,
                 ),
               ),
             ],
           ),
         ),
       ),
     ),
   );
 }
}

fit:BoxFit.fill に変更するとアスペクト比を歪めて、対象のBoxを画像で埋めてしまいます。なので画像が縦長に伸びていることがわかると思います。
fit:BoxFit.cover

fit:BoxFit.fill