端末のサイズデータから画面に表示したいWidgetのサイズを指定したいことってありませんか？しかし、それぞれの端末ごとに分岐させて〇〇pxのように指定してしまうと、とてつもない作業量になります。こちらの記事ではMediaQueryを使用して、端末のサイズを取得しそれぞれのWidgetのサイズを指定していきたいと思います。

サイズを決め打ちで入力した時の問題点

body: Padding(
       padding: const EdgeInsets.all(8.0),
       child: Center(
         child: Column(
           children: [
             Container(
               height: 100,
               color: Colors.blue,
             ),
             Container(
               height: 200,
               color: Colors.green,
             ),
             Container(
               height: 300,
               color: Colors.red,
             ),
           ],
         ),
       ),
     ),

Pixel2の場合（MediaQuery使用前）

iPhone6sの場合（MediaQuery使用前）

上のように画面の大きいデバイスだと問題ないのですが、iPhone6sのように画面の小さいデバイスだとエラーが出てしまいます。

MediaQueryをBuild内で使用して変数に代入しておく

Widget build(BuildContext context) {
   final double deviceHeight = MediaQuery.of(context).size.height;
   return Scaffold(
     ...
   );
 }

使用したい場所で画面との割合と計算して変数を呼び出す。

Padding(
       padding: const EdgeInsets.all(8.0),
       child: Center(
         child: Column(
           children: [
             Container(
               height: deviceHeight * 0.1,
               color: Colors.blue,
             ),
             Container(
               height: deviceHeight * 0.3,
               color: Colors.green,
             ),
             Container(
               height: deviceHeight * 0.4,
               color: Colors.red,
             ),
           ],
         ),
       ),
     ),

Pixel2（MediaQuery使用後）

iPhone6sでは（MediaQuery使用後）

全体コード

class HomePage extends StatefulWidget {
 HomePage({Key key, this.title}) : super(key: key);

 final String title;

 @override
 _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
 @override
 Widget build(BuildContext context) {
   final double deviceHeight = MediaQuery.of(context).size.height;
   return Scaffold(
     resizeToAvoidBottomPadding: false,
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Padding(
       padding: const EdgeInsets.all(8.0),
       child: Center(
         child: Column(
           children: [
             Container(
               height: deviceHeight * 0.1,
               color: Colors.blue,
             ),
             Container(
               height: deviceHeight * 0.3,
               color: Colors.green,
             ),
             Container(
               height: deviceHeight * 0.4,
               color: Colors.red,
             ),
           ],
         ),
       ),
     ),
   );
 }
}