본문 바로가기
SW 개발/FrontEnd(Flutter)

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

by Kibua20 2021. 12. 29.
728x170

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로 구성된 예입니다.  

WigetTree 구성 예&nbsp;(출처: https://docs.flutter.dev/development/ui/layout)
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을 구성하는 방벙은 다음과 같습니다. 

 

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

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

&nbsp;자주 사용하는 Layout Widget: Container, GridView, ListView, Card, ListTile

 

Layout Widget: Row, Column, Expaned

관련 글:

[SW 개발/FrontEnd(Flutter)] - Flutter 특징과 개발환경 설정 방법

[SW 개발/FrontEnd(Flutter)] - Android Studio와 Visual Code로 Flutter Project 프로젝트 생성

[SW 개발/FrontEnd(Flutter)] - Flutter Stateless와 Stateful Widget 개념과Life Cycle, 대표 Widget(MaterialApp, Scaffold)

[SW 개발/FrontEnd(Flutter)] - Flutter Parent-Child Widget간 State 전달과 업데이트 방법

[SW 개발/Python] - Selenium 4.0 개선 사항 정리 - WebDriver 자동 로딩 가능

[SW 개발/Data 분석 (RDB, NoSQL, Dataframe)] - Keras 기계 학습 모델의 저장과 로드 방법 (Sample code)

[SW 개발/Data 분석 (RDB, NoSQL, Dataframe)] - Keras를 이용한 다중 클래스 분류: softmax regression (Sample code)

[SW 개발/Python] - Python 정규식(Regular Expression) re 모듈 사용법 및 예제

[SW 개발/Data 분석 (RDB, NoSQL, Dataframe)] - Python Selenium과 BeautifulSoup을 활용하여 Google PlayStore 사용자 리뷰 (댓글) 가져오기 (Sample Code 포함)

[개발환경/git] - GitHub 아이디/패스워드 입력 없이 사용하는 방법

그리드형



댓글0