[flutter] ListView에서 아이템을 스와이프하여 좌우 스크롤하기

08 Dec 2023

flutter

안녕하세요! Flutter에서 ListView를 사용하여 좌우로 스크롤 가능한 아이템을 만들고 싶다면, Swipeable Widget을 사용하는 것이 좋습니다. Swipeable은 사용자가 좌우로 스와이프하여 추가 기능을 사용할 수 있는 위젯입니다. 이제 ListView에서 아이템을 스와이프하여 좌우로 스크롤하는 방법을 알아보겠습니다.

Swipeable ListView 구현하기

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 ListView'),
        ),
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            return SwipeActionCell(
              child: ListTile(title: Text('Item $index')),
              trailingActions: <SwipeAction>[
                SwipeAction(
                  title: "More",
                  onTap: (CompletionHandler handler) async {
                    // Add your custom logic here for "More" action
                    handler(false);
                  },
                  color: Colors.grey,
                ),
                SwipeAction(
                  title: "Delete",
                  onTap: (CompletionHandler handler) async {
                    // Add your custom logic here for "Delete" action
                    handler(true);
                  },
                  color: Colors.red,
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

위의 코드는 flutter_swipe_action_cell 라이브러리를 사용하여 Swipeable ListView를 구현한 예시입니다. ListView.builder를 사용하여 아이템을 표시하고, SwipeActionCell로 각 아이템을 감싸 SwipeAction을 추가합니다. 이제 각 아이템을 스와이프하여 좌우 스크롤할 수 있게 됩니다.

이렇게 ListView에서 swipeable한 아이템을 만들 수 있습니다. 해당 위젯과 기능에 대한 자세한 내용은 flutter_swipe_action_cell 라이브러리 공식 문서를 참고하시기 바랍니다.

이상으로 ListView에서 아이템을 스와이프하여 좌우로 스크롤하는 방법에 대해 알아보았습니다. 감사합니다!