다트 이해하기 - (3) 위젯이란?

---

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')  // 로컬 이미지