[flutter] Swipeable Widget을 이용한 박스 슬라이더 구현하기

08 Dec 2023

flutter

본 포스트에서는 Flutter 앱에서 Swipeable Widget을 이용하여 박스 슬라이더를 구현하는 방법에 대해 알아보겠습니다.

먼저, flutter_swipe_action_cell 패키지를 사용하여 Swipeable 기능을 구현할 수 있습니다.

pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다:

dependencies:
  flutter_swipe_action_cell: ^1.1.1

이후, 터미널에서 아래 명령어를 실행하여 패키지를 설치합니다:

flutter pub get

다음으로, Swipeable Widget을 이용하여 박스 슬라이더를 구현해 보겠습니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Swipeable Box Slider'),
        ),
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            return SwipeActionCell(
              key: ObjectKey(index),
              trailingActions: <SwipeAction>[
                SwipeAction(
                  title: "Delete",
                  onTap: (CompletionHandler handler) async {
                    handler(false);
                  },
                  color: Colors.red,
                  icon: Icons.delete,
                ),
              ],
              child: ListTile(
                title: Text("Box ${index + 1}"),
                leading: Icon(Icons.box),
              ),
            );
          },
        ),
      ),
    );
  }
}

위의 코드는 flutter_swipe_action_cell 패키지를 사용하여 Swipeable 기능을 가진 리스트 아이템을 만드는 예시입니다.

결론

본 포스트에서는 Flutter 앱에서 Swipeable Widget을 사용하여 박스 슬라이더를 구현하는 방법에 대해 알아보았습니다. Swipeable Widget은 사용자가 스와이프 동작을 통해 기능을 실행할 수 있는 편리하고 직관적인 기능을 제공합니다.

더 자세한 내용은 flutter_swipe_action_cell 패키지를 참고하시기 바랍니다.

1. Swipeable Widget 설치하기

2. Swipeable Widget 구현하기

결론