作り方
LayoutBuilderでWidgetのサイズを取得し、RowとColumnを使って配置をしています。
ソース
class LayoutBuilderSample extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints)
{
Size size = new Size(constraints.maxWidth,constraints.maxHeight);
return new Column(
children: <Widget>[
new Row(
children: <Widget>[
new SizedBox(
height: size.height/4,
width: size.width/3,
child: new Card(color: Colors.blue),
),
new SizedBox(
height: size.height/4,
width: size.width/2,
child: new Card(color: Colors.greenAccent),
),
new SizedBox(
height: size.height/4,
width: size.width/6,
child: new Card(color: Colors.orange),
),
],
),
new Row(
children: <Widget>[
new SizedBox(
height: size.height/4,
width: size.width/4,
child: new Card(color: Colors.blue),
),
new SizedBox(
height: size.height/4,
width: size.width/3,
child: new Card(color: Colors.greenAccent),
),
new SizedBox(
height: size.height/4,
width: size.width/12*5,
child: new Card(color: Colors.orange),
),
],
),
new Row(
children: <Widget>[
new SizedBox(
height: size.height/4,
width: size.width/3*2,
child: new Card(color: Colors.blue),
),
new SizedBox(
height: size.height/4,
width: size.width/5,
child: new Card(color: Colors.greenAccent),
),
new SizedBox(
height: size.height/4,
width: size.width/15*2,
child: new Card(color: Colors.orange),
),
],
),
new Row(
children: <Widget>[
new SizedBox(
height: size.height/4,
width: size.width/6,
child: new Card(color: Colors.blue),
),
new SizedBox(
height: size.height/4,
width: size.width/3,
child: new Card(color: Colors.greenAccent),
),
new SizedBox(
height: size.height/4,
width: size.width/2,
child: new Card(color: Colors.orange),
),
],
),
],
);
},
);
}
}
それぞれのSizedBoxでheightとwidthが全体の大きさの何分の何なのかを指定し、大きさを決めています。子の合計の幅が親を超えるとエラーが出るので注意が必要です。
全体のコードはGitHubにあげておきます。
github.com