StatefulWidget 작성하기

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

이번에는 직접 StatefulWidget을 작성합니다. 화면에는 I feel Sleepy라고 표시되고, 커피 마시기를 누르면 I feel Awake로 바뀌어야 합니다. StatelessWidget으로는 절대 그렇게 할 수 없습니다.

StatelessWidget을 StatefulWidget으로 바꾸려면 세 단계를 거칩니다.

extends StatelessWidget을 extends StatefulWidget으로 바꾸고, build를 createState로 바꿉니다.
그 아래에 State 클래스를 작성하고 build를 그 안으로 옮기되, 수정하지 않습니다.
값이 바뀌는 변수를 build 밖으로 옮겨 State 클래스의 맨 위에 둡니다.

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

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

class _HomePageState extends State<HomePage> {
  String _mood = 'Sleepy';

  @override
  Widget build(BuildContext context) {
    ...
  }
}

3단계가 중요합니다. build의 맨 위에 있는 변수는 build가 실행될 때마다 다시 만들어지므로, setState를 호출한 뒤에는 'Sleepy'로 돌아갑니다. State 클래스의 맨 위에 두면 한 번만 만들어지고, 지정한 값이 유지됩니다.

챌린지

중급

HomePage를 _HomePageState 클래스를 사용하는 StatefulWidget으로 바꾸세요. 기분을 State의 맨 위에 있는 String _mood = 'Sleepy';에 저장하고, Drink coffee를 누르면 setState를 사용해 'Awake'로 바뀌도록 하세요.

직접 해보기

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 StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    String mood = 'Sleepy';
    return Scaffold(
      appBar: AppBar(title: Text('Mood')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('I feel $mood', style: TextStyle(fontSize: 32)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {},
              child: Text('Drink coffee'),
            ),
          ],
        ),
      ),
    );
  }
}