반응형
✅ Widget이란?
- 독립적으로 실행되는 작은 프로그램
- 주로 바탕화면, 앱 화면 등에서 날씨·뉴스·생활정보 등을 보여줌
- 그래픽이나 데이터 요소를 처리하는 함수를 가짐
👉 일반적으로 말하는 위젯은 작은 프로그램이지만,
Flutter에서의 위젯은 더 넓은 개념을 가집니다.
✅ Flutter의 위젯
- UI를 만들고 구성하는 모든 기본 단위 요소
- 보이지 않는 레이아웃 요소까지도 위젯
- 즉, Flutter의 모든 것은 위젯
✅ Flutter 위젯의 종류
- Stateless Widget
- 상태가 없는 정적인 위젯
- 이전 상호작용의 값을 저장하지 않음
- 예: 텍스트, 아이콘, 이미지
- Stateful Widget
- 상태(state)를 추적하고 보존하는 위젯
- 사용자의 입력이나 데이터 변화에 따라 모양 변화
- 예: 버튼 클릭, 텍스트 입력, 데이터 로딩 상태
- Inherited Widget
- 위젯 트리 전체에 데이터를 전달하는 특수한 위젯
- 주로 상태 관리에 활용
✅ Stateless 위젯 특징
- 화면에 존재만 할 뿐 변화 없음
- 실시간 데이터 저장 불가
- 변화(모양·상태)를 유발하는 value 값 없음
✅ Stateful 위젯 특징
- 사용자의 상호작용(클릭, 입력 등)에 따라 모양이 변함
- 데이터를 받으면 UI가 다시 그려짐
✅ Flutter 위젯 트리 (Widget Tree)
위젯들은 트리(tree) 구조로 정리됩니다.
부모 위젯(Parent) 안에 자식 위젯(Child)을 포함할 수 있으며, 이를 Widget Tree라고 합니다.
예시 구조:
MyApp
└─ MaterialApp
└─ MyHomePage
└─ Scaffold
├─ AppBar
└─ Center
└─ Column
├─ Text
├─ Image
└─ Button
✅ 간단 예시 코드
1) Stateless Widget
import 'package:flutter/material.dart';
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const Text(
'안녕하세요! 저는 Stateless Widget 입니다.',
style: TextStyle(fontSize: 20),
);
}
}
import 'package:flutter/material.dart';
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _count = 0;
void _increment() {
setState(() {
_count++;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('버튼 클릭 횟수: $_count', style: const TextStyle(fontSize: 20)),
ElevatedButton(
onPressed: _increment,
child: const Text('클릭'),
),
],
);
}
}
📌 정리 (Summary)
Flutter의 모든 것은 위젯이다.
변화가 없는 UI → Stateless Widget
모양·상태가 바뀌는 UI → Stateful Widget
위젯은 항상 트리 구조로 구성된다.
반응형
'Flutter > Flutter' 카테고리의 다른 글
| [ Flutter ] Container 위젯 (0) | 2023.09.21 |
|---|
