클래스의 메서드

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

지금까지 클래스에는 이름이나 가격 같은 데이터가 들어 있었습니다. 클래스에는 그 데이터를 변경하는 코드도 들어갈 수 있습니다. 클래스 안에 있는 함수를 메서드라고 합니다:

class Wallet {
  int coins = 10;

  void earn(int amount) {
    coins = coins + amount;
  }
}

필드와 마찬가지로 점을 사용해 메서드를 호출합니다. 예: wallet.earn(3). 메서드 안에서 coins는 해당 메서드를 호출한 지갑의 필드입니다.

페이지에서 직접 wallet.coins = wallet.coins + 3을 작성해도 되는데, 왜 굳이 메서드를 사용할까요? 규칙을 한곳에 모아둘 수 있기 때문입니다. 지갑의 금액이 절대로 0보다 작아지면 안 된다면, spend 메서드에서 이를 확인하고, 금액을 차감하는 모든 버튼은 이 확인 과정을 거칩니다.

화면에 새 숫자가 표시되도록 위젯은 호출을 setState로 감쌉니다.

챌린지

쉬움

현재 Spend 5 버튼은 필드에서 코인을 바로 가져가므로 지갑의 코인 수가 0보다 작아집니다.

코인이 충분할 때만 코인을 차감하는 메서드 void spend(int amount)를 Wallet에 추가하세요.
Spend 5 버튼이 setState 내부에서 wallet.spend(5)를 호출하도록 하세요.

직접 해보기

import 'package:flutter/material.dart';

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

class Wallet {
  int coins = 10;

  void earn(int amount) {
    coins = coins + amount;
  }
}

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> {
  final wallet = Wallet();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Wallet')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('${wallet.coins} coins', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  wallet.earn(3);
                });
              },
              child: const Text('Earn 3'),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  wallet.coins = wallet.coins - 5;
                });
              },
              child: const Text('Spend 5'),
            ),
          ],
        ),
      ),
    );
  }
}