스와이프 실행 취소하기

Coddy Flutter 여정의 목록과 화면 섹션에 포함된 레슨. 33개 중 27번째.

스와이프는 실수로 하기 쉬우므로, 좋은 앱은 되돌릴 방법을 제공합니다. 삭제된 항목을 알려 주고 실행 취소 버튼이 있는 SnackBar입니다. SnackBarAction은 바로 그 버튼입니다.

SnackBar(
  content: Text('$item removed'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      setState(() {
        items.insert(index, item);
      });
    },
  ),
)

항목을 원래 있던 위치에 되돌리려면 삭제하기 전에 그 위치를 기억해 두세요. items.indexOf(item)은 항목의 위치이고, items.removeAt(index)는 항목을 삭제하며, items.insert(index, item)은 같은 위치에 항목을 되돌려 놓습니다.

items.add(item)를 사용해도 항목을 되돌릴 수 있지만, 목록의 끝에 추가됩니다.

챌린지

중급

항목을 스와이프하여 삭제하면 Milk removed(항목 이름 포함)라고 표시되는 SnackBar와 항목을 같은 위치에 다시 넣는 Undo 동작을 표시하세요.

직접 해보기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final List<String> items = ['Milk', 'Bread', 'Eggs', 'Apples', 'Cheese'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('${items.length} items')),
      body: ListView(
        children: [
          for (String item in items)
            Dismissible(
              key: ValueKey(item),
              onDismissed: (direction) {
                setState(() {
                  items.remove(item);
                });
              },
              child: ListTile(title: Text(item)),
            ),
        ],
      ),
    );
  }
}