Flutter에서 Widget Tree와 layout 디자인 방법

Flutter에서 Widget은 Text, Icon, Image, Button, List, ListView와 같은 UI Component를 구성하는 Class입니다. Flutter App은 Widget과 Layout을 조합하여 Widget Tree를 구성하고 최종적으로 UI를 표시합니다.

Flutter에서는 상당히 많은 Widget을 지원하기 때문에 모두 외울 필요는 없고, 자주 사용하는 Widget 정도의 내용만 확인하고 필요에 따라서 공식 문서에서 찾아서 사용하는 것을 추천드립니다. Widget 구성 Tutorial 은 링크를 확인해주세요.

Widget Tree

Flutter에서 Widget Tree는 React의 component tree 또는 Html DOM tree와 같은 개념으로 UI Compoent를 모두 사각형으로 분해합니다. Flutter 공식 문서에 있는 Navigator 메뉴의 Widget Tree는 다음과 같습니다.

최상단 Container: Navigator bar 전체를 포함, Html <div> tag와 동일합니다.
Row: Fluxbox으로 하단 아이콘과 Text box를 가로 방향으로 균등하게 배치합니다.
Column: Icon과 Text를 감싸는 Contaier를 세로 방향으로 균등 배열하는 Fluxbox입니다.
하위 Container: Text를 감싸는 Container입니다.
Icon과 Text: 이미지와 Text를 나타내는 Widget입니다.

Flutter widget tree (출처: https://docs.flutter.dev/development/ui/layout)

WigetTree 구성 예

일반적으로 ROW와 Column으로 Widget을 균등하게 배치하게 됩니다. 아래 예에서는 2개 Widget을 포함하는 ROW와 4개의 Widget을 포함하는 Column으로 Layout을 구성한 경우입니다. Column은 각각의 Text, Icon과 Nested Row로 구성된 예입니다.

Widget Tree 구성 예 (출처: https://docs.flutter.dev/development/ui/layout)

Widget Tree 구성법: Layout Widget과 Visible Widget

Layout Widget은 UI Component의 위치를 지정하고, Visible Widget을 감싸고 있습니다. Visible Widget은 Icon, Text와 같이 GUI를 나타내는 Widget입니다. Widget을 구성하는 방벙은 다음과 같습니다.

Layout Widget 선정
Visible Widget (Icon, Text, Image 등)을 생성
Widget의 build() 함수에서 Layout Widget의 child 또는 Children에 Visible Widget을 포함시킴

Layout Widget 종류 (링크)는 Single Child Widget과 Mutiple children widget으로 구분할 수 있고, 대표적으로 많이 사용하는 Widget은 아래 그림과 같이 Container, GridView, ListView, Stack, Card, ListTile 등이 있습니다.