본격 개발을 시작하기 전에
Flutter에 대해 좀 알아봐야겠다
Flutter 개발자 사이트로 간다
Sample & tutorials
왼쪽 메뉴에 Sample & tutorials에 있는
Flutter Gallery를 눌러 구경했다
거의 완벽하게 반응형으로 구현돼있었다.
gitHub에서 해당 소스도 볼 수 있으니
필요한 UI가 있으면
소스를 참고할 수 있을 것 같다
Widgets
Flutter는 화면이 어떻게 돼있는지 파악하기 위해
왼쪽 메뉴 Development - User Interface를
훑어본다
중요한 점
1. Flutter는 widget으로 UI를 구축한다.
2. widget은 현재(그 시점)의
configuration과 state에 따라
보여지는게 달라진다.
3. widget은 state가 바뀌면
설명(보여지는 것)을 재구성한다.
React에서 영감을 받았다고 명시해놓았듯
비동기 프로그래밍에 특화돼있는 것 같다
대표적이고 기본적인 widget은
Text, Row/Column, Stack, Container
4가지라고 콕 찝어서 소개하는 만큼
그만큼 주로 많이 쓰일 것이다
iOS 기준으로
Text는 UITextField나 UILabel,
혹은 그 둘을 혼합해놓은
UITextView의 간단한 형태일 것 같다
Row/Column과 Stack이 헷갈렸는데
각 예제를 보니
Row/Column은 UIStackView와 흡사하고
Stack은 말 그대로 View가 쌓여있는 형태인 것 같다
Container는 UIView와 비슷하게
자신이 하나의 뷰가 될 수도 있고
child를 둬서 말 그대로 Container가 될 수 있다
widget들을 diagram 형태로 보면 이렇다
Container는 가장 기본적인 widget이며
다른 widget의 child가 되어
또 다른 widget을 child로 가질 수 있다
기본 widget 4가지를 사용하여
아래와 같은 하단 navigation 형태를 구현해보면
이렇게 구성해 볼 수 있을 것 같다
4가지 widget을 제외하고
Image, Icon 등 다른 widget들이 있지만
추후에 필요할 때 하나씩 찾아보기로 하고
여기서 이만
끝
'이상 > Flutter' 카테고리의 다른 글
| [Flutter] macOS Flutter 설치 및 설정 (0) | 2023.03.04 |
|---|
