Menu
CoddyTech

Some os elementos de uma lista com fold

Parte da seção Gerenciamento de estado do Journey de Flutter da Coddy. Lição 8 de 27.

Uma lista de despesas precisa de um total. Você poderia percorrê-la e somar os valores, mas uma lista tem um método que faz exatamente isso: fold. Ele percorre a lista, levando um valor de um item para o seguinte:

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

Leia assim: comece em 0.0. Para cada despesa e, a nova sum é a antiga sum mais e.amount. Quando a lista terminar, a última sum será o resultado. Para 3.5 e 12, isso é 0.0, depois 3.5 e, por fim, 15.5.

A função precisa retornar a nova soma. Se retornar apenas e.amount, cada etapa esquecerá a anterior, e o "total" será o último preço.

A própria lista pode mudar: expenses.add(...) dentro de setState adiciona mais um item, e a próxima renderização soma os valores da nova lista.

challenge icon

Desafio

Fácil

A linha do total sempre mostra $0.00. Calcule-o em vez disso:

  • Defina total com expenses.fold, somando o amount de cada despesa.

A linha já o mostra com 2 casas decimais, então deve exibir Total: $15.50 e aumentar quando você adicionar um lanche.

Experimente você mesmo

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'),
            ),
          ],
        ),
      ),
    );
  }
}
quiz iconTeste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Todas as lições de Gerenciamento de estado

Pratique por conta própria: Compilador de Flutter online