GridView.builder

GridView.builder(
  keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
  itemCount: 20,
  padding: const EdgeInsets.all(
    Sizes.size10,
  ),
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: Sizes.size10,
    mainAxisSpacing: Sizes.size10,
    childAspectRatio: 9 / 20,
  ),
  itemBuilder: (context, index) => Column(
    children: [
      Container(
        clipBehavior: Clip.hardEdge,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(Sizes.size4),
        ),
        child: AspectRatio(
          aspectRatio: 9 / 16,
          child: FadeInImage.assetNetwork(
            fit: BoxFit.cover,
            placeholder: "assets/images/placeholder.jpg",
            image:
                "https://images.unsplash.com/photo-1673844969019-c99b0c933e90?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80",
          ),
        ),
      ),
    ],
  ),
)

이 코드는 Flutter에서 GridView.builder를 사용하여 그리드 형태의 리스트를 구성하는 방법을 보여줍니다. GridView.builder는 그리드 내에 동적으로 위젯을 생성하여 표시하는데 사용되며, 다양한 매개변수를 통해 그리드의 레이아웃과 동작을 세밀하게 제어할 수 있습니다.

GridView.builder의 주요 파라미터:

1. keyboardDismissBehavior: 사용자가 스크롤할 때 키보드를 어떻게 처리할지 결정합니다. ScrollViewKeyboardDismissBehavior.onDrag는 사용자가 그리드를 드래그할 때 키보드가 자동으로 숨겨지도록 설정합니다.

2. itemCount: 그리드에 표시할 항목의 총 개수입니다. 여기서는 20개의 항목을 생성하도록 설정되어 있습니다.

3. padding: 그리드 전체에 적용될 패딩입니다. 여기서는 모든 방향에 Sizes.size10의 패딩이 적용됩니다.

4. gridDelegate: 그리드의 레이아웃을 결정하는데 사용됩니다. SliverGridDelegateWithFixedCrossAxisCount는 고정된 수의 열(cross axis count)을 가진 그리드 레이아웃을 생성합니다.

   • crossAxisCount: 한 행에 표시될 항목의 수입니다. 여기서는 2로 설정되어 있습니다.
   • crossAxisSpacing와 mainAxisSpacing: 항목 간의 수평 및 수직 간격입니다.
   • childAspectRatio: 각 항목의 가로 세로 비율입니다.

5. itemBuilder: 그리드의 각 항목을 어떻게 구성할지 결정하는 함수입니다. BuildContext와 항목의 index를 매개변수로 받아 Column 위젯을 반환합니다.

   • Container는 이미지를 보여주는데 사용되며, Clip.hardEdge와 BorderRadius로 모서리를 둥글게 처리합니다.
   • FadeInImage.assetNetwork를 사용하여 네트워크 이미지와 플레이스홀더를 표시합니다.
   • Text는 설명을 표시하며, overflow와 maxLines로 텍스트의 표시 방식을 제어합니다.
   • Row는 사용자 프로필, 좋아요 아이콘 등을 수평으로 배치합니다.

GridView.builder 사용의 장점:

• 성능: GridView.builder는 보이는 부분의 위젯만을 렌더링하므로 대량의 데이터를 효율적으로 처리할 수 있습니다.
• 유연성: 다양한 파라미터를 통해 그리드의 외관과 레이아웃을 세밀하게 조정할 수 있습니다.
• 동적 콘텐츠 생성: itemBuilder를 사용하여 각 항목을 동적으로 생성하고 커스터마이징할 수 있습니다.

이러한 특성 덕분에 GridView.builder는 이미지 갤러리, 제품 목록 등 다양한 그리드 기반의 UI를 구현하는 데 매우 적합합니다.

GridView.builder는 Flutter에서 효율적으로 그리드 형식의 항목을 렌더링하는 위젯입니다. 이것은 목록과 유사하지만 그리드 형식으로 항목을 표시합니다. 아래는 위에서 제공된 GridView.builder 코드의 주요 부분에 대한 설명입니다:

1. keyboardDismissBehavior: 키보드가 열려 있을 때 사용자가 스크롤을 시작하면 키보드를 자동으로 닫습니다. 여기서는 ScrollViewKeyboardDismissBehavior.onDrag가 사용되어 스크롤 시 키보드가 닫힙니다.

2. itemCount: 그리드에 표시되는 항목 수를 지정합니다. 이 경우 총 20개의 항목이 표시됩니다.

3. padding: 그리드의 전체 패딩을 설정합니다. 여기서는 모든 쪽에 Sizes.size10만큼의 패딩이 추가됩니다.

