setState로 화면 다시 그리기

Coddy Flutter 여정의 앱에 상호작용 추가하기 섹션에 포함된 레슨. 34개 중 11번째.

이 앱에서 하나 추가를 누르고 콘솔을 확인하세요. 1, 2, 3. 화면의 숫자는 0으로 그대로입니다. Flutter는 화면을 한 번 만들었고, 다시 만들라고 지시한 것이 아무것도 없었습니다.

StatelessWidget은 절대 바뀌지 않습니다. 바뀌는 화면은 StatefulWidget이며, 다음과 같이 두 개의 클래스로 작성합니다.

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

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

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

  @override
  Widget build(BuildContext context) {
    return Text('$_count');
  }
}

HomePage는 어떤 State를 만들지만 지정합니다(createState는 값 반환 함수에서 배운 화살표 형식으로 작성합니다). _HomePageState가 실제 작업을 합니다. _count와 같은 화면의 데이터를 클래스 상단의 변수에 저장하고 화면을 만듭니다. 화면이 존재하는 동안 계속 유지되므로 _count는 빌드가 다시 진행되어도 값을 유지합니다.

화면을 바꾸려면 setState 안에서 데이터를 바꾸세요. 그러면 Flutter에 “이 값이 바뀌었으니 다시 빌드해”라고 알리고, Text에 새 숫자가 표시됩니다.

setState(() {
  _count = _count + 1;
});

_HomePageState와 _count 앞의 밑줄은 이름을 비공개로 만듭니다. 이 파일에서만 사용할 수 있습니다. 상태 클래스와 그 변수 이름에는 보통 밑줄이 붙습니다.

챌린지

중급

Add one을 누를 때마다 화면의 숫자가 1씩 증가하도록 하세요. _count의 값을 변경하는 코드를 setState 안에 넣으세요.

직접 해보기

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$_count', style: TextStyle(fontSize: 48)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                _count = _count + 1;
                print(_count);
              },
              child: Text('Add one'),
            ),
          ],
        ),
      ),
    );
  }
}