스와이프하여 삭제하기

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

메일이나 쇼핑 앱에서는 항목을 화면 밖으로 쓸어 넘겨 지웁니다. 행을 Dismissible로 감싸세요:

Dismissible(
  key: ValueKey(item),
  onDismissed: (direction) {
    setState(() {
      items.remove(item);
    });
  },
  child: ListTile(title: Text(item)),
)

행이 손가락 아래에서 미끄러져 사라집니다. 행이 사라지면 onDismissed가 실행되고, setState에서 목록의 항목을 제거합니다. 그렇게 하지 않으면 목록에 항목이 여전히 남아 있어 Flutter가 오류와 함께 중단됩니다. 버린 행이 여전히 목록에 있다는 오류입니다.

key는 Flutter에 각 행이 무엇인지 알려 주므로 모든 행마다 달라야 합니다. ValueKey(item)은 항목 자체를 사용합니다.

items는 final이지만, 그래도 그 항목을 제거할 수 있습니다. final은 변수가 항상 같은 목록을 담는다는 뜻이지, 목록이 절대 변경되지 않는다는 뜻은 아닙니다.

챌린지

쉬움

앱 바에는 항목 수가 표시됩니다. 쇼핑 목록의 각 ListTile을 Dismissible로 감싸고 키로 ValueKey(item)을 사용하여 스와이프할 수 있게 만든 다음, 항목이 스와이프되어 사라지면 items에서 해당 항목을 삭제하세요.

직접 해보기

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)
            ListTile(title: Text(item)),
        ],
      ),
    );
  }
}