120. Using the Dismissible Widget for Dismissing List Items

1. 리스트아이템에서 스와이프해서 항목을 삭제해보자.

 

- expenses_list.dart

import 'package:expense_tracker/wigets/expenses_list/expense_item.dart';

import 'package:flutter/material.dart';

import 'package:expense_tracker/models/expense.dart';

class ExpensesList extends StatelessWidget {

  const ExpensesList(

      {super.key, required this.expenses, required this.onRemoveExpense});

  final List<Expense> expenses;

  final void Function(Expense expense) onRemoveExpense;

  @override

  Widget build(BuildContext context) {

    return ListView.builder(

        itemCount: expenses.length,

        itemBuilder: (ctx, index) => Dismissible(

            key: ValueKey(expenses[index]),

            onDismissed: (direction) {

              onRemoveExpense(expenses[index]);

            },

            child: ExpenseItem(expenses[index])));

  }

}

1) Dismissible 위젯 부분 참고

2) onRemoveExpense 함수 추가

 

- expenses.dart

import 'package:expense_tracker/wigets/expenses_list/expenses_list.dart';

import 'package:expense_tracker/wigets/new_expense.dart';

import 'package:flutter/material.dart';

import 'package:expense_tracker/models/expense.dart';

class Expenses extends StatefulWidget {

  const Expenses({super.key});

  @override

  State<Expenses> createState() {

    return _ExpensesState();

  }

}

class _ExpensesState extends State<Expenses> {

  final List<Expense> _registeredExpenses = [

    Expense(

      title: 'Flutter Course',

      amount: 19.99,

      date: DateTime.now(),

      category: Category.work,

    ),

    Expense(

      title: 'Cinema',

      amount: 15.69,

      date: DateTime.now(),

      category: Category.leisure,

    ),

  ];

  void _openAddExpenseOverlay() {

    showModalBottomSheet(

        isScrollControlled: true,

        context: context,

        builder: (ctx) => NewExpense(

              onAddExpense: _addExpense,

            ));

  }

  void _addExpense(Expense expense) {

    setState(() {

      _registeredExpenses.add(expense);

    });

  }

  void _removeExpense(Expense expense) {

    setState(() {

      _registeredExpenses.remove(expense);

    });

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text("Flutter ExpenseTracker"),

        actions: [

          IconButton(

              onPressed: _openAddExpenseOverlay, icon: const Icon(Icons.add))

        ],

      ),

      body: Column(

        children: [

          const Text('The chart'),

          Expanded(

              child: ExpensesList(

            expenses: _registeredExpenses,

            onRemoveExpense: _removeExpense,

          )),

        ],

      ),

    );

  }

}

1) _removeExpense 함수 추가 - 리스트에서 값 삭제하는 역할