GridViewをFlutterで使った時にデフォルトのアスペクト比は1:1で表示されています。
内部実装をみてもGridの高さや、幅を設定する方法はありません。
GridView.count({
Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required int crossAxisCount,
double mainAxisSpacing: 0.0,
double crossAxisSpacing: 0.0,
double childAspectRatio: 1.0, ←ここが1で設定されているので縦横1:1で設定されている
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
List<Widget> children: const <Widget>[],
})
普通に実装したら
例えばこんなコードを実行したら縦横正方形で画像が表示されてます。
Widget _renderPhotoGrid() {
List<String> widgetList = ['A', 'B', 'C'];
return new GridView.count(
controller: new ScrollController(keepScrollOffset: false),
crossAxisCount: 2,
scrollDirection: Axis.vertical,
mainAxisSpacing: 4.0,
children: widgetList.map((String value) {
return new Container(
color: Colors.green,
child: new Center(
child: new Text(
value,
style: new TextStyle(
fontSize: 50.0,
color: Colors.white,
),
)
)
);
}).toList(),
);
}
Gridアイテムの高さを変えたい!
Gridアイテムの高さを変えたい!ってときはアスペクト比を変えます。
Widget _renderPhotoGrid() {
List<String> widgetList = ['A', 'B', 'C'];
// アスペクト比を計算する
var size = MediaQuery.of(context).size;
final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
final double itemWidth = size.width / 2;
return new GridView.count(
controller: new ScrollController(keepScrollOffset: false),
crossAxisCount: 2,
scrollDirection: Axis.vertical,
mainAxisSpacing: 4.0,
childAspectRatio: (itemWidth / itemHeight), ←比を計算していれる。
children: widgetList.map((String value) {
return new Container(
color: Colors.green,
child: new Center(
child: new Text(
value,
style: new TextStyle(
fontSize: 50.0,
color: Colors.white,
),
)
)
);
}).toList(),
);
参考