flutter Column,RowでContainerの並べ方

2020年1月8日2023年7月19日

まずは下準備でColumnの中にchildrenを入れる

Rowでしたい場合は、ColumnをRowに変えてください。
３行目のchild: のあとのとこ

Scaffold(
   body: SafeArea( //iphone表示用
   child: Column(
     children: <Widget>[
    //  ここにContainerを入れる（今回は3つ）
     ],
   ),
);

 Scaffold(
   body: SafeArea( //iphone表示用
   child: Column(
     children: <Widget>[
       Container(
         height: 100.0,
         width: 100.0,
         color: Colors.indigo,
         child: Text('ボックス１'),
       ),
       Container(
         width: 100.0,
         height: 100.0,
         color: Colors.green,
         child: Text('ボックス２'),
       ),
       Container(
         width: 100.0,
         height: 100.0,
         color: Colors.white,
         child: Text('３'),
       ),
     ],
   ),
 );

こんな感じ

中央に配置

child: Column の下に「mainAxisAlignment: MainAxisAlignment.center,」を入れる。

 Scaffold(
   body: SafeArea( //iphone表示用
   child: Column(
     mainAxisAlignment: MainAxisAlignment.center, // ここ！！！
     children: <Widget>[
       Container(
         height: 100.0,
         width: 100.0,
         color: Colors.indigo,
         child: Text('ボックス１'),

こんな感じ

均等に配置その１

child: Column の下に「mainAxisAlignment: MainAxisAlignment.spaceBetween,」を入れる。

 Scaffold(
   body: SafeArea( //iphone表示用
   child: Column(
     mainAxisAlignment: MainAxisAlignment.spaceBetween, // ここ！！！
     children: <Widget>[
       Container(
         height: 100.0,
         width: 100.0,
         color: Colors.indigo,
         child: Text('ボックス１'),

こんな感じ

均等配置その２

child: Column の下に「mainAxisAlignment: MainAxisAlignment.spaceEvenly,」を入れる。

 Scaffold(
   body: SafeArea( //iphone表示用
   child: Column(
     mainAxisAlignment: MainAxisAlignment. spaceEvenly, // ここ！！！
     children: <Widget>[
       Container(
         height: 100.0,
         width: 100.0,
         color: Colors.indigo,
         child: Text('ボックス１'),

こんな感じ