[flutter] Swipeable Widget을 활용한 리스트 아이템 삭제 기능 구현하기

08 Dec 2023

flutter

이번 포스트에서는 Flutter 어플리케이션에서 Swipeable Widget을 활용하여 리스트 아이템 삭제 기능을 구현하는 방법에 대해 알아보겠습니다.

Swipeable Widget은 사용자의 스와이프 제스처에 반응하여 반응형 UI를 만들 수 있는 위젯입니다. 이를 활용하면 리스트 아이템을 스와이프하여 삭제, 수정 또는 다른 작업을 수행할 수 있습니다.

먼저 flutter_swipe_action 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter_swipe_action: ^1.0.2

위의 설정을 추가한 후, pub get 명령어를 사용하여 패키지를 설치합니다.

다음은 Swipeable Widget을 사용하여 리스트 아이템 삭제 기능을 구현하는 예제 코드입니다.

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> items = ["Item 1", "Item 2", "Item 3"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Swipeable List"),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return SwipeActionCell(
            key: ObjectKey(items[index]),
            trailingActions: <SwipeAction>[
              SwipeAction(
                  onTap: (CompletionHandler completionHandler) {
                    setState(() {
                      items.removeAt(index);
                      completionHandler(true);
                    });
                  },
                  color: Colors.red,
                  icon: Icons.delete,
              )
            ],
            child: ListTile(
              title: Text(items[index]),
            ),
          );
        },
      ),
    );
  }
}

위의 코드에서 flutter_swipe_action 패키지를 사용하여 리스트 아이템을 스와이프하여 삭제할 수 있는 예제를 살펴보았습니다.

flutter_swipe_action: https://pub.dev/packages/flutter_swipe_action

이제 Swipeable Widget을 활용하여 Flutter 어플리케이션에서 리스트 아이템 삭제 기능을 구현하는 방법에 대해 자세히 알아보았습니다. Swipeable Widget을 적절히 사용하면 사용자 친화적인 UI를 구현할 수 있으므로, 다양한 상황에서 활용할 수 있는 유용한 기술입니다.

다음으로는 수정 및 다른 작업 기능도 추가하여 Swipeable Widget의 다양한 활용법에 대해 살펴보겠습니다.

1. Swipeable Widget이란?

2. Swipeable Widget 설치

3. Swipeable Widget을 사용한 리스트 아이템 삭제 구현