Flutter에서 위젯(Widget)은 UI 구성 요소의 기본 단위입니다. Flutter는 모든 것을 위젯으로 구성하며, 화면에 표시되는 텍스트, 이미지, 버튼, 레이아웃까지 모두 위젯으로 처리됩니다. Flutter에서 위젯을 잘 이해하는 것은 효과적인 UI 설계와 앱 개발에 중요한 요소입니다. 이 글에서는 Flutter 위젯의 개념과 종류를 쉽게 설명하겠습니다.
Flutter 위젯이란?
위젯(Widget)은 Flutter에서 화면을 구성하는 기본적인 요소입니다. 위젯은 UI를 표현하는 데 필요한 모든 것들을 정의합니다. 예를 들어, 텍스트를 표시하거나 버튼을 만들거나, 레이아웃을 설정하는 것 모두 위젯을 통해 이루어집니다.
위젯의 특성
구성 요소: Flutter 앱에서 모든 것은 위젯입니다. 화면에 보이는 텍스트, 버튼, 이미지, 리스트 등 모든 것이 위젯으로 구현됩니다.
구성 가능성: 위젯은 다른 위젯을 포함할 수 있으며, 이를 통해 복잡한 UI를 구성할 수 있습니다.
불변성: 위젯은 불변(immutable) 객체입니다. 한 번 생성된 위젯은 상태를 변경할 수 없고, 상태 변경은 StatefulWidget을 사용하여 처리합니다.
위젯의 종류
Flutter에서 위젯은 크게 StatelessWidget과 StatefulWidget으로 나뉩니다.
1. StatelessWidget (상태 없는 위젯)
StatelessWidget은 상태를 변경하지 않는 위젯입니다. UI가 한 번 설정되면 변경되지 않으며, 생성 시 주어진 데이터만을 사용하여 화면을 구성합니다. 예를 들어, 텍스트를 표시하거나 단순한 아이콘을 화면에 표시할 때 사용됩니다.
import 'package:flutter/material.dart';
class MyTextWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Hello, Flutter!', style: TextStyle(fontSize: 24)),
);
}
}
특징:
- 상태를 갖지 않음: 위젯 자체는 상태를 가지지 않으며, 생성 시 주어진 데이터를 기반으로 화면을 그립니다.
- 빠르고 효율적: 상태 변경이 없으므로 성능이 뛰어납니다.
- UI가 변경되지 않는 부분에 사용합니다.
2. StatefulWidget (상태 있는 위젯)
StatefulWidget은 상태를 변경할 수 있는 위젯입니다. 예를 들어, 버튼 클릭, 텍스트 입력, 슬라이더 조정 등 사용자의 입력에 따라 UI가 변경되는 경우에 사용됩니다. StatefulWidget은 두 부분으로 나뉩니다: 위젯 자체와 상태를 관리하는 State 클래스입니다.
예시:
import 'package:flutter/material.dart';
class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Counter: $_counter', style: TextStyle(fontSize: 24)),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
),
);
}
}
특징:
- 상태를 유지: StatefulWidget은 상태를 유지하며, UI가 변경될 때마다 setState() 메서드를 호출하여 상태를 업데이트합니다.
- 상태 관리: 상태를 관리하는 State 클래스를 사용하여 UI 변경을 처리합니다.
- 사용자 인터랙션: 버튼 클릭, 입력 필드 등 사용자의 입력에 따라 UI가 동적으로 변경되어야 할 때 사용됩니다.
Flutter에서 자주 사용되는 기본 위젯
Flutter에서 제공하는 많은 기본 위젯들은 UI를 빠르게 구성하는 데 유용합니다. 여기에는 레이아웃을 구성하는 위젯, 텍스트를 표시하는 위젯, 상호작용하는 위젯들이 포함됩니다.
1. Text 위젯
텍스트를 화면에 표시하는 위젯입니다.
Text('Hello, Flutter!', style: TextStyle(fontSize: 20))
2. Container 위젯
모든 종류의 UI 요소를 배치하고 스타일을 적용할 수 있는 가장 기본적인 레이아웃 위젯입니다. 크기, 색상, 마진 등을 설정할 수 있습니다.
예시:
Container(
width: 200,
height: 100,
color: Colors.blue,
child: Center(child: Text('Hello, World!')),
)
3. Column 및 Row 위젯
Column은 세로로, Row는 가로로 위젯을 배치하는 레이아웃 위젯입니다.
예시 (Column):
Column(
children: <Widget>[
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
],
)
4. ElevatedButton 위젯
버튼을 만들 때 사용하는 위젯입니다. 클릭 이벤트를 처리할 수 있습니다.
예시:
ElevatedButton(
onPressed: () {
print('Button clicked!');
},
child: Text('Click Me'),
)
5. Image 위젯
이미지를 화면에 표시하는 위젯입니다.
예시:
Image.asset('assets/image.png') // 로컬 이미지
'Flutter' 카테고리의 다른 글
다트 이해하기 - (5) Flutter의 createElement 함수 (0) | 2024.12.01 |
---|---|
다트 이해하기 - (4) Constructor(생성자) (0) | 2024.12.01 |
다트 이해하기 - (2) 내장 변수타입 (0) | 2024.12.01 |
다트 이해하기 - (1) 변수 (0) | 2024.12.01 |
플러터 기본위젯 (0) | 2024.03.30 |