4. gridDelegate: 그리드의 레이아웃을 조절하는 데 사용됩니다. SliverGridDelegateWithFixedCrossAxisCount를 사용하여 다음과 같은 속성을 지정합니다:

   • crossAxisCount: 수평축에 있는 열의 수입니다. 여기서는 2열로 설정되어 있습니다.
   • crossAxisSpacing: 열 간의 간격입니다. 여기서는 Sizes.size10으로 설정되어 있습니다.
   • mainAxisSpacing: 행 간의 간격입니다. 역시 Sizes.size10으로 설정되어 있습니다.
   • childAspectRatio: 자식의 가로세로 비율입니다. 여기서는 9:16으로 설정되어 있습니다.

5. itemBuilder: 실제 그리드 항목을 빌드하는 함수입니다. 이 함수는 현재의 BuildContext와 항목의 인덱스를 인수로 받아 Widget을 반환합니다.

   • 각 항목은 Column 위젯으로 구성되어 있으며, 여기에는 비디오 이미지가 표시되는 Container와 다른 정보(캡션, 사용자 아바타 등)가 포함됩니다.
   • Container에는 AspectRatio 위젯이 사용되어 9:16의 비율로 비디오 이미지를 표시합니다.
   • 이미지 로딩에는 FadeInImage.assetNetwork 위젯이 사용되어 이미지 로딩 시 페이드 인 효과와 함께 플레이스홀더 이미지를 표시합니다.

이 GridView.builder는 비디오 항목을 그리드 형식으로 표시하며, 각 항목은 이미지와 관련 정보로 구성되어 있습니다.

SliverGridDelegateWithFixedCrossAxisCount는 Flutter에서 그리드 레이아웃을 생성하는 데 사용되는 위젯입니다. 그리드 레이아웃은 주로 GridView나 그와 관련된 위젯에서 사용됩니다.

SliverGridDelegateWithFixedCrossAxisCount의 주요 특징은 고정된 수의 열(cross-axis count)을 가진 그리드를 생성한다는 것입니다. 여기에는 여러 설정을 지정할 수 있어 그리드의 동작과 모양을 정밀하게 조절할 수 있습니다.

주요 속성들은 다음과 같습니다:

1. crossAxisCount:

   • 이 속성은 그리드에 있는 열의 수를 정의합니다. 예를 들어, crossAxisCount: 2는 두 개의 열을 가진 그리드를 만듭니다.

2. mainAxisSpacing:

   • 주 축(보통 수직)을 따라 항목 간의 간격을 지정합니다.

3. crossAxisSpacing:

   • 교차 축(보통 수평)을 따라 항목 간의 간격을 지정합니다.

4. childAspectRatio:

   • 항목의 가로세로 비율을 지정합니다. 예를 들어, childAspectRatio: 0.5는 항목의 너비가 높이의 절반일 것임을 의미합니다.

5. maxCrossAxisExtent (이것은 SliverGridDelegateWithFixedCrossAxisCount에는 없고 SliverGridDelegateWithMaxCrossAxisExtent에 있습니다.):

   • 항목의 최대 교차 축(보통 너비)을 지정합니다.

예를 들어, 만약 두 개의 열과 각 항목 사이에 8의 간격을 원한다면 다음과 같이 작성할 수 있습니다:

SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 2,
  mainAxisSpacing: 8,
  crossAxisSpacing: 8,
)

이 위젯은 그리드 레이아웃의 유연성과 조절 가능성을 제공하여 사용자의 요구에 따라 다양한 그리드 스타일을 만들 수 있습니다.

SliverGridDelegateWithFixedCrossAxisCount는 Flutter에서 그리드 뷰를 레이아웃하는 데 사용되는 위젯 중 하나입니다. 이 위젯을 사용하면 격자의 가로축(cross axis)에 있는 항목의 수를 고정하고, 그에 따라 각 항목의 크기와 간격을 조절할 수 있습니다.

아래는 SliverGridDelegateWithFixedCrossAxisCount의 주요 속성들에 대한 설명입니다:

1. crossAxisCount: 이 속성은 격자의 가로축에 있는 항목의 수를 지정합니다. 예를 들어, crossAxisCount: 2는 두 개의 항목이 가로축에 배치되도록 합니다.

2. mainAxisSpacing: 세로축(main axis)에 있는 항목 사이의 간격을 지정합니다. 이 값은 항목과 항목 사이의 세로 간격을 픽셀 단위로 정의합니다.

3. crossAxisSpacing: 가로축(cross axis)에 있는 항목 사이의 간격을 지정합니다. 이 값은 항목과 항목 사이의 가로 간격을 픽셀 단위로 정의합니다.

4. childAspectRatio: 격자의 각 항목의 너비 대 높이 비율을 지정합니다. 예를 들어, childAspectRatio: 1.0은 각 항목이 정사각형이 되도록 합니다. childAspectRatio: 2.0은 항목의 너비가 높이의 두 배가 되도록 합니다.

SliverGridDelegateWithFixedCrossAxisCount를 사용하면 격자 레이아웃의 외관과 동작을 세밀하게 제어할 수 있습니다. 예를 들어, 여러분이 3x3, 4x4 등의 격자 레이아웃을 만들고 싶을 때 이 위젯을 활용할 수 있습니다.