플러터 위젯 간략 설명

GPT 에 '플러터 위젯 설명' 요청한 답변..

 

---

 

Flutter에서 위젯(Widget)은 모든 UI 요소의 기본 단위입니다. Flutter 앱은 위젯 트리로 구성되며, 화면에 표시되는 모든 요소(텍스트, 버튼, 레이아웃 등)가 위젯입니다. Flutter의 위젯은 불변(immutable)이며, 상태를 변경할 수 있는 위젯은 상태(State) 객체와 함께 사용됩니다.

 

---

📌 Flutter 위젯의 종류

Flutter에는 여러 가지 위젯이 있으며, 크게 다음과 같이 분류할 수 있습니다:

1. 기본 위젯 (Basic Widgets)
2. 레이아웃 위젯 (Layout Widgets)
3. 입력 위젯 (Input Widgets)
4. 네비게이션 및 라우팅 위젯 (Navigation Widgets)
5. 애니메이션 위젯 (Animation Widgets)
6. 상태 관리 위젯 (Stateful Widgets)
7. 그림 및 그래픽 위젯 (Drawing and Graphics Widgets)

---

1. 기본 위젯 (Basic Widgets)

기본적인 텍스트, 이미지, 아이콘 등을 표시하는 위젯입니다.

위젯 설명 예제

Text	텍스트를 화면에 표시합니다.	Text('Hello, Flutter!')
Image	이미지를 표시합니다.	Image.asset('assets/image.png')
Icon	아이콘을 표시합니다.	Icon(Icons.home)
Container	레이아웃을 위한 박스 형태의 위젯	Container(color: Colors.blue)
Placeholder	임시 위젯으로 자리만 차지합니다.	Placeholder()

---

2. 레이아웃 위젯 (Layout Widgets)

다른 위젯을 배치하거나 정렬할 때 사용합니다.

위젯 설명 예제

Column	위젯들을 세로로 배치합니다.	Column(children: [Text('1'), Text('2')])
Row	위젯들을 가로로 배치합니다.	Row(children: [Icon(Icons.star), Text('Star')])
Stack	위젯들을 겹쳐서 배치합니다.	Stack(children: [Container(), Positioned(child: Text())])
Expanded	남은 공간을 채우도록 확장합니다.	Expanded(child: Text('Fill'))
Padding	안쪽 여백을 줍니다.	Padding(padding: EdgeInsets.all(8.0), child: Text('Pad'))
Center	자식 위젯을 중앙에 배치합니다.	Center(child: Text('Centered'))

---

3. 입력 위젯 (Input Widgets)

사용자 입력을 처리하는 위젯입니다.

위젯 설명 예제

TextField	텍스트 입력 필드입니다.	TextField()
ElevatedButton	입체감 있는 버튼입니다.	ElevatedButton(onPressed: () {}, child: Text('Click'))
Checkbox	체크박스입니다.	Checkbox(value: true, onChanged: (val) {})
Switch	토글 스위치입니다.	Switch(value: true, onChanged: (val) {})
Slider	슬라이더를 제공합니다.	Slider(value: 0.5, onChanged: (val) {})

---

4. 네비게이션 및 라우팅 위젯 (Navigation Widgets)

페이지 전환 및 네비게이션을 관리합니다.

위젯 설명 예제

Navigator	화면 이동을 관리합니다.	Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage()))
Drawer	왼쪽에서 열리는 메뉴입니다.	Drawer(child: ListView(...))
BottomNavigationBar	하단 네비게이션 바입니다.	BottomNavigationBar(items: [...])
TabBar	탭 기반 네비게이션을 제공합니다.	TabBar(tabs: [...])

---

5. 애니메이션 위젯 (Animation Widgets)

애니메이션을 구현할 때 사용합니다.

위젯 설명 예제

AnimatedContainer	속성 변경 시 자동으로 애니메이션 적용	AnimatedContainer(duration: Duration(seconds: 1))
Hero	페이지 전환 시 요소 애니메이션 효과	Hero(tag: 'hero-tag', child: Image.asset('img.png'))
FadeTransition	페이드 인/아웃 애니메이션	FadeTransition(opacity: animation, child: Text('Fade'))

---

6. 상태 관리 위젯 (Stateful Widgets)

상태 변화를 감지하고 화면을 다시 빌드합니다.

위젯 설명 예제

StatefulWidget	상태를 관리하는 위젯입니다.	StatefulWidget + State
ValueListenableBuilder	값의 변화를 감지하고 UI를 빌드합니다.	ValueListenableBuilder(valueListenable: myValueNotifier, builder: ...)

---

7. 그림 및 그래픽 위젯 (Drawing and Graphics Widgets)

커스텀 드로잉 및 그래픽을 생성할 때 사용합니다.

위젯 설명 예제

CustomPaint	커스텀 드로잉을 위해 사용됩니다.	CustomPaint(painter: MyPainter())
ClipRRect	자식 위젯을 둥근 모서리로 클리핑합니다.	ClipRRect(borderRadius: BorderRadius.circular(8.0))
Opacity	투명도를 조절합니다.	Opacity(opacity: 0.5, child: Text('Hello'))

 

---

📋 Flutter 위젯의 핵심 개념

1. 위젯 트리 (Widget Tree)
   Flutter 앱은 위젯 트리로 구성되며, 부모 위젯 안에 자식 위젯이 포함되는 구조입니다.
2. 불변성 (Immutability)
   위젯은 불변 객체입니다. 상태가 변경되면 새로운 위젯이 생성되며, 변경된 부분만 다시 빌드됩니다.
3. Stateless vs Stateful
   • StatelessWidget: 상태가 없는 정적인 위젯입니다.
   • StatefulWidget: 상태가 변경될 수 있는 동적인 위젯입니다.

---

🧐 요약

• 위젯은 Flutter UI의 기본 단위입니다.
• 다양한 위젯을 조합하여 화면을 설계하고 사용자와 상호작용할 수 있습니다.
• 레이아웃 위젯을 사용해 배치를 결정하고, 입력 위젯을 사용해 사용자 입력을 처리합니다.
• 상태 변화가 필요한 경우 StatefulWidget을 사용합니다.

위젯을 잘 이해하고 활용하면 Flutter 앱 개발에서 강력하고 유연한 UI를 구현할 수 있습니다!

 

---

 

GPT에서 정리를 잘 해준거 같다...