[Flutter] 버튼 공백 지우기 | ElevatedButton와 GestureDetector 비교 | 위젯 분석

문제상황

 

'시작일' 컨테이너 내부의 아이콘 버튼들을 우측 끝에 두고 싶었다.

저 버튼과 버튼을 둘러싼 컨테이너나 패딩 위젯에도 padding, margin 등의 속성에

공백을 싹 줄였는데도 화면에선 공백이 있는 것처럼 보인다.

 

 

버튼을 꾹 눌러보면 그 버튼의 크기가 보이는데 분명 여백이 없어 보인다.

 

 

 

달력도 꾹 누르면 마찬가지로 저렇게 공백이 없다.

 

---

위젯 트리

원인을 모르겠어서, 직접 저 공백의 출처를 밝혀내고자 위젯 트리에서 해당 위젯을 눌러 보기로 했다.

 

 

웹에서는 f12(개발자도구)를 키면 Elements 탭에서 select element to inspect 버튼을 통해

해당 element를 눌러서 그 위치의 코드를 확인할 수 있다.

 

TA 하면서 이 작업을 정말 많이 거쳤는데...

모바일에서도 이 작업이 필요한 순간이 있었지만 flutter의 Hot reload 기능으로 인해 굳이 찾아보지 않았었다.

(그냥 코드를 바꿔가며 공백이나 다른 위젯들을 조정하고 ctrl+s 하면 바뀐 화면을 바로 확인 가능하니까)

 

하지만 Hot reload 기능과 관계없이 내 코드엔 공백이 없는데 공백이 자꾸 안없어지니까 직접 위젯의 영역 확인이 필요했기 때문에 후술할 과정을 거치게 되었다.

 

---

해결

main.dart를 run하거나 프로젝트의 루트 디렉토리에서 flutter run을 실행하게 되면,

 

이렇게 링크를 볼 수 있다.

 

이 링크를 눌러서 바로 들어가면 

 

 

이런 페이지가 나온다.

 

[참고]

안드로이드 스튜디오 내에서 DevTools 를 선택하여

해당 페이지로 이동 후 url을 입력해도 되지만,

그냥 콘솔창에 뜬 url을 클릭해서 바로 이동하는 것이 더 간편하다.

 

 

Flutter Inspector 탭을 누르면

이런 위젯 트리를 확인할 수 있는데, 

 

왼쪽에 Select Widget Mode 를 누르고 내가 알고 싶은 위치에 있는 위젯 토글을 누르면

 

지금 실행중인 에뮬레이터에서 어플의 어디 부분 무슨 위젯인지 알 수 있게 된다.

 

혹은 Select Widget Mode 를 누르면 뜨는 에뮬레이터 좌측 하단 돋보기 버튼을 누르고,

화면의 위젯을 직접 눌러봐도 선택이 가능하다.

 

문제의 Row를 눌러서,,, 파고 들어가보니,,,

 

띠용👀 너 왜 그렇게 공간을 많이 차지하니...?

 

 

 

충격실화) 사실 꾹 눌렀을 때 이 동그란 x부분은 "버튼"의 크기가 아닌 "아이콘 이미지"의 크기 였던 것이었다..

실제 ElevatedButton은 공간을 네모낳게 크게 차지하고 있던 것...!

 

---

GestureDetector 사용

[변경 전]

ElevatedButton(
  style: ElevatedButton.styleFrom(
      minimumSize: Size(20, 20),
      padding: EdgeInsets.symmetric(horizontal: 0.0),
      backgroundColor: Colors.white,
      surfaceTintColor: Colors.white,
      elevation: 0,
   ),
   onPressed: () => _selectStartDate(context),
   child: Image.asset('assets/ic-calendar.png', width: 25, height: 25),
),

 

 

 

[변경 후]

GestureDetector(
  onTap: () {
    _selectStartDate(context);
  },
  child: Image.asset(
    'assets/ic-calendar.png',
    width: 25,
    height: 25,
  ),
)

 

GestureDetector는 ElevatedButton과 달리 child에 있는 위젯 그대로를

보여주기 때문에 여백 없이 보여주는 것이 가능하다.

 

보통 ElevatedButton와 GestureDetector를 크게 구분 없이 사용하고,

버튼 느낌이면 ElevatedButton을 주로 사용했는데 이런 과정을 거치고 차이점을 알게 되었다...ㅎ (삽질 아니고 연구임)

 

 

GestureDetector로 바꾸고 나니 갑자기 사이가 좋아진 초기화 아이콘과 달력 아이콘...

진작에 친하게 지내지 그랬니

 

 

아이콘도 더 예쁜걸로 바꾸고, 공간도 조절해보았어요🤗

 

위젯 트리로 확인했을 때는 이렇게 보인다.

 

 

 

 

 

[최종]

 

기능 연동까지 마친 날짜 필터링 최종본이다!

// 초기화 버튼
GestureDetector(
  onTap: () {
    _deleteSelectedStartDate();
  },
  child: Image.asset(
    'assets/ic-cancel.png',
    width: 15,
    height: 15,
  ),
),

SizedBox(width: 5,),

// 달력 버튼
GestureDetector(
  onTap: () {
    _selectStartDate(context);
  },
  child: Image.asset(
    'assets/ic-calendar.png',
    width: 25,
    height: 25,
   ),
),

SizedBox(width: 11,),

 

 

flutter를 사용하는 대부분의 사람들은 이런 위젯 트리를 통한 검사 기능이 있는지도 모르는 사람들이 많을 것이다.

내가 겪은 이슈처럼 꼭 위젯을 눌러봐야 원인을 알 수 있는 경우 아주 유용하니까 한 번쯤 시도해보면 좋을 것 같다...!

 

+) 여담

위에 만들어둔 것은 디자인 없이 기능 테스트를 위해 경쟁사 앱 참고해서 만든 것이고

디자인이 나오게 되면서 아예 싹 갈아엎게 되었다.

 

사용성은 바로바로 필터링 적용이 가능하도록 하는게 좋은데,

다른 화면과의 통일성을 위해 아마 화면 교체가 있을 것 같다! ㅋㅋㅋㅎㅎ