html이 문서라면 Flutter는 가지를 뻗은 나무다. 위젯으로 나무를 만든다.
도대체 이게 뭐야?
처음 프로젝트 pull 받았을 때 어지러웠던 건 세로로 엄청 긴 위젯 구조였다.
view단인 건 알겠는데 도대체 이 위젯이 뭐하는 놈인지 감이 오지 않았다.
lint는 따로 건드리지 않아서 있는 그대로 사용중이어서 자동 줄바꿈도 이상했다. 블록{} 단위로 줄바꿈을 하지 않아서였다. 태그로 예를 들자면 <여는태그>줄바꿈<닫는태그>가 익숙하던 터라 더 이상했다.
아무튼 뭐... 해야지 어쩌겠어...
Row, Wrap
요소를 가로로 배치할 때 주로 Row를 사용했다. 예를 들어 한 줄에 제품명과 장바구니 버튼이 있어야 한다면 요소를 생성하고 MainAxisAlignment 속성을 spaceBetween으로 설정해 각각 맨 왼쪽, 맨 오른쪽으로 배치하면 된다. css flex 속성과 동일하기 때문에 쉽게 사용할 수 있다.
Wrap이라는 놈도 있는데 Row와 같이 요소를 가로로 배치하지만 오버플로우가 발생하면 줄바꿈 한다. 어떤 요소를 배치하느냐에 따라 Row와 Wrap을 번갈아 사용했다. Text가 긴 경우 Wrap이 적절
Column
요소를 세로로 배치할 때 사용한다. 이유는 모르겠으나 간혹 Column 자식으로 Row를 배치하면 렌더링 에러가 나곤 했다. 다른 페이지에서는 되던데 이 페이지에서는 외않되? vscode 에러인가 싶어 껐다 켜보기도 하고 flutter clean을 해보기도 했다. 어찌저찌 하다보면 에러는 사라진다. 정확한 이유는 나도 ㅁ?ㄹ
MainAxisAlignment, CrossAxisAlignment
대충 이름만 보고 어떤 속성인지 이해했다. Row인 경우 MainAxisAlignment가 가로 정렬 방식, CrossAxisAlignment가 세로 정렬방식을 의미한다. Column은 Row 반대.
ListView
알아서 스크롤 되는 리스트 위젯
기준이 되는 데이터 length와 builder로 리스트 아이템 위젯을 쉽게 출력할 수 있다.
제일 마음에 드는 위젯
Inkwell, GestureDetector
둘 다 터치 이벤트가 있는 위젯이다. 겉보기에는 똑같아서 별 차이가 없어보인다. onTap으로 동작을 수행하는 것도 동일하다. 웹에서 label과 radio button을 함께 사용해서 label을 클릭했을 때 radio button이 동작하는 것 같은 효과를 구현할 수 있다. 가뜩이나 모바일은 화면이 작기 때문에 이런 세세한 부분이 중요하다고 본다.
두 위젯의 가장 큰 차이점이라면
- 터치 피드백, 애니메이션 유무: Inkwell은 내장되어있고 GestureDetector는 직접 구현해야 함
- 위젯 종속성: Inkwell은 잧 위젯, GestureDetector는 자체 위젯이 아닌 자식을 감싸야 한다.
- 가이드라인: Inkwell은 Material Design 가이드라인을 준수해야 할 때, GestureDetector는 커스텀 동작을 구현할 때 사용
나는 주로 Radiobutton + label 조합에 GestureDetector를 썼다.
기타 자주 쓰는 위젯을 추가하도록 하겠다...
