Eine Liste mit fold aufsummieren

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

Eine Ausgabenliste braucht eine Gesamtsumme. Du könntest eine Schleife durchlaufen und die Werte addieren, aber eine Liste hat eine Methode, die genau das erledigt: fold. Sie durchläuft die Liste und trägt dabei einen Wert von einem Element zum nächsten weiter:

double total = expenses.fold(0.0, (sum, e) => sum + e.amount);

Lies es so: Beginne bei 0.0. Für jede Ausgabe e ist die neue sum die alte sum plus e.amount. Wenn die Liste durchlaufen ist, ist die letzte sum das Ergebnis. Für 3.5 und 12 ergibt das 0.0, dann 3.5, dann 15.5.

Die Funktion muss die neue Summe zurückgeben. Gibt sie nur e.amount zurück, vergisst jeder Schritt den vorherigen, und die „Gesamtsumme“ ist der letzte Preis.

Die Liste selbst kann sich ändern: expenses.add(...) innerhalb von setState fügt ein weiteres Element hinzu, und beim nächsten Build wird die neue Liste aufsummiert.

Aufgabe

Einfach

Die Zeile mit der Gesamtsumme zeigt immer $0.00 an. Berechne sie stattdessen:

Setze total mithilfe von expenses.fold, indem du den amount jeder Ausgabe addierst.

Die Zeile zeigt den Betrag bereits mit 2 Dezimalstellen an. Daher sollte dort Total: $15.50 stehen, und der Betrag sollte steigen, wenn du einen Snack hinzufügst.

Probier es selbst

import 'package:flutter/material.dart';

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

class Expense {
  Expense({required this.name, required this.amount});

  final String name;
  final double 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 List<Expense> expenses = [
    Expense(name: 'Coffee', amount: 3.5),
    Expense(name: 'Lunch', amount: 12),
  ];

  @override
  Widget build(BuildContext context) {
    double total = 0;
    return Scaffold(
      appBar: AppBar(title: const Text('Expenses')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            for (final e in expenses) Text('${e.name}: \$${e.amount.toStringAsFixed(2)}'),
            const SizedBox(height: 16),
            Text('Total: \$${total.toStringAsFixed(2)}', style: const TextStyle(fontSize: 28)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  expenses.add(Expense(name: 'Snack', amount: 2.25));
                });
              },
              child: const Text('Add a snack'),
            ),
          ],
        ),
      ),
    );
  }
}