본문 바로가기
Front-End/Flutter

[Flutter] 01. 위젯 계층 구조

by 삼준 2024. 3. 16.
반응형

1. 위젯(Widget)

플러터는 "모든" 요소(컨테이너, 텍스트, 버튼, 이미지 등등등)가 위젯(Widget)임.

 

위젯은 2가지 종류, Stateless Widget과 Stateful Widget으로 나뉨.

 

(각각 안드로이드 스튜디오에서 stless, stful + 엔터로 쉽게 생성 가능함.)

 

Stateless는 말그대로 상태가 없는 위젯으로, 한번 생성되면 바뀔 일이 없는 위젯임.

 

Stateful은 상태가 있는 위젯으로, 여기서 상태는 쉽게 말해 바뀔 수 있는 변수들을 의미하며, 상태가 바뀔 때 화면을 다시 빌드함.

 

2. 위젯 트리

플러터의 위젯들은 계층 구조를 가짐. 즉, 부모-자식 관계를 가지고 생성됨.

 

이 때문에 위젯을 만들때 보면 대부분의 위젯들이 child(또는 children) 속성이 있음.

 

가장 기본적으로 MaterialApp(또는 CupertinoApp)이라는 위젯이 최상단에 있고,

 

그 바로 아래 Scaffold가 있어야 함. (순서가 바뀌거나 하나가 없어지면 에러 발생)

 

그 아래부터는 자유롭게 생성이 가능함.

 

참고로, 가장 상단의 Material 또는 Cupertino App은 전체적인 컨셉?을 결정하는 용도로,

 

MaterialApp은 구글스러운 디자인을, CupertinoApp은 애플스러운 디자인을 지원함.

 

※ 친절한 설명

https://devocean.sk.com/blog/techBoardDetail.do?ID=165056

https://zeddios.tistory.com/1109

반응형

'Front-End > Flutter' 카테고리의 다른 글

[Flutter] 05. 색상  (0) 2024.03.16
[Flutter] 04. 반응형 위젯  (0) 2024.03.16
[Flutter] 03. showModalBottomSheet  (0) 2024.03.16
[Flutter] 02. 화면 전환, 이동  (0) 2024.03.16
[Flutter] 00. Flutter 카테고리에 대하여  (0) 2024.03.16

댓글