fold로 리스트의 합계 구하기

Coddy Flutter 여정의 상태 관리 섹션에 포함된 레슨. 27개 중 8번째.

지출 목록의 총액을 구해야 합니다. 반복문을 사용해 더할 수도 있지만, 목록에는 이 작업을 정확히 수행하는 메서드인 fold가 있습니다. 이 메서드는 목록을 따라가며 항목에서 다음 항목으로 하나의 값을 이어서 전달합니다.

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

다음과 같이 읽으면 됩니다. 0.0에서 시작합니다. 각 지출 항목 e에 대해 새 sum은 이전 sum에 e.amount를 더한 값입니다. 목록 처리가 끝나면 마지막 sum이 결과입니다. 3.5와 12의 경우, 값은 0.0, 그다음 3.5, 그다음 15.5입니다.

이 함수는 새 합계를 반환해야 합니다. e.amount만 반환하면 각 단계에서 이전 값이 사라지므로, "총액"은 마지막 가격이 됩니다.

목록 자체는 변경될 수 있습니다. setState 안에서 expenses.add(...)를 호출하면 항목이 하나 더 추가되고, 다음 빌드에서 새 목록의 합계를 구합니다.

챌린지

쉬움

합계 줄에는 항상 $0.00이 표시됩니다. 대신 직접 계산하세요:

각 지출의 amount를 더해 expenses.fold로 total을 설정하세요.

이 줄은 이미 소수점 이하 2자리로 표시하므로 Total: $15.50이 표시되어야 하며, 간식을 추가하면 금액이 늘어납니다.

직접 해보기

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