Jumlahkan list dengan fold

Termasuk bagian Pengelolaan State dalam perjalanan Flutter di Coddy. Pelajaran 8 dari 27.

Sebuah list pengeluaran perlu dijumlahkan. Kamu bisa melakukan perulangan dan menjumlahkannya, tetapi list memiliki method yang melakukan hal ini secara langsung: fold. Method ini menelusuri list sambil membawa satu nilai dari satu item ke item berikutnya:

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

Bacanya seperti ini: mulai dari 0.0. Untuk setiap pengeluaran e, sum yang baru adalah sum yang lama ditambah e.amount. Setelah list selesai diproses, sum terakhir menjadi hasilnya. Untuk 3.5 dan 12, nilainya adalah 0.0, lalu 3.5, lalu 15.5.

Fungsi tersebut harus mengembalikan sum yang baru. Jika fungsi hanya mengembalikan e.amount, setiap langkah akan melupakan nilai sebelumnya, dan "total" hanya akan menjadi harga terakhir.

List itu sendiri bisa berubah: expenses.add(...) di dalam setState menambahkan satu item lagi, lalu build berikutnya menjumlahkan list yang baru.

Tantangan

Mudah

Baris total selalu menampilkan $0.00. Hitung totalnya sendiri:

Tetapkan total menggunakan expenses.fold, dengan menjumlahkan amount setiap pengeluaran.

Baris itu sudah menampilkannya dengan 2 angka desimal, jadi seharusnya tertulis Total: $15.50, dan nilainya bertambah saat kamu menambahkan camilan.

Coba sendiri

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

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Pengelolaan State

Latihan sendiri: Compiler Flutter online