[Flutter] Clone - 당근마켓27(InputScreen - layout/제거버튼)

이번에는 InputScreen 에서 이미지 제거용 버튼을 구현해보겠습니다.

개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1

 

 

 

오늘 구현한 화면은 아래와 같습니다. 단계별로 변경된 부분입니다.

오른쪽 마지막 캡쳐가 오늘의 최종버전입니다.

 

 

 

 

./src/screens/input/multi_image_select.dart - Stack 으로 wrapping 후, Positioned & IconButton 으로 구현.

 

...List.generate(
  20,
// Wrapping by Stack
  (index) => Stack(
    children: [
      Padding(
        // 패딩 - 위에서 전체를 16으로 처리해서 여기서는 위/아래/오른쪽만 16 처리할 것,
        padding:
            const EdgeInsets.only(right: padding_16, top: padding_16, bottom: padding_16),
        child: ExtendedImage.network(
          'https://picsum.photos/200',
          width: imgSize,
          height: imgSize,
          fit: BoxFit.cover,
          // shape 을 지정해야만 borderRadius 설정이 정상 동작함,
          borderRadius: BorderRadius.circular(padding_16),
          shape: BoxShape.rectangle,
        ),
      ),
// Adding Positioned & IconButton
      Positioned(
        top: 0,
        right: 0,
        // IconButton 의 기본 사이즈는 24 이므로 패딩 8+8 을 더해서 40 으로 설정,
        width: 40,
        height: 40,
        child: IconButton(
          padding: const EdgeInsets.all(8),
          onPressed: () {
            debugPrint('remove picture $index');
          },
          icon: const Icon(Icons.remove_circle),
          color: Colors.black54,
        ),
      ),
    ],
  ),
),