Flutter에서 갤러리 이미지 선택 UI: 간격과 레이아웃 최적화 (이미지 썸네일)

소개

Flutter로 이미지를 선택하여 화면에 표시할 때, 균등한 간격을 유지하면서 썸네일 이미지를 정렬하는 UI를 구현하는 방법을 다룹니다. 이 글에서는 Wrap 위젯과 LayoutBuilder를 활용해 동적인 간격 계산과 정사각형 썸네일 UI를 구성하는 방법을 설명합니다.

---

1. 핵심 코드 설명

1. LayoutBuilder를 활용한 가로 간격 계산

LayoutBuilder는 부모 위젯의 크기를 계산하는 데 유용합니다. constraints.maxWidth를 통해 가용 너비를 가져와 한 줄에 몇 개의 아이템을 배치할지 계산합니다.

final double availableWidth = constraints.maxWidth; 
final int itemsPerRow = (availableWidth / (썸네일 너비 + 간격)).floor();
final double spacing = (availableWidth - (itemsPerRow * 썸네일 너비)) / (itemsPerRow - 1);

 

• itemsPerRow: 한 줄에 배치할 수 있는 아이템 개수.
• spacing: 아이템 간의 가로 간격.

---

 

2. Wrap 위젯을 활용한 정렬

Wrap은 여러 줄 레이아웃을 지원하며, spacing과 runSpacing 속성으로 간격을 조정할 수 있습니다.

Wrap(
  spacing: spacing, // 가로 간격
  runSpacing: 8.h, // 세로 간격
  children: [...],
);

• spacing: 각 이미지 사이의 가로 간격.
• runSpacing: 줄과 줄 사이의 세로 간격.

---

3. 썸네일 UI 구성

각 이미지 썸네일은 고정된 크기로 설정하며, 삭제 버튼을 오른쪽 상단에 배치합니다. 이를 위해 Stack과 ClipRRect를 사용합니다.

SizedBox(
  width: 72.w,
  height: 72.w,
  child: Stack(
    alignment: Alignment.topRight,
    children: [
      ClipRRect(
        borderRadius: BorderRadius.circular(8.r),
        child: Image.file(
          File(_selectedImages[index]),
          width: 72.w,
          height: 72.w,
          fit: BoxFit.cover,
        ),
      ),
      GestureDetector(
        onTap: () => _removeImage(index),
        child: Container(
          width: 18.w,
          height: 18.w,
          decoration: BoxDecoration(
            color: Colors.red,
            shape: BoxShape.circle,
          ),
          child: Icon(
            Icons.close,
            color: Colors.white,
            size: 14.sp,
          ),
        ),
      ),
    ],
  ),
);

 

요소 설명:

• SizedBox: 정사각형 크기를 고정합니다.
• ClipRRect: 이미지를 둥근 모서리로 자릅니다.
• Image.file: 선택한 이미지 파일을 표시합니다.
• GestureDetector: 삭제 버튼을 눌렀을 때 이벤트를 처리합니다.
• Stack: 이미지와 삭제 버튼을 겹치게 배치합니다.

---

전체 코드

아래는 전체 코드입니다:

if (_selectedImages.isNotEmpty)
  LayoutBuilder(
    builder: (context, constraints) {
      // 화면 너비에 따라 spacing 계산
      final double availableWidth = constraints.maxWidth;
      final int itemsPerRow = (availableWidth / (72.w + 8.w)).floor();
      final double spacing = (availableWidth - (itemsPerRow * 72.w)) / (itemsPerRow - 1);

      return Wrap(
        spacing: spacing, // 계산된 가로 간격
        runSpacing: 8.h, // 세로 간격
        children: List.generate(_selectedImages.length, (index) {
          return SizedBox(
            width: 72.w, // 고정된 너비
            height: 72.w, // 고정된 높이 (정사각형)
            child: Stack(
              alignment: Alignment.topRight,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(8.r),
                  child: Image.file(
                    File(_selectedImages[index]),
                    width: 72.w,
                    height: 72.w,
                    fit: BoxFit.cover, // 이미지가 컨테이너에 맞게 잘림
                  ),
                ),
                GestureDetector(
                  onTap: () => _removeImage(index), // 삭제 버튼 클릭 시 이미지 제거
                  child: Container(
                    width: 18.w,
                    height: 18.w,
                    decoration: BoxDecoration(
                      color: Colors.red, // 삭제 버튼 배경색
                      shape: BoxShape.circle,
                    ),
                    child: Icon(
                      Icons.close,
                      color: Colors.white, // 삭제 버튼 아이콘 색상
                      size: 14.sp,
                    ),
                  ),
                ),
              ],
            ),
          );
        }),
      );
    },
  ),

 

Flutter로 썸네일 이미지 리스트를 화면 너비에 맞게 정렬하는 방법을 소개했습니다. LayoutBuilder와 Wrap 위젯의 조합은 동적 간격 계산과 정렬 문제를 해결하는 데 매우 유용합니다. 이 방법을 활용해 보다 깔끔한 UI를 구성해보세요!