121. Showing & Managing "Snackbars"

1. 리스트에 값이 없으면 text를 띄워주고, 있으면 리스트 값을 띄워주자.

 

2. 스낵바를 사용해서 삭제된 위젯을 다시 바로 살려보자.

 

- 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) {

    final expenseIndex = _registeredExpenses.indexOf(expense);

    setState(() {

      _registeredExpenses.remove(expense);

    });

    ScaffoldMessenger.of(context).clearSnackBars();

    ScaffoldMessenger.of(context).showSnackBar(

      SnackBar(

        duration: const Duration(seconds: 3),

        content: const Text("Expense deleted."),

        action: SnackBarAction(

          label: "Undo",

          onPressed: () {

            setState(() {

              _registeredExpenses.insert(expenseIndex, expense);

            });

          },

        ),

      ),

    );

  }

  @override

  Widget build(BuildContext context) {

    Widget mainContent = const Center(

      child: Text("비용 없음, 비용을 추가해주세요."),

    );

    if (_registeredExpenses.isNotEmpty) {

      mainContent = ExpensesList(

        expenses: _registeredExpenses,

        onRemoveExpense: _removeExpense,

      );

    }

    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: mainContent),

        ],

      ),

    );

  }

}

1) mainContent 부분 참고하여 리스트 값 유무에 따라 보여지는 값을 다르게 해준다.

2) ScaffoldMessenger~ 부분 참고

showSnackBar부분을 통해서 삭제했던거를 다시 살릴 수 있다. clearSnackBars는 여러 위젯을 삭제 할 때, 기존 스낵바가 바로 사라지게끔 해준다.

 

- 결과 화면

 

하단 부분(스낵바) 주목