Dismissible

Flutter에서 항목을 스와이프하여 삭제하기: Dismissible

Dismissible 위젯은 사용자가 스와이프하여 항목을 삭제하거나, 다른 작업을 수행할 수 있게 해주는 위젯입니다. 이 위젯은 주로 리스트 항목을 스와이프하여 삭제하는 기능을 구현할 때 사용됩니다.

주요 속성

• key: 각 항목을 고유하게 식별하기 위한 키입니다. Dismissible 위젯은 반드시 고유한 키를 가져야 합니다.
• child: 스와이프하여 삭제할 항목의 콘텐츠입니다.
• onDismissed: 항목이 스와이프되어 삭제되었을 때 호출되는 콜백 함수입니다. 이 함수는 스와이프된 방향과 함께 호출됩니다.
• direction: 항목을 스와이프할 수 있는 방향을 설정합니다. 기본값은 DismissDirection.horizontal이며, DismissDirection.vertical, DismissDirection.endToStart, DismissDirection.startToEnd로 설정할 수 있습니다.
• background: 항목이 스와이프될 때 배경에 표시될 위젯입니다. 일반적으로 삭제 아이콘이나 색상을 포함합니다.
• secondaryBackground: 항목이 반대 방향으로 스와이프될 때 배경에 표시될 위젯입니다.

주요 활용도

• 리스트 항목 삭제: 사용자가 항목을 스와이프하여 삭제할 수 있는 기능을 구현합니다.
• 스와이프 제스처를 통한 다른 작업 수행: 스와이프 제스처를 통해 다른 작업(예: 항목 완료, 즐겨찾기 추가 등)을 수행할 수 있습니다.

코드 예제

아래 예제는 Dismissible 위젯을 사용하여 리스트 항목을 스와이프하여 삭제하는 방법을 보여줍니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DismissibleExample(),
    );
  }
}

class DismissibleExample extends StatefulWidget {
  @override
  _DismissibleExampleState createState() => _DismissibleExampleState();
}

class _DismissibleExampleState extends State<DismissibleExample> {
  final List<String> items = List<String>.generate(10, (i) => "Item ${i + 1}");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dismissible Example'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Dismissible(
            key: Key(items[index]),
            direction: DismissDirection.endToStart,
            onDismissed: (direction) {
              setState(() {
                items.removeAt(index);
              });

              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('${items[index]} dismissed')),
              );
            },
            background: Container(
              color: Colors.red,
              alignment: Alignment.centerRight,
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Icon(
                Icons.delete,
                color: Colors.white,
              ),
            ),
            child: ListTile(
              title: Text(items[index]),
            ),
          );
        },
      ),
    );
  }
}

설명

• Dismissible 위젯: 각 리스트 항목을 Dismissible로 감싸서 스와이프하여 삭제할 수 있게 만듭니다.
• key 속성: 각 항목을 고유하게 식별하기 위한 키를 설정합니다.
• onDismissed 콜백: 항목이 스와이프되어 삭제될 때 호출되는 함수로, 삭제된 항목을 리스트에서 제거하고 스낵바를 통해 알림을 표시합니다.
• background 속성: 항목이 스와이프될 때 표시될 배경으로, 빨간색 배경과 삭제 아이콘을 설정합니다.
• direction 속성: 항목을 스와이프할 수 있는 방향을 DismissDirection.endToStart로 설정합니다.

추가 팁

• 스와이프 방향 설정: 필요에 따라 DismissDirection.horizontal, DismissDirection.vertical, DismissDirection.startToEnd 등 다양한 스와이프 방향을 설정할 수 있습니다.
• 다양한 작업 수행: onDismissed 콜백 내에서 삭제 외에도 다양한 작업(예: 항목 완료 처리, 즐겨찾기 추가 등)을 수행할 수 있습니다.

관련 자료

• 공식 문서 - Dismissible
• Flutter Widget of the Week - Dismissible