[개발하는남자 핸즈온 플러터] 챕터16 상품 등록 페이지 개발 2 리뷰

개요

안녕하세요, 개발하는남자 개남입니다. 지난 포스트에 이어서 챕터 16 상품등록 페이지 두번째 파트 관련 리뷰를 진행하고자 합니다. 589페이지부터 ~ 619페이지까지의 내용입니다. 이번 챕터 리뷰는 별다른 최신화 버전으로 할 것도 없고 책에 내용을 잘 따라오면 큰 문제는 없어 보여 생략하려고 했으나 한가지 소개할만한 위젯이 있어서 그것만 다루고 바로 다음 챕터 리뷰진행하도록 하겠습니다.

소스코드 : https://github.com/sudar-life/bamtol_market_clone_coding
브런치 정보 : chapter15
플러터 버전 : Flutter 3.32.5
Dart 버전 : Dart 3.8.1

완료 버튼 활성/비활성 처리를 위한 IgnorePointer 위젯 사용

책에서 상품 등록 페이지에서 이미지와 제목이 필수값으로 검증하여 완료 버튼을 활성화/비활성화 처리를 다음과 같은 소스코드로 관리 하고 있습니다.

       Obx(
            () => GestureDetector(
              onTap: () {
                if (controller.isPossibleSubmit.value) {
                  controller.submit();
                }
              },
              child: Padding(
                padding: EdgeInsets.only(top: 20.0, right: 25),
                child: AppFont(
                  '완료',
                  color: controller.isPossibleSubmit.value
                      ? const Color(0xffED7738)
                      : Colors.grey,
                  fontWeight: FontWeight.bold,
                  size: 16,
                ),
              ),
            ),
          )

이렇게 처리해도 문제 없이 isPossibleSubmit의 상태에 따라 버튼 색상이 바뀌거나 터치해도 if문으로 분기를 걸어줬기 때문에 활성/비활성이 처리됩니다.

하지만 이방법외에 IgnorePointer위젯을 사용하여 더욱 깔끔하게 이벤트 처리 하도록 만들어줄 수 있습니다.

         Obx(
            () => IgnorePointer(
              ignoring: !controller.isPossibleSubmit.value,
              child: GestureDetector(
                onTap: () => controller.submit(),
                child: Padding(
                  padding: EdgeInsets.only(top: 20.0, right: 25),
                  child: AppFont(
                    '완료',
                    color: controller.isPossibleSubmit.value
                        ? const Color(0xffED7738)
                        : Colors.grey,
                    fontWeight: FontWeight.bold,
                    size: 16,
                  ),
                ),
              ),
            ),
          )

GestureDetector의 이벤트(onTap)은 별도의 분기처리 하지 않고 이벤트를 연결해주고 있습니다. 대신 IgnorePointer위젯에 ignoring 필드값에 상태를 넣어줌으로 하위의 tap 이벤트를 무시 하도록 만들었습니다.

이방법의 특징은 별도의 if문을 쓰지 않아도 되고 깔끔하게 소스를 작성할 수 있다는 것입니다.

단, 상태의(False)상태에도 특별한 로직이벤트를 넣어야 할때는 IgnorePointer위젯을 사용하는 것보다 GestureDetector의 onTap에서 분기를 주는 것으로 해결해야 합니다.