기초

Widget 기초

Flutter UI는 작은 위젯을 조합해 복잡한 화면을 만드는 방식입니다.

핵심 개념

Widget 기초 주요 항목

위젯으로 UI를 만든다

Flutter에서 화면에 보이는 Text, Image, Icon뿐 아니라 보이지 않는 Padding, Row, Column도 위젯입니다.

언제 쓰나: 작은 위젯을 조합해 큰 위젯을 만들고, 큰 위젯을 다시 화면으로 구성합니다.

Flutter에서: 위젯은 현재 상태에 맞는 UI 설명을 반환하며, 상태가 바뀌면 다시 build됩니다.

abstract class LessonRepository {
  Future<List<String>> findTitles();
}

class LessonController {
  LessonController(this.repository);

  final LessonRepository repository;
}

Stateless와 Stateful

StatelessWidget은 입력값만으로 화면이 결정되는 위젯입니다.

언제 쓰나: StatefulWidget은 내부 상태 변화에 따라 화면이 바뀌는 위젯입니다.

Flutter에서: 상태가 필요 없으면 StatelessWidget으로 시작하고, 필요한 경우 StatefulWidget으로 전환합니다.

int count = 0;

void increase() {
  setState(() {
    count += 1;
  });
}

확장 개념

위젯 카테고리

  • Flutter 위젯은 시각 요소, 구조 요소, 플랫폼 스타일 요소, 상호작용 요소로 나누어 볼 수 있습니다.
  • Material과 Cupertino 위젯은 각각 Material Design과 Apple 플랫폼 감각에 맞춘 구성 요소입니다.
  • Base widgets는 텍스트, 레이아웃, 스크롤, 입력, 애니메이션처럼 앱 대부분에서 반복되는 기본 도구입니다.

확장 개념

위젯을 찾는 기준

  • 화면에 보이는 요소가 필요한지, 배치만 담당하는 요소가 필요한지 먼저 구분합니다.
  • 사용자 입력을 받는다면 TextField, Form, GestureDetector, InkWell 같은 상호작용 위젯을 검토합니다.
  • 리스트와 스크롤이 필요하면 ListView, GridView, CustomScrollView 계열을 우선 확인합니다.

코드

예제

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

  final String title;

  @override
  Widget build(BuildContext context) {
    return Text(title);
  }
}

다음 단계

실습 체크리스트

Widget tree 이해StatelessWidget 작성StatefulWidget이 필요한 경우 구분
  • 출처세부 기준과 최신 변경 사항을 확인할 수 있습니다.
  • Flutter API Reference클래스, 메서드, 생성자 세부 정의를 확인합니다.
  • Flutter UI위젯, 레이아웃, 입력, 내비게이션 흐름을 함께 봅니다.