LoginSignup
22
10

More than 5 years have passed since last update.

FlutterでGridViewItemの高さを変える

Last updated at Posted at 2018-05-10

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

参考

22
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
10