【Flutter】Gridviewを使ってみる

こんにちは。
今回は、GridViewの使用方法を紹介します。

方法

itemCountでアイテム数を指定して、itemBuilderでは、表示するウィジェットを返します。
SliverGridDelegateWithFixedCrossAxisCountは固定列数で表示することができます。
crossAxisCountで列数を指定できます。
mainAxisSpacingとcrossAxisSpacingでグリッド間のスペースのサイズを指定することができます。
childAspectRatioでグリッドの高さを指定しています。

使用例

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> numberList = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: GridView.builder(
          itemCount: numberList.length,
          itemBuilder: (context, index) {
            return Container(
              color: Colors.pink,
              child: Center(child: Text(numberList[index])),
            );
          },
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing: 5,
            crossAxisSpacing: 5,
            childAspectRatio: 2.0,
          ),
        ));
  }
}

実行例

最後に

ここまで読んでいただき、ありがとうございました！
いいねしてくれたら、スキップして喜びます