1. Widget

• flutter에서 widget은 UI를 구성하는 기본 단위라고 생각하면 된다. swift를 공부하다가 flutter를 사용했어서, widget의 개념이 생소하였다.

• Container, SizedBox, margin, padding, Text, Row, Column 등 사실 눈에 보이든 보이지 않든, view를 구성하는 모든 요소를 widget이라고 칭한다.

• 위젯의 종류는 크게 두 가지로 분류 할 수 있다.

  • Stateful Widget
  • Stateless Widget

1) Stateful 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를 사용하여 변화 시킬 수 있다.

2) Stateless Widget

• 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을 사용한다면, 화면이 원하는대로 동작하지 않을 것이다.

3) Widget Tree

• 이와 같은 위젯들은 부모, 자식 관계를 이루며 tree 구조를 이룬다.

4) Widget Example

a) Container

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  child: Text('Container Widget'),
)

• 레이아웃과 스타일을 결합한 위젯으로, 다양한 속성을 이용해 내부 위젯을 감싸고 효과를 줄 수 있다.
• 다른 위젯들과 결합해서 자주 사용되는 위젯이다.

b) Column, Row

Column(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Row(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

• 이름 그대로 위젯들을 행과 열 방향으로 배열하는 위젯이다.

c) GestureDetecture

GestureDetector(
  onTap: () {
    print('Tapped');
  },
  child: Container(
    width: 100,
    height: 50,
    color: Colors.green,
    child: Center(child: Text('Tap Me')),
  ),
)

• 터치, 제스처 등 사용자 입력을 처리하는 위젯으로, 터치 이벤트를 감지하여 특정 작업을 수행한다.

2. 결론

• 이를 제외하고도 많은 위젯들이 있으며, 사실 flutter는 IOS와 Android를 모두 지원하기에 위젯 개수가 더 많은 것 같다.. 필요 시에 구글링으로 원하는 위젯을 찾아 사용하는 것이 가장 좋은 접근인 것 같다.
• 또한, Flutter로 개발할 때에는 이와 같은 Widget의 특성을 고려하여야 한다.