[flutter] Swipeable Widget을 사용하여 사이드 메뉴 기능 구현하기

08 Dec 2023

flutter

1. `flutter_slidable` 패키지 추가하기

먼저, flutter_slidable 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가하세요.

dependencies:
  flutter_slidable: ^0.6.0

그리고 패키지를 설치하기 위해 터미널에서 아래 명령어를 실행하세요.

flutter pub get

이제 flutter_slidable 패키지를 사용하여 사이드 메뉴를 구현해 봅시다. 아래는 간단한 예제 코드입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Swipeable Widget 예제'),
        ),
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Slidable(
              actionPane: SlidableDrawerActionPane(),
              actionExtentRatio: 0.25,
              child: ListTile(
                title: Text('아이템 $index'),
              ),
              actions: <Widget>[
                IconSlideAction(
                  caption: '아이템 $index 편집',
                  color: Colors.blue,
                  icon: Icons.edit,
                  onTap: () => print('아이템 $index 편집'),
                ),
              ],
              secondaryActions: <Widget>[
                IconSlideAction(
                  caption: '아이템 $index 삭제',
                  color: Colors.red,
                  icon: Icons.delete,
                  onTap: () => print('아이템 $index 삭제'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

위 예제 코드에서는 flutter_slidable 패키지를 사용하여 ListView의 각 항목마다 사이드 메뉴를 추가했습니다. 사용자가 리스트 아이템을 왼쪽으로 스와이프하면 편집 및 삭제 기능이 나타나게 됩니다.

이제 위 예제 코드를 실행해보세요. 손가락으로 리스트 항목을 스와이프하여 사이드 메뉴가 나타나는 것을 확인할 수 있을 것입니다.

flutter_slidable 패키지를 사용하여 간단하게 Swipeable Widget을 통해 사이드 메뉴 기능을 구현할 수 있는 것을 확인할 수 있었습니다. 더 복잡한 UI 요구사항이 있을 때도 flutter_slidable 패키지를 사용하여 손쉽게 구현할 수 있을 것입니다.

참고 자료

flutter_slidable 패키지: https://pub.dev/packages/flutter_slidable

1. flutter_slidable 패키지 추가하기

2. Swipeable Widget을 사용하여 사이드 메뉴 구현하기

참고 자료

1. `flutter_slidable` 패키지 추가하기