기초

위젯

Flutter UI의 모든 구성 요소는 위젯으로 표현됩니다.

개념 먼저 보기

위젯의 기본 개념부터 잡기

위젯 문서는 먼저 용어의 뜻을 잡고, 그 다음 Flutter 코드에서 어디에 쓰이는지 연결해서 읽는 것이 좋습니다.

아래 항목들은 이 문서에서 다루는 내용을 작은 단위로 나눈 것입니다. 각 항목을 읽은 뒤 예제를 보면 코드가 훨씬 덜 추상적으로 느껴집니다.

종류별로 하나씩

위젯에서 나눠 볼 핵심 요소

위젯의 역할

위젯은 화면에 무엇을 보여줄지 설명하는 불변 객체입니다.

언제 쓰나: Text, Image, Icon 같은 표시 위젯과 Padding, Align 같은 배치 위젯을 조합합니다.

Flutter에서: 위젯을 작게 나누면 재사용과 테스트가 쉬워집니다.

// 위젯 예제입니다.
// 먼저 코드의 큰 흐름을 보고, 주석을 따라 각 줄의 역할을 확인하세요.
class LessonTitle extends StatelessWidget {
  const LessonTitle({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) => Text(title);
}

Stateless와 Stateful

StatelessWidget은 외부 입력만으로 화면이 결정됩니다.

언제 쓰나: StatefulWidget은 내부 상태 변화에 따라 화면이 달라질 수 있습니다.

Flutter에서: 상태가 필요 없다면 StatelessWidget을 기본으로 선택합니다.

// 위젯 예제입니다.
// 먼저 코드의 큰 흐름을 보고, 주석을 따라 각 줄의 역할을 확인하세요.
class LessonTitle extends StatelessWidget {
  const LessonTitle({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) => Text(title);
}

부연 설명

위젯의 역할

위젯은 화면에 무엇을 보여줄지 설명하는 불변 객체입니다.
Text, Image, Icon 같은 표시 위젯과 Padding, Align 같은 배치 위젯을 조합합니다.
위젯을 작게 나누면 재사용과 테스트가 쉬워집니다.

부연 설명

Stateless와 Stateful

StatelessWidget은 외부 입력만으로 화면이 결정됩니다.
StatefulWidget은 내부 상태 변화에 따라 화면이 달라질 수 있습니다.
상태가 필요 없다면 StatelessWidget을 기본으로 선택합니다.

깊게 이해하기

위젯은 화면 그 자체가 아니라 화면을 어떻게 구성할지에 대한 설명입니다. build가 다시 호출되어도 위젯 객체는 가볍게 새로 만들어질 수 있도록 설계되어 있습니다.

복잡한 화면을 하나의 build 메서드에 모두 넣으면 상태와 레이아웃 의도가 섞입니다. 의미 있는 단위로 위젯을 분리하면 이름만으로 구조를 읽을 수 있습니다.

상세 예제

큰 카드 UI를 작은 위젯으로 분리하는 예제입니다.

class LessonCard extends StatelessWidget {
  const LessonCard({super.key, required this.title, required this.minutes});

  final String title;
  final int minutes;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: const Icon(Icons.school),
      title: Text(title),
      subtitle: Text('$minutes분 학습'),
      trailing: const Icon(Icons.chevron_right),
    );
  }
}

실무에서 주의할 점

build 메서드 안에서 네트워크 호출 같은 부수 효과를 만들지 마세요.
반복되는 UI 조각은 private 위젯 클래스로 분리하세요.
변하지 않는 하위 위젯에는 const를 붙이세요.

실습 체크리스트

StatelessWidget 작성build 메서드 이해위젯 분리 기준 세우기

위젯 예제

class LessonTitle extends StatelessWidget {
  const LessonTitle({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) => Text(title);
}