고투런 세번째! FlutterCodeLab에서 MDC-102 Flutter를 과제로 진행했다.
이번 과제는 GridView를 사용하는게 메인이었다. 카드를 아래 사진처럼 나열해보며 일반적인 쇼핑몰 앱의 뷰단을 만들어보았다.
나는 평소에 GridView보다는 ListView를 더 많이 쓰는데, 이번 과제를 하면서 GridView의 속성이나 특징을 살펴보는 기회가 되었다.
질의 응답
이번 시간부터는 멘토님이 미리 퀴즈 3개를 내주시고 답변을 준비해 오는 식으로 진행됐다.
1. GridView와 유사한 형태인 Wrap 이라는 Widget도 존재 합니다. 두 Widget간의 차이는 무엇일까요?
내 답변 - Wrap위젯은 행이나 열의 길이를 초과했을때 자동으로 줄바꿈을 해주는 위젯이다. 기기마다 다른 길이 때문에 발생하는 오류를 방지하기 위해 자동으로 줄넘김을 해주는 용도로 사용. 적은 수, 유연한 레이아웃에 적합. 다수의 하위목록 생성시 성능문제 있을 수 있음.
GridView는 행과 열에 배치되는 context의 개수를 지정해서 공간에 알맞게 배치. n by n 으로 위젯들을 규칙적으로 나열할때 사용한다. 스크롤 동작 내장. 자동 스크롤 되지 않음. 스크롤 하기 위해선 ScrollView로 래핑필요. 다수의 그리드 항목을 정밀하게 제어해야할 때 적합. 많은 하위목록 처리시에 더 나은 성능 발휘.
요약하면 고정 또는 동적 크기 조정 및 스크롤 동작이 있는 그리드 레이아웃이 필요할 때 'GridView'를 선택하고, 래핑 기능이 있는 유연한 레이아웃이 필요하고 내장 스크롤이 반드시 필요하지 않은 경우 'Wrap'을 고려.
멘토님의 설명을 덧붙이면 GridView는 끝을 알 수 없다. 인스타그램 피드만들기 좋다.
Wrap은 개수가 정해져있는 팁 같은 위젯을 사용할 때 좋다.
2. Scaffold에 AppBar 에 들어가는 Widget은 일반 Widget이 아닌 PreferredSizeWidget 이라는게 쓰입니다. 이 Widget과 일반 Widget의 차이는 무엇일까요?
내 답변 - 자식 위젯의 레이아웃에 영향을 미치지 않고, 사용할 수 있는 기본 크기만을 사용한다.
커스텀 앱바를 만들때 사용한다(높이지정, 그라데이션 색상 옵션 등 추가 가능)
PreferredSize 클래스를 사용하여 위젯의 높이를 지정, 앱 바의 높이를 표준화하고 일관된 디자인을 유지
디자인 요구사항에 맞는 커스텀 앱바 구현 가능.
- kToolbarHieght 기본 앱바 높이. k는 상수(const)라는걸 의미하는 은어 같은 단어
3.Card Widget에는 Shadow가 기본으로 제공되는데요, 만약 디자이너와 협의 한 디자인 가이드에 Shadow에 대한 내용이 이미 있었다면, 어떻게 하면 좋을까요?
내 답변 - Container위젯의 boxDecoration 옵션을 이용해 shadow를 직접 구현.
(+질문) 4.만약 map과 Column, Row를 사용해서 ListView처럼 구현하면 성능적인 이슈가 가장 문제가 될까요?
멘토님 설명 - 네. 한번에 모든 위젯을 다 그리기 때문에 성능적인 문제가 있습니다. 만약 스크롤 해서 10개씩 불러온다 하더라고 위에 쌓이는 위젯들을 dispose하지 않고 계속 그리고 있기때문에 쌓이면 쌓일수록 성능저하가 생깁니다. 그래서 ListView.Builder나 GrabView.Builder 처럼 Builder를 사용하는 위젯을 쓰면 성능저하를 방지할 수 있습니다.
회고
크 이번에도 알고 있던것들도 있었지만 더 깊게 알게된것들이 있고, 특히 4번 질문은 내가 한건데 뭔가 느낌적으로는 알고있는데 더 확실하게 설명을 할 수 있게 됐다.
코드 구현 과제 자체는 쉽지만 거기서 나오는 질문이나 멘토님이 따로 해주시는 질문에 대한 답변을 찾는 과정이 공부가 많이 되고있다~
