Getter in Ihren Klassen

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

Manche Werte müssen nicht gespeichert werden, weil sie sich aus anderen ergeben. Wie viele Gläser noch übrig sind, ergibt sich aus dem Ziel minus den Gläsern, die du bisher getrunken hast. Ein Getter berechnet den Wert jedes Mal, wenn du ihn abfragst:

class WaterLog {
  int glasses = 0;
  int goal = 8;

  int get left => goal - glasses;
  bool get done => glasses >= goal;
}

Ein Getter hat einen Typ, das Wort get und einen Namen, aber keine Klammern. => bedeutet „das Ergebnis ist“. Du greifst darauf wie auf ein Feld zu: log.left, niemals log.left().

Ein Feld würde die Zahl speichern, die zum Zeitpunkt des Setzens galt. Ein Getter wird bei jedem Lesen neu berechnet und ist daher nie veraltet: Trinkst du ein Glas, ist log.left beim nächsten Build um eins kleiner.

Aufgabe

Einfach

Die Seite berechnet das selbst, und sobald das Ziel erreicht ist, zählt sie unter null weiter. Verschiebe die Regeln in WaterLog:

Füge einen Getter left hinzu: das Ziel minus die Gläser.
Füge einen Getter done hinzu: true, sobald die Anzahl der Gläser das Ziel erreicht.
Zeige Goal reached! an, wenn log.done wahr ist, und andernfalls 8 to go, 7 to go und so weiter anhand von log.left.

Probier es selbst

import 'package:flutter/material.dart';

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

class WaterLog {
  int glasses = 0;
  int goal = 8;

  void drink() {
    glasses = glasses + 1;
  }
}

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 log = WaterLog();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Water')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              '${log.goal - log.glasses} to go',
              style: const TextStyle(fontSize: 32),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  log.drink();
                });
              },
              child: const Text('Drink a glass'),
            ),
          ],
        ),
      ),
    );
  }
}