List를 구현하는 방법은 다양하다.
그중에서 GridView, ListView, Wrap 을 사용하는 방법에 대해 알아보자.

GridView

저는 개인적으로 GridView는 사진들, 갤러리 같은 경우에 자주 사용하는데 그 이유가 childWidget에 대한 Size를 직접적으로 수정을 할 수 없다고 알고 있기 때문이다.
만약에 가능한 방법이 있다면 공유 좀 해주세요!!

예제 코드와 설명은 아래와 같다

Widget buildGridView() {
  return GridView(
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3,        // 가로 한줄에 3개를 넣는다
      childAspectRatio: 3 / 1,  // 가로 : 세로 비율
      mainAxisSpacing: 8,       // 행간의 간격
      crossAxisSpacing: 7,      // 열간의 간격
    ),
    children: [
      for (int i = 0; i < 30; i++)
        Container(
          decoration: BoxDecoration(border: Border.all(width: 1)),
          child: Text(i.toString()),
        ),
    ],
  );
}

LisView

ListView도 종류가 몇개가 있지만 ListView.separated를 주로 사용한다.
각 Item들 사이에 Widget을 배치하기가 쉽게 만들어져 있기 때문이다.

우선 각 옵션을 설명하자면 List형태의 Widget들은 대부분 physics을 설정할 수 있게 되어있는데 Scroll에 대한 옵션을 설정하도록 한다.
ex) 항상 스크롤O, 항상 스크롤X, 스크롤은 가능하지만 제일 상단/하단에 부딛히는 순간부터는 스크롤X 등등..

shrinkWrap은 parentWidget의 Height가 300, ListView안에 모든 children들이 높이합산이 200이라고 가정한다면, true를 줬을때는 ListView의 높이가 200이 되고, false를 줬을때는 300이 된다.

간단하게 말하면 shrinkWrap=true는 ListView가 항상 최대높이로 되려고 하는 성질을 최소높이가 되려고하게 바꾸는것이다.

  @override
  Widget build(BuildContext context) {
    final List<int> items = [for (int i = 0; i < 10; i++) i];

    return ListView.separated(
      padding: const EdgeInsets.all(10),
      // physics: const AlwaysScrollableScrollPhysics(),
      // shrinkWrap: true,
      itemCount: items.length,
      itemBuilder: (context, index) {
        return Container(
          decoration: BoxDecoration(
            border: Border.all(width: 1),
          ),
          width: double.infinity,
          height: 25,
          child: Text(items[index].toString()),
        );
      },
      separatorBuilder: (context, index) {
        // item들 사이에 들어갈 Widget을 구현
        return const SizedBox(height: 10);
      },
    );
  }

Wrap

Wrap은 direction을 Axis.horizontal, Axis.vertical 중에 어떤것을 선택하느냐에 따라서 Alignment, spacing, runSpacing의 느낌(?)이 달라지기 때문에 직접 바꿔가면서 익혀가보는것이 중요하다.

예제코드 및 설명은 Axis.horizontal로 작성해두었다.

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,      // item간의 가로간격
      runSpacing: 20,   // item간의 세로간격
      direction: Axis.horizontal,
      children: [
        for (int i = 0; i < 30; i++)
          Container(
            padding: const EdgeInsets.all(5),
            decoration: BoxDecoration(border: Border.all(width: 1)),
            child: Text(i.toString()),
          )
      ],
    );
  }

List형태를 구현하는 방법은 다양하다.
직접 다양하게 사용해보면서 Widget의 특성을 파악하여 알맞게 사용할 수 있도록 해야한다.