30. [Flutter] Dismissible 로 List item 밀어서 삭제하기

Dismissible 

Dismissible 위젯은 사용자가 리스트 항목을 스와이프하여 제거하거나 다른 동작을 수행할 때 유용한 Flutter 위젯입니다. 

주로 리스트나 그리드 아이템과 함께 사용되며, 사용자 상호 작용을 처리하고 해당 항목을 제어하는 데 도움을 줍니다.

 

 

예시.

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

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

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  late List<String> movies = [
    "바람과 함께 사라지다",
    "아이리시맨",
    "반지의 제왕 : 왕의 귀환",
    "트로이 디렉터스 컷",
    "타이타닉",
    "아바타: 물의 길",
    "작가 미상",
    "바빌론",
    "베티블루 37.2 디오리지널",
    "어벤져스: 엔드게임",
    "내부자들: 디 오리지널",
    "오펜하이머",
    "가장 따뜻한 색, 블루",
    "드라이브 마이 카",
    "반지의 제왕 : 두개의 탑",
    "반지의 제왕 : 반지원정대",
    "보 이즈 어프레이드",
    "팬텀: 더 뮤지컬 라이브",
    "더 배트맨"
  ];
  void _onDismissed(DismissDirection direction, int index) {
    print("방향: $direction, dismiss된 데이터: ${movies[index]}");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: movies.length,
        itemBuilder: (context, index) {
          return Dismissible(
            onDismissed: (direction) => _onDismissed(direction, index),
            background: Container(
                color: Colors.green.shade400,
                alignment: Alignment.centerLeft,
                child: const FaIcon(FontAwesomeIcons.moneyCheckDollar)),
            secondaryBackground: Container(
                color: Colors.red.shade400,
                alignment: Alignment.centerRight,
                child: const FaIcon(FontAwesomeIcons.trashCan)),
            key: Key("$index"),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 1, vertical: 3),
              child: Container(
                height: 50,
                decoration: BoxDecoration(color: Colors.amber.shade300),
                child: Center(
                  child: Text(
                    movies[index],
                    style: const TextStyle(fontSize: 20),
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

 

설명.

• onDismissed: 사용자가 항목을 스와이프하여 제거할 때 호출되는 콜백 함수입니다. direction 매개변수에는 스와이프 방향이 전달됩니다. 이 콜백을 사용하여 제거된 항목을 처리하거나 작업을 수행할 수 있습니다. 예제에서는 _onDismissed 함수를 호출하여 스와이프 방향과 해당 인덱스를 출력합니다.
• background: 항목을 왼쪽으로 스와이프할 때 표시되는 배경 위젯입니다. 이 배경 위젯에는 스와이프 동작과 관련된 아이콘 또는 내용을 표시할 수 있습니다. 여기에서는 FontAwesomeIcons.moneyCheckDollar 아이콘을 사용한 녹색 배경을 설정합니다.
• secondaryBackground: 항목을 오른쪽으로 스와이프할 때 표시되는 배경 위젯입니다. 이 배경 위젯에는 스와이프 동작과 관련된 아이콘 또는 내용을 표시할 수 있습니다. 여기에서는 FontAwesomeIcons.trashCan 아이콘을 사용한 빨간색 배경을 설정합니다.
• key: 각 Dismissible 위젯의 고유한 키를 설정합니다. 이 키는 Flutter가 각 항목을 식별하는 데 사용되며, 항목이 추가되거나 제거될 때 동일한 키를 가진 Dismissible 위젯을 찾습니다. 보통 항목의 인덱스를 키로 사용합니다.
• child: 원래 항목의 UI를 여기에 구성합니다. 스와이프 및 제거 동작 이외의 항목 내용을 표시하는 역할을 합니다.

 

Dismissible 의 주요 속성들.

• key: Dismissible 위젯의 고유한 식별자 키입니다. 이 키는 Flutter에게 각 항목을 식별하고 관리하는 데 사용됩니다. 주로 항목의 인덱스를 키로 설정합니다.
• child: Dismissible 위젯 내에 표시되는 원래 항목의 UI입니다. 사용자에게 보여지는 내용을 구성하는 역할을 합니다.
• onDismissed: 사용자가 항목을 스와이프하여 제거할 때 호출되는 콜백 함수입니다. 스와이프 방향(DismissDirection)을 매개변수로 받아서 처리합니다. 주로 제거된 항목을 리스트나 데이터에서 실제로 제거하거나 다른 동작을 수행하는 데 사용됩니다.
• background: 항목을 스와이프할 때 표시되는 배경 위젯입니다. 스와이프 동작과 관련된 내용을 표시할 수 있습니다. 예를 들어, 삭제 아이콘 또는 긍정적인 작업을 나타내는 아이콘 등을 배경에 추가할 수 있습니다.
• secondaryBackground: 항목을 반대 방향으로 스와이프할 때 표시되는 배경 위젯입니다. 주로 부정적인 작업을 나타내는 아이콘 또는 삭제 동작을 배경에 추가합니다.
• confirmDismiss: 사용자가 항목을 스와이프할 때 제거를 확인하기 위한 다이얼로그를 표시하기 전에 호출되는 함수입니다. 이 함수는 불리언 값을 반환하며, true를 반환하면 스와이프가 완료되고 항목이 제거됩니다. false를 반환하면 스와이프가 취소됩니다.
• direction: 스와이프를 허용할 방향을 지정합니다. 기본값은 DismissDirection.horizontal로 좌우 스와이프를 허용합니다. DismissDirection.vertical로 설정하면 상하 스와이프를 허용할 수 있습니다.
• resizeDuration 및 crossAxisEndOffset: 스와이프 동작이 발생할 때 항목의 크기 조정 및 위치 조정에 관련된 속성입니다. 기본값으로 크기 조정 애니메이션의 지속 시간과 위치 조정을 설정합니다.