Dismissible

Dismissible는 리스트 아이템을 좌우로 스와이프해서 삭제, 보관, 완료 같은 액션을 실행할 수 있게 해주는 Flutter 위젯입니다.

•

child: 화면에 보이는 실제 콘텐츠

•

background / secondaryBackground: 스와이프 중 뒤에서 보이는 배경

•

direction: 스와이프 방향 제한

•

confirmDismiss: 실제로 제거하기 전 확인 다이얼로그 등 처리

•

onDismissed: 스와이프 완료 후 삭제 처리와 스낵바 표시 등에 사용

Dismissible class - widgets library - Dart API

API docs for the Dismissible class from the widgets library, for the Dart programming language.

https://api.flutter.dev/flutter/widgets/Dismissible-class.html

Dismissible 위젯

언제 사용하는가

•

할 일 목록 (Todo List)

•

이메일 앱 (읽음 처리 / 삭제)

•

채팅 리스트 (대화 삭제)

•

갤러리 리스트 (사진 제거)

리스트 기반 UI에서는 거의 필수 패턴

기본 구조

Dismissible(
  key: Key(item.id), // 반드시 고유값
  child: ListTile(
    title: Text(item.title),
  ),
)
Dart
복사

핵심 속성 정리

child

실제 화면에 보이는 UI

child: ListTile(title: Text("할 일"))
Dart
복사

background / secondaryBackground

스와이프할 때 뒤에서 보이는 UI

background: Container(
  color: Colors.red,
  alignment: Alignment.centerLeft,
  padding: EdgeInsets.only(left: 20),
  child: Icon(Icons.delete, color: Colors.white),
),

secondaryBackground: Container(
  color: Colors.blue,
  alignment: Alignment.centerRight,
  padding: EdgeInsets.only(right: 20),
  child: Icon(Icons.archive, color: Colors.white),
),
Dart
복사

•

background  왼쪽 → 오른쪽 스와이프

•

secondaryBackground  오른쪽 → 왼쪽 스와이프

direction

스와이프 방향 제한

direction: DismissDirection.horizontal
Dart
복사

옵션:

•

horizontal  좌우 가능

•

vertical  위아래 가능

•

endToStart  오른쪽 → 왼쪽

•

startToEnd  왼쪽 → 오른쪽

confirmDismiss

삭제 전에 확인 ( 중요)

confirmDismiss: (direction) async {
  return await showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: Text("삭제하시겠습니까?"),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context, false),
          child: Text("취소"),
        ),
        TextButton(
          onPressed: () => Navigator.pop(context, true),
          child: Text("삭제"),
        ),
      ],
    ),
  );
},
Dart
복사

실무에서는 거의 항상 사용 (실수 방지)

onDismissed

실제 삭제 처리 (핵심 로직)

onDismissed: (direction) {
  setState(() {
    items.removeAt(index);
  });

  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text("삭제되었습니다")),
  );
},
Dart
복사

전체 예제

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    final item = items[index];

    return Dismissible(
      key: Key(item.id),

      background: Container(
        color: Colors.red,
        alignment: Alignment.centerLeft,
        padding: EdgeInsets.only(left: 20),
        child: Icon(Icons.delete, color: Colors.white),
      ),

      secondaryBackground: Container(
        color: Colors.green,
        alignment: Alignment.centerRight,
        padding: EdgeInsets.only(right: 20),
        child: Icon(Icons.check, color: Colors.white),
      ),

      confirmDismiss: (direction) async {
        return await showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text("정말 삭제하시겠습니까?"),
            actions: [
              TextButton(
                onPressed: () => Navigator.pop(context, false),
                child: Text("취소"),
              ),
              TextButton(
                onPressed: () => Navigator.pop(context, true),
                child: Text("삭제"),
              ),
            ],
          ),
        );
      },

      onDismissed: (direction) {
        setState(() {
          items.removeAt(index);
        });

        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text("${item.title} 삭제됨")),
        );
      },

      child: ListTile(
        title: Text(item.title),
      ),
    );
  },
);
Dart
복사

TIP

1. key는 절대 중복되면 안됨

key: Key(item.id)
Dart
복사

index 쓰면 버그 발생 가능

2. confirmDismiss 없이 삭제하면 UX 안좋음

실수로 날림

3. 상태관리랑 같이 쓰면 더 강력

•

Provider

•

Riverpod

•

Bloc

서버 데이터 삭제까지 연결 가능

4. 방향별 다른 기능 구현 가능

onDismissed: (direction) {
  if (direction == DismissDirection.startToEnd) {
    // 완료 처리
  } else {
    // 삭제 처리
  }
}
Dart
복사