[Flutter] Flutter widget (위젯 개념/ State)

🎫 이전 학습

2022.09.09 - [기타 학습] - [Flutter] Dart 문법3 (제어문/ 조건문/ 반복문)

 

🎇 2주차 스터디 목표

• Flutter 기본 Widget 
• Layout 구성

---

이번주는 진짜 플러터로 들어갔다.

플러터에서 가장 중요한 개념이 바로 위젯이다.

 

Widget

플러터에서 위젯은 UI를 구성하는 기본이 된다. 플러터에는 "everything is a widget" 이라는 말이 있을 정도로 위젯이 모든 개발의 기본이 된다. 플러터로 앱을 만드는 과정은 레고를 하나하나 조립하는 것과 같다고 소개된다.

 

Widgets describe what their view should look like given their current configuration and state.

Building an app Flutter is like building a lego set -- piece by piece.

https://flutterbyexample.com/lesson/about-flutter

 

 

플러터의 위젯 카테고리를 보면 이렇게 나눠져있다

• Basic : Appbar, Column, Container, icon, Text ... 
• Layout : Align, AspectRatio ...
• Input : Form, FormField
• Styling : MediaQuery, Padding, Theme

등 자세한 카테고리는 밑에서 확인...

 

https://docs.flutter.dev/development/ui/widgets

Widget catalog

 

 

위젯에는 정적인 위젯(Stateless Widget)과 동적인 위젯(Stateful Widget)로 나눈다.

 

State를 정의하자면 위젯의 lifecycle 안에서 변경될 수 있는 데이터이다.

 

정적인 위젯은 움직임이 없고 한번 정의되면 변화가 없는 고정된 위젯을 말한다.

동적인 위젯은 움직임이 있고 사용자와의 상호작용에 쓰이는 위젯을 말한다.

 

 

여기서 TISTORY 로고가 있는 곳이 정적인 위젯이 될 것이고

아이디가 입력되는 곳이 동적인 위젯이 될것이다.

 

 

Widget Tree

플러터는 위젯을 기반으로 개발되며 그게 트리 구조로 구성된다. 앱의 루트부터 말단까지 모두가 위젯이다.

위젯에는 상속 위젯도 있어 부모-자식 형태도 가질 수 있다.

 

https://docs.flutter.dev/development/ui/layout#lay-out-a-widget

 

---

참고

https://docs.flutter.dev/development/ui/widgets-intro

Introduction to widgets

 

https://flutterbyexample.com/

Home