플러터[Flutter] GestureDetector 동작방식과 렌더링 및 히트 테스팅 매커니즘 파헤쳐보기

1. 문제의 발단

개발을 하던 중에 위 사진에 빨간색 박스 부분, 즉 제품 검색 가로 부분 중 어디를 클릭해도 GestureDetector를 통해

인식을 하게 만들고 싶었습니다.

Row(
  children: [
    Expanded(
      child: GestureDetector(
        onTap: () {
          print('Clicked');
        },
        // 한 영역 부분 어디를 클릭해도 인식되도록 컨테이너로 감싸기
        child: Container(
          child: const Row(
            children: [
              Icon(Icons.search, color: Colors.grey),
              SizedBox(width: 10),
              Text('제품 검색', style: TextStyle(color: Colors.grey)),
            ],
          ),
        ),
      ),
    ),
    ... [그 외 코드]
  ],
);

 

 

일단 [ 아이콘 - 텍스트 ] 구조에 Container를 감싸서 전체가 인식되도록 구현하자! 라는 생각이었습니다.

하지만 실제로 인식되는 부분은

이렇게 자식이 가질 수 있는 최대 넓이만큼만 인식이 되었습니다.

그래서 width를 double.infinity 를 해보기도 하고 Row에 mainAxisSize를 max로 주어도 결국은 똑같았습니다.

그래서 원인을 알아보기 위해 Container가 너비를 어느정도 차지하는지 알기 위해 Color로 체크를 해보았습니다.

아니 뭐야! 정상적으로 너비는 잘 먹고 있잖아!

그래서 다시 클릭을 해보았는데 인식이 되는 것입니다....

처음에는 프레임워크 오류인줄 알고 껏다 키고 다시 반복했는데 오류는 해결되지 않았습니다.

컨네이너에 색상이 없을때 / 색상이 있을때 인식 부분

그래서 도대체 색깔을 입혀야만 왜 너비를 인식하고 GestureDetector도 인식을 하게 되는 것일까 찾아보았습니다.

 

---

그래서 찾아본 결과 결론적으로는

GestureDetector의 동작방식과 위젯의 렌더링 및 히트 테스팅 매커니즘과 관련이 있었습니다.

Flutter에서 위젯은 렌더링 트리에 실제로 그려질 때만 히트 테스트(즉, 터치 이벤트)에 참여 한다고 합니다.
즉, Container와 같은 위젯이 특정한 크기를 배정받지 않고 배경색도 없을 경우에는
Flutter 렌더링 엔진 입장에서는 그 위젯이 실제로 화면에 표시되는 영역이 없다고 판단하다고 합니다.
(이 부분은 아마도 필요없는 리소스 낭비를 방지하기 위해서 라고 생각합니다)
따라서 GestureDectector가 감지하는 영역도 실제로 없다고 뜨는 것이고요

 

일단 원인은 알았으니 해결법을 알아봅시다.

일단 배경색을 넣으면 해결되는 것 같네요 그렇다고 내가 지금 무슨 색을 넣었는지 확인하는 것도 번거로우니

color: Colors.transparent, // 투명한 배경색 추가

이렇게 넣으면 문제 해결 입니다.

 

---

 

Flutter를 공부하다보면 UI를 개발하다보면 새롭게 알아가는 재미가 있는 것 같습니다.

단순히 그림 그리듯이 UI를 작성하는 것보다 렌더링에 원리를 알아가며 배우는 것도 재밌네요.

혹시 궁금하신 점이나 질문 있으면 답변 주세요. 읽어주셔서 감사합니다.

 

전체 코드

코드 보기

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class SearchProduct extends StatelessWidget {
  const SearchProduct({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: GestureDetector(
            onTap: () {
              print('Clicked');
            },
            child: Container(
              // color: Colors.pink,
              child: const Row(
                mainAxisSize: MainAxisSize.max,
                children: [
                  Icon(Icons.search, color: Colors.grey),
                  SizedBox(width: 10),
                  Text('제품 검색', style: TextStyle(color: Colors.grey)),
                ],
              ),
            ),
          ),
        ),
        Container(
          height: 30,
          width: 1.0,
          color: Colors.black.withOpacity(0.3),
          margin: const EdgeInsets.symmetric(horizontal: 10.0),
        ),
        IconButton(
          onPressed: () {},
          icon: SvgPicture.asset('assets/icons/camera.svg'),
        ),
      ],
    );
  }
}