Methoden in Ihren Klassen

Teil des Abschnitts State Management der Flutter-Journey von Coddy. Lektion 5 von 27.

Bisher enthielten deine Klassen Daten: einen Namen, einen Preis. Eine Klasse kann auch den Code enthalten, der diese Daten ändert. Eine Funktion innerhalb einer Klasse heißt Methode:

class Wallet {
  int coins = 10;

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

Rufe eine Methode mit einem Punkt auf, wie bei einem Feld: wallet.earn(3). Innerhalb der Methode ist coins das Feld der Wallet, auf der sie aufgerufen wurde.

Warum das tun, wenn die Seite selbst wallet.coins = wallet.coins + 3 schreiben könnte? Weil die Regeln dann an einem Ort stehen. Wenn eine Wallet niemals unter null fallen darf, prüft die Methode spend dies, und jeder Button, der Geld ausgibt, durchläuft diese Prüfung.

Das Widget ruft weiterhin rund um den Aufruf setState auf, damit der Bildschirm die neue Zahl anzeigt.

Aufgabe

Einfach

Derzeit nimmt Spend 5 Münzen direkt aus dem Feld, und der Geldbeutelstand sinkt unter null.

Füge Wallet eine Methode void spend(int amount) hinzu, die die Münzen nur abzieht, wenn genügend vorhanden sind.
Sorge dafür, dass die Schaltfläche Spend 5 innerhalb von setState wallet.spend(5) aufruft.

Probier es selbst

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'),
            ),
          ],
        ),
      ),
    );
  }
}