FlutterでGrid

Flutterを触っていたところ、Xamarin.Formsに見られるような比率でレイアウトできるGridが見つからなかったので、作り方をメモしておきます。

作り方

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