クラスにメソッドを定義する

CoddyのFlutterジャーニー「状態管理」セクションの一部。レッスン 5/27。

これまでのクラスには、名前や価格などのデータが含まれていました。クラスには、そのデータを変更するコードも含めることができます。クラス内の関数はメソッドと呼ばれます。

class Wallet {
  int coins = 10;

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

フィールドと同じように、ドットを使ってメソッドを呼び出します。wallet.earn(3)。メソッド内では、coinsは、そのメソッドが呼び出されたウォレットのフィールドです。

ページ側でwallet.coins = wallet.coins + 3と書けるのに、なぜわざわざそうするのでしょうか？ルールを一か所にまとめられるからです。ウォレットの値が決してゼロを下回ってはならない場合、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'),
            ),
          ],
        ),
      ),
    );
  }
}