Flutter　Columnのサイズを画面サイズの比率で指定するサンプル

2024年2月13日

環境
Windows11 pro 64bit
Flutter 3.3.7

書式
SizedBox(
height: MediaQuery.of(context).size.height * (比率),
width: MediaQuery.of(context).size.width * (比率),
Columnのサイズを画面サイズの比率で指定するには、
MediaQuery.of(context).sizeを使います。
引数「width」に、横幅としてMediaQuery.of(context).size.widthに比率を掛けた値を指定します。

使用例

@override
 Widget build(BuildContext context) {
   return SafeArea(
     child: Scaffold(
       body: SizedBox(
         height: MediaQuery.of(context).size.height * 0.55,
         width: MediaQuery.of(context).size.width * 0.6,
         child: Column(
           children: [
             Expanded(
               child: Container(
                 color: Colors.green,
               ),
             ),
           ],
         ),
       ),
     ),
   );
 }