지난 글까지 Dart 문법을 끝냈으니, 이제 Flutter 화면을 만들 차례다. Compose나 SwiftUI에서는 화면을 함수나 구조체로 그리는데, Flutter는 화면에 보이는 거의 모든 것이 위젯이다. 글자도 위젯, 버튼도 위젯, 여백과 가운데 정렬도 위젯이다.

Compose 하던 습관대로 화면을 하나 만들어보자. 함수 하나에 Text를 넣으면 될 것 같다.

import 'package:flutter/material.dart';

void main() {
  runApp(Greeting()); // 여기서 에러남
}

Widget Greeting() {
  return Text('안녕하세요');
}

runApp(Greeting()) 자체는 돌아갈 수도 있는데, 실행하면 화면이 빨갛게 깨지거나 No Directionality widget found 같은 에러가 난다. Text는 글자를 그릴 때 "글자를 왼쪽에서 오른쪽으로 쓸지"(텍스트 방향), 테마, 화면 크기 같은 정보가 필요한데, 그걸 위에서 내려주는 위젯이 하나도 없기 때문이다.

원인: 위젯은 혼자 존재하지 않고, 위에서 아래로 이어지는 "트리"다

Flutter 화면은 위젯이 부모-자식으로 이어진 위젯 트리다. 자식 위젯은 부모가 내려주는 정보(방향, 테마, 크기 제약)를 받아서 그려진다. 맨 위에 그 정보를 내려주는 위젯이 없으면 Text가 그릴 방법이 없다.

그 역할을 하는 게 MaterialApp과 Scaffold다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('안녕하세요'),
        ),
      ),
    );
  }
}

화면 가운데에 "안녕하세요"가 뜬다. 여기서 위젯 트리는 이렇게 이어져 있다.

MyApp
 └ MaterialApp      ← 테마, 방향, 라우팅 정보를 아래로 내려줌
    └ Scaffold      ← 앱바, 본문, 버튼 같은 화면 뼈대
       └ Center     ← 자식을 가운데에 놓음
          └ Text    ← 실제 글자

Center도 위젯이라는 점이 중요하다. "가운데 정렬"이 속성이 아니라 가운데 정렬을 해주는 위젯으로 감싸는 것이다. Compose의 Modifier.align이나 SwiftUI의 .frame(alignment과 발상이 다르다.

위젯을 만드는 방법: StatelessWidget

MyApp처럼 StatelessWidget을 상속해서 build 메서드에서 위젯 트리를 돌려주는 게 가장 기본 형태다.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(...);
  }
}

앞선 글들에서 배운 문법이 그대로 들어 있다.

• extends StatelessWidget → 상속 글에서 본 extends, 부모는 하나
• const MyApp({super.key}) → 생성자 글에서 본 형태, super.key는 부모 생성자로 key를 넘기는 줄임 문법
• @override → 부모의 build를 재정의
• build가 돌려주는 것 → 위젯 트리

const를 붙이는 이유는 final/const 글에서 말한 대로 "컴파일 때 고정되는 값이면 Flutter가 다시 만들지 않고 재사용할 수 있게" 알려주는 힌트다.

BuildContext는 뭔가

build(BuildContext context)의 context는 "이 위젯이 트리의 어느 위치에 있는지"를 가리키는 정보다. 위로 올라가면서 부모가 내려준 정보를 찾는 데 쓴다.

@override
Widget build(BuildContext context) {
  final color = Theme.of(context).colorScheme.primary; // 위쪽 MaterialApp의 테마를 찾음
  return Text('안녕하세요', style: TextStyle(color: color));
}

Theme.of(context)는 "내 위치에서 위로 올라가며 가장 가까운 테마를 찾아와라"는 뜻이다. 아까 MaterialApp이 테마를 내려준다고 한 것과 이어진다. 지금은 context를 "트리에서의 내 주소" 정도로만 알아두면 된다.

Stateless라는 이름의 뜻

StatelessWidget은 상태(바뀌는 값)가 없는 위젯이다. 받은 값으로 화면을 그리기만 하고, 스스로 값을 바꾸지 않는다.

class UserCard extends StatelessWidget {
  final String name;
  const UserCard({super.key, required this.name});

  @override
  Widget build(BuildContext context) {
    return Text('이름: $name');
  }
}

// 사용
const UserCard(name: '홍길동')

name이 final인 이유가 여기 있다. 위젯은 불변 객체이고, 값이 바뀌면 위젯을 고치는 게 아니라 새 위젯을 만든다. 버튼을 눌러서 숫자가 올라가는 것처럼 값이 바뀌는 화면은 다음 글에서 다룰 StatefulWidget을 쓴다.

Compose, SwiftUI와 비교하면

// Compose
@Composable
fun UserCard(name: String) {
    Text("이름: $name")
}

// SwiftUI
struct UserCard: View {
    let name: String
    var body: some View {
        Text("이름: \(name)")
    }
}

SwiftUI와 구조가 제일 비슷하다. struct ... : View에 body가 있는 것처럼 Flutter는 class ... extends StatelessWidget에 build가 있다. Compose만 함수라서 모양이 다르다.

정리

• Flutter 화면은 위젯이 부모-자식으로 이어진 트리이고, 글자·버튼·가운데 정렬까지 전부 위젯이다
• 앱의 맨 위에는 MaterialApp과 Scaffold가 테마와 화면 뼈대를 내려줘야 Text 같은 위젯이 제대로 그려진다
• StatelessWidget을 상속하고 build에서 위젯 트리를 돌려주는 게 가장 기본 형태다
• BuildContext는 트리에서 내 위치를 가리키고, Theme.of(context)처럼 위쪽 정보를 찾는 데 쓴다
• 위젯은 불변이라 필드는 final이고, 값이 바뀌는 화면은 StatefulWidget으로 만든다

다음 글에서는 StatefulWidget과 setState를 다뤄보겠다.