Dart
Flutter

FlutterでGridViewItemの高さを変える

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(),
    );
  }

スクリーンショット 2018-05-10 10.13.14.png

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(),
    );

スクリーンショット 2018-05-10 10.14.55.png

参考

https://stackoverflow.com/questions/48405123/how-to-set-custom-height-for-widget-in-gridview-in-flutter