[flutter] Swipeable Widget을 사용한 화면 비추기 기능 구현 방법

08 Dec 2023

flutter

앱에서 화면을 비추거나 숨기는 기능은 사용자 경험을 향상시키는 데 중요합니다. Flutter에서는 Swipeable Widget을 사용하여 이러한 기능을 구현할 수 있습니다. 이 게시물에서는 Swipeable Widget을 사용하여 화면을 비추거나 숨기는 방법에 대해 알아보겠습니다.

Swipeable Widget은 사용자가 제스처를 사용하여 움직일 수 있는 위젯입니다. 사용자가 화면을 스와이프하면 해당 위젯이 움직이고, 특정 동작을 수행할 수 있습니다. 이를 활용하여 화면을 비추거나 숨길 수 있습니다.

다음은 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 Widget 예제'),
        ),
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            return SwipeActionCell(
              key: ObjectKey(index),
              trailingActions: <SwipeAction>[
                SwipeAction(
                  title: "숨기기",
                  onTap: (CompletionHandler handler) async {
                    // 숨기기 동작 구현
                    handler(false);
                  },
                  color: Colors.red,
                ),
                SwipeAction(
                  title: "비추기",
                  onTap: (CompletionHandler handler) async {
                    // 비추기 동작 구현
                    handler(true);
                  },
                  color: Colors.green,
                ),
              ],
              child: ListTile(
                title: Text('항목 $index'),
              ),
            );
          },
        ),
      ),
    );
  }
}

위 예제 코드는 ListView.builder를 사용하여 Swipeable Widget을 구현한 것입니다. 각 항목을 스와이프하면 “숨기기” 또는 “비추기” 옵션이 나타나며, 해당 동작을 수행할 수 있습니다.

결론

Swipeable Widget을 사용하여 화면을 비추거나 숨기는 기능을 구현하는 방법에 대해 알아보았습니다. 이를 활용하면 사용자 경험을 향상시키고, 앱의 기능을 보다 유연하게 제공할 수 있습니다. Flutter에서는 다양한 상황에 맞게 Swipeable Widget을 활용하여 다양한 기능을 구현할 수 있습니다.

참고: flutter_swipe_action_cell 패키지

```

Swipeable Widget 소개

Swipeable Widget 사용 방법

결론