[Flutter] build 메서드

 

build 메서드는 Flutter에서 UI를 그리는 핵심적인 역할을 한다.
Flutter에서 UI는 위젯으로 구성되고, build 메서드는 이 위젯들이 화면에 어떻게 배치되고 표시될 지 정의한다.

build 메서드 호출 시기?

1. 처음 위젯이 화면에 추가될 때
위젯이 Flutter 앱 트리에 삽입되면, build 메서드가 호출된다.

2. 위젯의 의존성이 변경될 때
예를 들어, 위젯이 참조하는 InheritedWidget이 업데이트되면, 해당 위젯의 build 메서드가 다시 호출된다.

3. 상태가 변경될 때(StatefulWidget)
상태가 변하면 build 메서드가 호출되어 UI가 업데이트된다.

 

build 메서드의 특징

반환값

항상 다른 위젯을 반환해야 한다.
예를 들어, 텍스트를 표시하거나 버튼을 생성하는 위젯을 반환할 수 있다.

다른용도로 사용 금지

build 메서드는 위젯을 생성하는 데만 사용해야 한다.
예를 들면, 데이터베이스에 저장하거나 네트워크 요청 같은 작업은 하면 안된다.

 

build 메서드 동작 원리

1. 호출 시점 각각에 맞게 build 메서드를 호출한다.

2. 호출 뒤 build 메서드는 항상 다른 위젯을 반환한다. 이 반환된 위젯은 현재 위젯의 하위 트리를 구성한다.

3. 반환된 위젯은 기존 UI와 비교하여 화면에 그릴 UI를 정의하여 업데이트 한다. 

 

[예시 코드]

1. MaterialApp: Flutter 앱의 시작점.

2. Scaffold: 화면 레이아웃(앱바, 본문, 플로팅 버튼 등)을 정의.

3. AppBar: 화면 상단의 앱바.

4. Center: 자식 위젯을 화면 가운데에 배치.

5. Column: 자식 위젯을 세로로 나열.

6. ElevatedButton: 클릭 가능한 버튼.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter 초보 연습'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('안녕하세요, Flutter입니다!'),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  print('버튼이 눌렸습니다!');
                },
                child: const Text('클릭하세요'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

BuildContext의 역할

1. 위치 정보 제공

BuildContext는 현재 위젯이 트리의 어디에 위치해 있는지 알려주는 역할을 한다.
이를 통해 현재 위젯이 상위 위젯(부모)으로부터 어떤 정보를 상속받고 있는지 알 수 있다.

2. 상속된 위젯(InheritedWidget) 접근

트리에서 이 위치와 연관된 상속된 위젯의 데이터를 가져올 수 있다.
예를 들어, 테마 정보나 앱의 전역 상태를 상속받아 사용할 수 있다.

3. 위젯 이동에 따른 컨텍스트 변경

위젯이 트리의 다른 위치로 이동하거나 여러 위치에서 동시에 사용될 경우,
**각 위치에 맞는 BuildContext**가 제공된다.

 

build 메서드 구현 시 유의사항

build 메서드는 다음 두 가지 요소에만 의존해야 한다.

1. 위젯의 필드

• 위젯에 정의된 값(필드)을 사용해 UI를 그린다.
• 필드는 한 번 설정되면 변경되지 않는 것이 원칙(StatelessWidget의 경우).

class MyWidget extends StatelessWidget {
  final String title;

  MyWidget(this.title);

  @override
  Widget build(BuildContext context) {
    return Text(title); // title 필드에 의존
  }
}

 

2. Context를 얻은 상태

• BuildContext.dependOnInheritedWidgetOfExactType 메서드를 사용해 트리에서 상속된 데이터를 가져온다.
• 예를 들어, 테마나 언어 설정 같은 전역 상태를 가져온다.

@override
Widget build(BuildContext context) {
  final theme = Theme.of(context); // Theme 데이터 가져오기
  return Text('Hello, Flutter!', style: theme.textTheme.headline4);
}

 

만약 다른 요소에 의존해야 한다면?

build 메서드가 위의 두 가지 외에 추가적인 요소에 의존해야 한다면,
StatefulWidget을 사용하는 것이 좋다.

StatefulWidget을 사용하면 상태(State)를 분리하여 보다 유연하게 데이터를 관리할 수 있다.