LoginSignup
0
2

More than 1 year has passed since last update.

FlutterのGridViewでグリッドレイアウトを作りたい時のメモ

Last updated at Posted at 2021-08-31

FlutterのGridViewでグリッドレイアウトを作りたい時のメモ

参考リンク:
https://api.flutter.dev/flutter/widgets/GridView-class.html
https://flutter.ctrnost.com/basic/layout/gridview
https://flutternyumon.com/how-to-use-listtile
特に難しいところはないが、
・Columnの中にGridViewを置きたい場合はExpandedでラップする(ここで1時間ほど溶かしたのでメモ)
・GridViewの子要素はCardでなくても、TileでもContainerでも何でもいい
・グリッドの縦横比を変えたい時は、childAspectRatioを設定する、黄金比(約1.618)にしたらいい感じにキレイw
・scrollDirectionはデフォルトでAxis.vertical、横スクロールに変えたい場合はAxis.horizontalにする

            Expanded(
              child: GridView.count(
                crossAxisCount: 3,
                childAspectRatio: 1.618,
                mainAxisSpacing: 0.0,
                crossAxisSpacing: 0.0,
                scrollDirection: Axis.horizontal,
                children: [
                  Card(
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Text('お薬手帳'),
                    ),
                    color: Color(0xffddeedd),
                  ),
                  Card(
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Text('血圧手帳'),
                    ),
                    color: Color(0xffddeedd),
                  ),                
                ],
              ),
            ),
0
2
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
0
2