Flutter/UI/横縦並び・比率

Row(children: <Widget>[
    Expanded(child: Container(
    padding: EdgeInsets.all(20.0),
    child: Text("1"),
    color: Colors.grey,
    ),),
    Expanded(child: Container(
    padding: EdgeInsets.all(20.0),
    child: Text("2"),
    color: Colors.red,
    ),),
    Expanded(child: Container(
    padding: EdgeInsets.all(20.0),
    child: Text("3"),
    color: Colors.green,
    ),),
    Expanded(child: Container(
    padding: EdgeInsets.all(20.0),
    child: Text("4"),
    color: Colors.blue,
    ),),
        ],),

上の20は高さ。

参考：https://nzigen.com/flutter-reference/2018-04-18-row-expanded.html

比率

横並びの比率をflexで入れる。

              Row(
                children: [
                  Expanded(
                    flex: 2,
                    child: Container(
                      color: Colors.blue,
                      child: Text('taro'),
                    ),
                  ),
                  Expanded(
                    flex: 3,
                    child: Container(
                      color: Colors.green,
                      child: Text('jiro'),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      color: Colors.orange,
                      child: Text('saburo'),
                    ),
                  ),
                ],

https://qiita.com/kalupas226/items/5aa41ca409730606000f