[flutter] ListView에서 아이템을 스와이프하여 다른 작업 수행하기

08 Dec 2023

flutter

ListView 위젯에서 아이템 스와이프하기

ListView 위젯을 사용하여 스크롤 가능한 목록을 만들 때, 사용자가 아이템을 스와이프하여 추가 작업을 수행하는 기능을 구현할 수 있습니다.

import 'package:flutter/material.dart';

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

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

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Swipe ListView Example'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Dismissible(
            key: Key('item $index'),
            background: Container(color: Colors.red),
            onDismissed: (direction) {
              // TODO: Perform additional action here
            },
            child: ListTile(
              title: Text('Item $index'),
              onTap: () {
                // TODO: Handle item tap
              },
            ),
          );
        },
      ),
    );
  }
}

위의 코드에서, ListView.builder를 이용하여 아이템을 동적으로 생성하고, 각각의 아이템을 Dismissible 위젯으로 감쌉니다. Dismissible 위젯은 스와이프 동작을 감지하여 지정된 작업을 실행할 수 있도록 해줍니다.

background 속성을 이용하여 스와이프할 때 나타나는 배경을 설정할 수 있으며, onDismissed 콜백을 사용하여 스와이프 동작이 완료되면 추가적인 작업을 수행할 수 있습니다.

고려할 사항

스와이프 작업으로 인해 실수로 아이템을 삭제하는 것을 방지하기 위해 사용자에게 삭제 여부를 묻는 대화상자(Dialog)를 표시할 수 있습니다.
스와이프 작업에 대한 사용자 경험을 향상하기 위해 아이콘 또는 추가적인 정보를 포함하여 시각적으로 보다 명확하게 표현할 수 있습니다.

위의 예제와 고려할 사항을 참고하여, Flutter 앱에서 ListView에서 아이템을 스와이프하여 다른 작업을 수행하는 기능을 구현할 수 있습니다.