flutter에서 widget은 UI를 구성하는 기본 단위라고 생각하면 된다. swift를 공부하다가 flutter를 사용했어서, widget의 개념이 생소하였다.
Container, SizedBox, margin, padding, Text, Row, Column 등 사실 눈에 보이든 보이지 않든, view를 구성하는 모든 요소를 widget이라고 칭한다.
위젯의 종류는 크게 두 가지로 분류 할 수 있다.
Flutter에서 Stateful Widget은 사용자의 이벤트 혹은 상호작용에 따라 값이 바뀌는 위젯이다.
즉 현재 화면에서 변화가 있는 위젯이다.
StatefulWidget을 상속받아서 생성한다.
ex) Textfield, button 등
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 Column(
children: <Widget>[
Text('Counter: $_counter'),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
);
}
}
상태의 변화는 setState method를 사용하여 변화 시킬 수 있다.
Stateless Widget은 이와 반대로 화면에서의 변화가 없는 위젯이다. 한 번 빌드가 된다면 내부 상태가 변경되지 않는다는 특징이 있다.
즉, 주로 변하지 않는 정보나 정적인 내용을 표시하는 데에 사용이 된다.
StatelessWidget을 상속받아서 생성한다.
ex) Text, Image 등
class MyTextWidget extends StatelessWidget {
final String text;
MyTextWidget(this.text);
@override
Widget build(BuildContext context) {
return Text(text);
}
}
만약 StatelessWidget class에서 Stateful Widget을 사용한다면, 화면이 원하는대로 동작하지 않을 것이다.
Container(
width: 200,
height: 100,
color: Colors.blue,
child: Text('Container Widget'),
)
Column(
children: [
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
],
)
Row(
children: [
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
],
)
GestureDetector(
onTap: () {
print('Tapped');
},
child: Container(
width: 100,
height: 50,
color: Colors.green,
child: Center(child: Text('Tap Me')),
),
)