[flutter] Swipeable Widget을 이용한 선택 옵션 변경 기능 구현 방법

08 Dec 2023

flutter

이번 포스트에서는 Flutter 앱에서 Swipeable Widget을 사용하여 선택 옵션을 변경하는 방법에 대해 알아보겠습니다.

Swipeable Widget은 터치 이벤트를 사용하여 좌우로 슬라이드하여 상호 작용하는 기능을 제공합니다. 이를 통해 앱에서 선택 옵션을 변경하거나 항목을 삭제하는 등의 작업을 수월하게 처리할 수 있습니다.

Swipeable Widget을 사용하기 위해서는 먼저 swipeable 라이브러리를 pubspec.yaml 파일에 추가해야 합니다.

dependencies:
  swipeable: ^1.1.0

그리고 터미널에서 다음 명령을 실행하여 패키지를 설치합니다.

flutter pub get

다음은 Swipeable Widget을 사용하여 선택 옵션 변경 기능을 구현하는 간단한 예제 코드입니다.

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

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

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

class SelectionPage extends StatelessWidget {
  final List<String> options = ['Option 1', 'Option 2', 'Option 3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Selection Page'),
      ),
      body: ListView.builder(
        itemCount: options.length,
        itemBuilder: (context, index) {
          return Swipeable(
            key: Key(options[index]),
            onSwipeLeft: () {
              // 선택 옵션을 왼쪽으로 스와이프했을 때의 동작
              print('${options[index]} swiped left');
            },
            onSwipeRight: () {
              // 선택 옵션을 오른쪽으로 스와이프했을 때의 동작
              print('${options[index]} swiped right');
            },
            child: ListTile(
              title: Text(options[index]),
            ),
          );
        },
      ),
    );
  }
}

위의 예제 코드에서는 swipeable 패키지를 사용하여 ListView 내의 각 항목에 Swipeable Widget을 적용하고, 왼쪽 또는 오른쪽으로 스와이프할 때의 동작을 정의하고 있습니다.

이렇게 하면 사용자들은 선택 옵션을 스와이프하여 변경할 수 있게 됩니다.

마치며

이번 포스트에서는 Flutter에서 Swipeable Widget을 이용하여 선택 옵션을 변경하는 방법을 알아보았습니다. Swipeable을 사용하면 앱의 상호 작용성을 향상시키고 사용자 경험을 개선할 수 있습니다.

더 많은 정보는 Swipeable 패키지 공식 문서를 참고하시기 바랍니다.

1. Swipeable Widget이란?

2. Swipeable Widget 설치 방법

3. Swipeable Widget을 이용한 선택 옵션 변경 구현 방법

마치며