GridView

grid.dart

import 'package:flutter/material.dart';

List<int> intList = List<int>.generate(100, (index) => index++);

class ExGrid1 extends StatelessWidget {
  const ExGrid1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: GridView.builder(
              // gridDelegate - count
              // count - 가로에 몇개의 타일을 출력
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                // crossAxisCount 숫자
                crossAxisCount: 3,

                // 타일의 가로 세로 비율 n/n (가로/세로)
                childAspectRatio: 1 / 4,
                // 수평 패딩
                mainAxisSpacing: 20,
                // 수직 패딩
                crossAxisSpacing: 20,
              ),
              itemBuilder: (_, index) {
                return Container(
                  margin: EdgeInsets.all(10),
                  height: 50,
                  color: Colors.grey,
                  child: Text('${intList[index]}번'),
                );
              })),
    );
  }
}

class ExGrid2 extends StatelessWidget {
  const ExGrid2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: GridView.builder(
              gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                  // maxCrossAxisExtent 비율 숫자를 작성
                  // 디바이스의 가로길이 ~/ maxCrosAxisExtent 숫자 +1

                  // 예시 - 디바이스의 가로길이가 425 ~/ 100 --> 4+1
                  // 411
                  // 가로에 출력되는 개수 5개

                  maxCrossAxisExtent: 100),
              itemBuilder: (_, index){
                print(MediaQuery.of(context).size.width); // 디바이스의 가로길이
                return Container(
                  height: 50,
                  color: Colors.grey,
                  margin: EdgeInsets.all(10),
                  child: Text('${intList[index]}'),
                );
              })),
    );
  }
}

ExGrid2