자식 컴포넌트에 상태 전달하기

Coddy Flutter 여정의 상태 관리 섹션에 포함된 레슨. 27개 중 1번째.

앱은 여러 위젯으로 이루어져 있으며, 작은 위젯은 더 큰 위젯이 소유한 값이 필요한 경우가 많습니다. 여기서 점수는 페이지의 State에 저장되지만, 점수를 표시하는 보드는 그 자체로 하나의 위젯입니다.

값을 하위 위젯에 전달하려면 final 필드를 만들고 생성자에서 값을 받도록 하세요.

class ScoreBoard extends StatelessWidget {
  const ScoreBoard({super.key, required this.score});

  final int score;

  @override
  Widget build(BuildContext context) {
    return Text('Score: $score');
  }
}

부모 위젯은 하위 위젯을 빌드할 때마다 값을 전달합니다. ScoreBoard(score: score). 부모 위젯이 setState를 호출하면 다시 빌드되고, 보드에는 새로운 숫자가 전달됩니다.

하위 위젯은 값을 변경하지 않습니다. 전달받은 값을 표시하며, 점수는 계속 부모 위젯이 소유합니다.

챌린지

쉬움

+1 버튼을 누르면 점수가 올라가지만, 점수판에는 항상 Score: 0이라고 표시됩니다.

ScoreBoard에 생성자에서 설정하는 final int score 필드를 추가하세요.
표시되는 텍스트를 Score: 뒤에 해당 점수가 오도록 만드세요.
페이지에서 점수판을 만들 때 페이지의 score를 전달하세요.

직접 해보기

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(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int score = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const ScoreBoard(),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  score++;
                });
              },
              child: const Text('+1'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Text('Score: 0', style: TextStyle(fontSize: 32));
  }
}