[flutter] 플러터 Swipeable을 이용한 날짜 선택 기능 구현 방법

08 Dec 2023

flutter

플러터(Flutter)를 사용하여 Swipeable을 이용하여 날짜 선택 기능을 구현하는 방법에 대해 알아보겠습니다.

먼저, 프로젝트의 pubspec.yaml 파일에 flutter_swipe_action_cell 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_swipe_action_cell: ^1.1.0

그런 다음 터미널에서 flutter pub get 명령을 사용하여 패키지를 다운로드 및 설치합니다.

2. Swipeable을 이용한 날짜 선택 기능 구현

다음으로, Swipeable을 이용하여 날짜 선택 기능을 구현합니다. 아래는 예시 코드입니다.

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

class DateSelector extends StatefulWidget {
  @override
  _DateSelectorState createState() => _DateSelectorState();
}

class _DateSelectorState extends State<DateSelector> {
  List<DateTime> dates = [
    DateTime.now(),
    DateTime.now().add(Duration(days: 1)),
    DateTime.now().add(Duration(days: 2)),
    // Add more dates as needed
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: dates.length,
      itemBuilder: (BuildContext context, int index) {
        return SwipeActionCell(
          key: ObjectKey(dates[index]),
          trailingActions: <SwipeAction>[
            SwipeAction(
              title: 'Select',
              onTap: (CompletionType type) {
                // Handle date selection
                print('Selected date: ${dates[index]}');
              },
              color: Colors.green,
              icon: Icons.check,
            ),
          ],
          child: ListTile(
            title: Text('${dates[index].month}/${dates[index].day}'),
          ),
        );
      },
    );
  }
}

위의 코드는 flutter_swipe_action_cell 패키지를 사용하여 Swipeable을 이용하여 각 날짜를 선택할 수 있는 기능을 구현한 예시입니다.

이제 위젯을 화면에 추가하고 사용자가 Swipe하여 날짜를 선택할 수 있도록 만들어보세요.

플러터를 이용하여 Swipeable을 통한 날짜 선택 기능을 구현하는 방법에 대한 내용을 통해 여러분이 원하는 어플리케이션에 적용할 수 있기를 바랍니다.

참고 자료 - flutter_swipe_action_cell 패키지

1. Swipeable Widget 추가

2. Swipeable을 이용한 날짜 선택 기능 구현