[flutter] Swipeable Widget을 사용하여 도형 변경 기능 구현하기

08 Dec 2023

flutter

Flutter 앱을 개발할 때 사용자 경험을 향상시키기 위해 Swipeable Widget을 사용할 수 있습니다. 이를 이용하여 사용자가 스와이프 동작을 통해 도형을 변경하는 기능을 구현하는 방법에 대해 살펴보겠습니다.

먼저, flutter_swipe_action_cell 패키지를 사용하여 Swipeable Widget을 추가합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다:

dependencies:
  flutter_swipe_action_cell: ^1.1.3

그리고 다음과 같이 패키지를 import 합니다:

import 'package:flutter_swipe_action_cell/flutter_swipe_action_cell.dart';

2. 도형 변경 기능 구현하기

이제 Swipeable Widget을 사용하여 도형을 변경하는 기능을 구현합니다. 예를 들어, 정사각형, 삼각형, 원 순서로 스와이프하여 변경할 수 있는 기능을 구현한다고 가정해보겠습니다.

다음은 Swipeable Widget을 사용하여 도형을 변경하는 기능을 구현하는 예시 코드입니다:

List<String> shapes = ['정사각형', '삼각형', '원'];
int currentShapeIndex = 0;

Widget build(BuildContext context) {
  return SwipeActionCell(
    key: UniqueKey(),
    trailingActions: <SwipeAction>[
      SwipeAction(
        title: "다음 도형",
        onTap: (CompletionStatus status) {
          setState(() {
            currentShapeIndex = (currentShapeIndex + 1) % shapes.length;
          });
          status.dismiss();
        },
        color: Colors.green,
      )
    ],
    child: Container(
      alignment: Alignment.center,
      height: 100,
      width: 100,
      color: Colors.blue,
      child: Text(shapes[currentShapeIndex]),
    ),
  );
}

위 코드에서는 Flutter의 flutter_swipe_action_cell 패키지를 사용하여 Swipeable Widget을 만들고, 사용자가 스와이프하여 다음 도형으로 변경할 수 있게 구현되어 있습니다.

이제 위 코드를 사용하여 앱에 도형 변경 기능을 추가할 수 있습니다.

마무리

Swipeable Widget을 사용하여 도형 변경 기능을 구현하는 방법에 대해 알아보았습니다. 이러한 기능을 구현하여 사용자가 편리하게 도형을 변경할 수 있는 앱을 개발할 수 있을 것입니다.

1. Swipeable Widget 추가하기

2. 도형 변경 기능 구현하기

마무리