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'), ), ), ], ),