Flutter 위젯에 대한 개념정리

Flutter는 Google에서 개발한 오픈소스 UI 프레임워크로, 안드로이드, iOS, 웹, 데스크톱 등 다양한 플랫폼에서 동작하는 애플리케이션을 개발할 수 있습니다. Flutter에서 가장 핵심이 되는 요소가 바로 **위젯(Widget)**입니다. 이번 포스팅에서는 Flutter 위젯의 개념과 정의, 종류, 그리고 위젯을 사용하는 방법에 대해 정리해보겠습니다.

---

1. Flutter 위젯이란?

Flutter에서 UI를 구성하는 모든 요소는 **위젯(Widget)**입니다. 버튼, 텍스트, 이미지뿐만 아니라 레이아웃을 구성하는 컨테이너, 정렬, 패딩 등도 모두 위젯으로 이루어져 있습니다.

 

Flutter의 위젯은 React의 컴포넌트 개념과 유사하며, 하나의 작은 요소를 조합하여 UI를 구성하는 방식입니다. 즉, Flutter에서는 화면을 그릴 때 개별적인 위젯들이 모여서 전체적인 구조를 형성하게 됩니다.

🔹 위젯의 특징

• 구성 요소의 최소 단위: 모든 UI 요소가 위젯으로 이루어짐
• 트리 구조: 위젯은 계층적인 트리 구조로 배치됨
• 불변성(Immutable): 위젯 자체는 변경되지 않으며, 새로운 위젯이 생성되면서 상태가 갱신됨
• 선언형 UI: Flutter는 UI를 선언적으로 구성하며, 상태(State)에 따라 화면이 갱신됨

---

2. Flutter 위젯의 종류

Flutter 위젯은 크게 StatelessWidget과 StatefulWidget 두 가지로 나눌 수 있습니다.

1️⃣ StatelessWidget (상태가 없는 위젯)

• 한 번 생성되면 변경되지 않는 UI 요소를 표현할 때 사용
• 내부 상태가 없으며, 외부에서 전달된 데이터에 따라 UI가 결정됨
• 예제:

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('StatelessWidget 예제')),
      body: Center(
        child: Text('나는 변하지 않는 위젯!'),
      ),
    );
  }
}

2️⃣ StatefulWidget (상태가 있는 위젯)

• 내부 상태를 가지며, 변경될 때마다 UI가 다시 그려짐
• 사용자의 입력, 애니메이션, API 호출 등의 이벤트에 따라 UI가 동적으로 변해야 할 때 사용
• 예제:

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('StatefulWidget 예제')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('버튼을 누른 횟수:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

---

3. Flutter에서 위젯을 사용하는 방법

Flutter는 기본적으로 위젯 트리(Widget Tree) 구조를 사용하여 UI를 빌드합니다. 위젯을 사용하려면 다음과 같은 원칙을 따라야 합니다.

🔹 위젯 트리 구조

Flutter의 UI는 부모 위젯과 자식 위젯이 트리 형태로 구성됩니다.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Flutter 위젯 트리')),
    body: Center(
      child: Column(
        children: [
          Text('안녕하세요!'),
          ElevatedButton(
            onPressed: () {},
            child: Text('클릭')
          ),
        ],
      ),
    ),
  );
}

위 코드는 Scaffold를 최상위 부모로 하고, AppBar, Center, Column, Text, ElevatedButton이 각각 자식 위젯으로 배치된 것을 보여줍니다.

🔹 위젯 조합하기

Flutter에서는 기본 위젯을 조합하여 원하는 형태의 UI를 만들 수 있습니다.

Column(
  children: [
    Icon(Icons.star, size: 50, color: Colors.yellow),
    Text('즐겨찾기', style: TextStyle(fontSize: 20)),
  ],
)

이처럼 여러 위젯을 중첩하여 새로운 UI를 구성할 수 있습니다.

---

4. 마무리

Flutter에서 위젯은 UI를 구성하는 기본 단위이며, 모든 화면 요소는 위젯으로 표현됩니다. 위젯에는 StatelessWidget과 StatefulWidget이 있으며, 필요에 따라 적절한 위젯을 선택해야 합니다.

이번 포스팅에서는 Flutter 위젯의 개념과 정의, 위젯의 종류, 그리고 위젯을 사용하는 방법에 대해 살펴보았습니다.