Flutter 튜토리얼 14편: 드래그와 스와이프 구현

Why#

NOTE

리스트 항목을 삭제할 때 별도 버튼을 찾아 누르는 것보다 스와이프가 더 빠릅니다.
Dismissible 위젯은 이 패턴을 쉽게 구현하게 해줍니다.

1
사용자 스와이프 → Dismissible 감지 → onDismissed 콜백 → 상태 업데이트

What#

NOTE

Dismissible은 자식 위젯을 스와이프하여 화면에서 제거할 수 있게 해주는 위젯입니다.
스와이프 방향, 배경, 콜백 등을 설정할 수 있습니다.

How#

TIP

기본 스와이프 삭제 구현

1
import 'package:flutter/material.dart';
2

3
class SwipeToDismissDemo extends StatefulWidget {
4
  const SwipeToDismissDemo({super.key});
5

6
  @override
7
  State<SwipeToDismissDemo> createState() => _SwipeToDismissDemoState();
8
}
9

10
class _SwipeToDismissDemoState extends State<SwipeToDismissDemo> {
11
  final items = List<String>.generate(20, (i) => '항목 ${i + 1}');
12

13
  @override
14
  Widget build(BuildContext context) {
15
    return Scaffold(
16
      appBar: AppBar(title: const Text('스와이프 삭제')),
17
      body: ListView.builder(
18
        itemCount: items.length,
19
        itemBuilder: (context, index) {
20
          final item = items[index];
21
          return Dismissible(
22
            key: Key(item),
23
            onDismissed: (direction) {
24
              setState(() {
25
                items.removeAt(index);
26
              });
27
              ScaffoldMessenger.of(context).showSnackBar(
28
                SnackBar(content: Text('$item 삭제됨')),
29
              );
30
            },
31
            background: Container(color: Colors.red),
32
            child: ListTile(title: Text(item)),
33
          );
34
        },
35
      ),
36
    );
37
  }
38
}

핵심 속성

속성	설명
key	각 항목을 구분하는 고유 키 (필수)
onDismissed	스와이프 완료 시 호출되는 콜백
background	스와이프 시 보이는 배경 위젯
direction	스와이프 허용 방향

Watch out#

WARNING

key는 반드시 고유해야 합니다.
인덱스를 키로 사용하면 삭제 후 다른 항목이 잘못 제거될 수 있습니다.

1
// ❌ 잘못된 방법: 인덱스를 키로 사용
2
Dismissible(
3
  key: Key(index.toString()),
4
  // ...
5
)
6

7
// ✅ 올바른 방법: 항목의 고유 식별자 사용
8
Dismissible(
9
  key: Key(item.id),
10
  // ...
11
)

결론: Dismissible로 스와이프 삭제를 구현하고, 고유한 key를 사용해야 합니다.

Why#

NOTE

왼쪽과 오른쪽 스와이프에 다른 액션을 할당하면 더 많은 기능을 제공할 수 있습니다.
또한 중요한 작업 전에 확인 대화상자를 표시하면 실수를 방지할 수 있습니다.

1
← 스와이프: 삭제
2
→ 스와이프: 보관함으로 이동

What#

NOTE

background와 secondaryBackground로 양방향에 다른 배경을 표시합니다.
confirmDismiss 콜백으로 스와이프 완료 전에 확인을 받을 수 있습니다.

How#

TIP

양방향 스와이프 구현

1
Dismissible(
2
  key: Key(item.id),
3
  // 왼쪽에서 오른쪽 스와이프 시 배경
4
  background: Container(
5
    color: Colors.green,
6
    alignment: Alignment.centerLeft,
7
    padding: const EdgeInsets.only(left: 20),
8
    child: const Icon(Icons.archive, color: Colors.white),
9
  ),
10
  // 오른쪽에서 왼쪽 스와이프 시 배경
11
  secondaryBackground: Container(
12
    color: Colors.red,
13
    alignment: Alignment.centerRight,
14
    padding: const EdgeInsets.only(right: 20),
15
    child: const Icon(Icons.delete, color: Colors.white),
16
  ),
17
  confirmDismiss: (direction) async {
18
    if (direction == DismissDirection.endToStart) {
19
      // 삭제 확인 대화상자
20
      return await showDialog<bool>(
21
        context: context,
22
        builder: (context) => AlertDialog(
23
          title: const Text('삭제 확인'),
24
          content: Text('$item을(를) 삭제하시겠습니까?'),
25
          actions: [
26
            TextButton(
27
              onPressed: () => Navigator.pop(context, false),
28
              child: const Text('취소'),
29
            ),
30
            TextButton(
31
              onPressed: () => Navigator.pop(context, true),
32
              child: const Text('삭제'),
33
            ),
34
          ],
35
        ),
36
      );
37
    }
38
    // 보관함 이동은 확인 없이 허용
39
    return true;
40
  },
41
  onDismissed: (direction) {
42
    if (direction == DismissDirection.endToStart) {
43
      // 삭제 처리
44
      deleteItem(item);
45
    } else {
46
      // 보관함 이동 처리
47
      archiveItem(item);
48
    }
49
  },
50
  child: ListTile(title: Text(item.name)),
51
)

DismissDirection 옵션

값	설명
horizontal	양방향 스와이프 허용
startToEnd	왼쪽 → 오른쪽만 허용
endToStart	오른쪽 → 왼쪽만 허용
vertical	위아래 스와이프 허용
up	위로만 허용
down	아래로만 허용

Watch out#

WARNING

confirmDismiss에서 false를 반환하면 항목이 원래 위치로 돌아갑니다.
onDismissed는 confirmDismiss가 true를 반환한 후에만 호출됩니다.

1
confirmDismiss: (direction) async {
2
  // false 반환 시 항목 복원
3
  // true 반환 시 onDismissed 호출
4
  return shouldDismiss;
5
},

결론: background와 secondaryBackground로 양방향 피드백을, confirmDismiss로 확인 절차를 추가합니다.

Why#

NOTE

드래그 앤 드롭은 항목을 한 위치에서 다른 위치로 이동할 때 사용합니다.
장바구니에 상품을 추가하거나 파일을 폴더로 이동하는 데 적합합니다.

1
롱프레스 → 드래그 시작 → 드래그 중 → 드롭 존에 놓기

What#

NOTE

Draggable은 드래그할 수 있는 위젯을 만들고, DragTarget은 드롭을 받는 영역을 정의합니다.
LongPressDraggable은 롱프레스 후 드래그를 시작합니다.

How#

TIP

기본 드래그 앤 드롭 구현

1
import 'package:flutter/material.dart';
2

3
class DragDropDemo extends StatefulWidget {
4
  const DragDropDemo({super.key});
5

6
  @override
7
  State<DragDropDemo> createState() => _DragDropDemoState();
8
}
9

10
class _DragDropDemoState extends State<DragDropDemo> {
11
  String _droppedItem = '';
12

13
  @override
14
  Widget build(BuildContext context) {
15
    return Scaffold(
16
      appBar: AppBar(title: const Text('드래그 앤 드롭')),
17
      body: Column(
18
        children: [
19
          // 드래그 가능한 항목
20
          Draggable<String>(
21
            data: '사과',
22
            feedback: Material(
23
              elevation: 4,
24
              child: Container(
25
                padding: const EdgeInsets.all(16),
26
                color: Colors.red.withOpacity(0.8),
27
                child: const Text('🍎 사과', style: TextStyle(fontSize: 18)),
28
              ),
29
            ),
30
            childWhenDragging: Container(
31
              padding: const EdgeInsets.all(16),
32
              color: Colors.grey[300],
33
              child: const Text('🍎 사과', style: TextStyle(color: Colors.grey)),
34
            ),
35
            child: Container(
36
              padding: const EdgeInsets.all(16),
37
              color: Colors.red[100],
38
              child: const Text('🍎 사과', style: TextStyle(fontSize: 18)),
39
            ),
40
          ),
41
          const SizedBox(height: 100),
42
          // 드롭 타겟
43
          DragTarget<String>(
44
            builder: (context, candidateData, rejectedData) {
45
              final isHovering = candidateData.isNotEmpty;
46
              return Container(
47
                width: 200,
48
                height: 200,
49
                decoration: BoxDecoration(
50
                  color: isHovering ? Colors.green[100] : Colors.grey[200],
51
                  border: Border.all(
52
                    color: isHovering ? Colors.green : Colors.grey,
53
                    width: 2,
54
                  ),
55
                ),
56
                child: Center(
57
                  child: Text(
58
                    _droppedItem.isEmpty ? '여기에 드롭' : '$_droppedItem 추가됨!',
59
                    style: const TextStyle(fontSize: 18),
60
                  ),
61
                ),
62
              );
63
            },
64
            onAcceptWithDetails: (details) {
65
              setState(() {
66
                _droppedItem = details.data;
67
              });
68
            },
69
          ),
70
        ],
71
      ),
72
    );
73
  }
74
}

Draggable 핵심 속성

속성	설명
data	드롭 시 전달될 데이터
feedback	드래그 중 표시될 위젯
child	기본 상태의 위젯
childWhenDragging	드래그 중 원래 위치에 표시될 위젯

Watch out#

WARNING

Draggable<T>의 타입 T와 DragTarget<T>의 타입이 일치해야 합니다.
타입이 다르면 드롭이 작동하지 않습니다.

1
// ❌ 타입 불일치로 드롭 실패
2
Draggable<int>(data: 1, ...)
3
DragTarget<String>(...) // String을 기대하지만 int가 전달됨
4

5
// ✅ 타입 일치
6
Draggable<Item>(data: item, ...)
7
DragTarget<Item>(...)

결론: Draggable과 DragTarget의 타입을 일치시키고, feedback으로 드래그 중 시각적 피드백을 제공합니다.

Why#

NOTE

리스트 항목에서 Draggable을 사용하면 스크롤과 충돌할 수 있습니다.
LongPressDraggable은 롱프레스 후 드래그를 시작하여 스크롤과 충돌을 방지합니다.

1
리스트 스크롤: 짧은 터치로 스크롤
2
항목 드래그: 롱프레스 후 드래그

What#

NOTE

LongPressDraggable은 롱프레스를 인식한 후에만 드래그를 시작합니다.
dragAnchorStrategy는 드래그 시 위젯이 손가락에 상대적으로 어디에 위치할지 결정합니다.

How#

TIP

LongPressDraggable 구현

1
class DraggableMenuItem extends StatelessWidget {
2
  const DraggableMenuItem({
3
    super.key,
4
    required this.item,
5
  });
6

7
  final MenuItem item;
8

9
  @override
10
  Widget build(BuildContext context) {
11
    return LongPressDraggable<MenuItem>(
12
      data: item,
13
      // 손가락 위치에 피드백 위젯 배치
14
      dragAnchorStrategy: pointerDragAnchorStrategy,
15
      // 드래그 중 표시될 위젯
16
      feedback: Material(
17
        elevation: 8,
18
        borderRadius: BorderRadius.circular(12),
19
        child: SizedBox(
20
          width: 100,
21
          height: 100,
22
          child: ClipRRect(
23
            borderRadius: BorderRadius.circular(12),
24
            child: Opacity(
25
              opacity: 0.85,
26
              child: Image(
27
                image: item.imageProvider,
28
                fit: BoxFit.cover,
29
              ),
30
            ),
31
          ),
32
        ),
33
      ),
34
      // 기본 상태
35
      child: MenuItemCard(item: item),
36
    );
37
  }
38
}

드래그 앵커 전략

1
// 손가락 위치에 피드백 중앙 배치
2
dragAnchorStrategy: pointerDragAnchorStrategy,
3

4
// 자식 위젯 중앙에 피드백 배치 (기본값)
5
dragAnchorStrategy: childDragAnchorStrategy,
6

7
// 커스텀 앵커 전략
8
dragAnchorStrategy: (draggable, context, position) {
9
  return Offset(50, 50); // 피드백 왼쪽 상단에서 50, 50 위치
10
},

드래그 이벤트 콜백

1
LongPressDraggable<MenuItem>(
2
  data: item,
3
  onDragStarted: () {
4
    // 드래그 시작 시
5
    HapticFeedback.mediumImpact();
6
  },
7
  onDragEnd: (details) {
8
    // 드래그 종료 시
9
    print('드래그 종료: ${details.wasAccepted}');
10
  },
11
  onDragCompleted: () {
12
    // 드롭이 수락됨
13
    print('드롭 완료!');
14
  },
15
  onDraggableCanceled: (velocity, offset) {
16
    // 드롭이 취소됨
17
    print('드롭 취소');
18
  },
19
  // ...
20
)

Watch out#

WARNING

feedback 위젯은 원래 컨텍스트와 분리되어 렌더링됩니다.
Theme, MediaQuery 등의 상속 위젯에 접근하려면 Material 위젯으로 감싸야 합니다.

1
// ❌ Theme에 접근할 수 없음
2
feedback: Container(
3
  color: Theme.of(context).primaryColor, // 에러 가능
4
  child: Text('드래그 중'),
5
)
6

7
// ✅ Material로 감싸서 테마 적용
8
feedback: Material(
9
  child: Container(
10
    color: Theme.of(context).primaryColor,
11
    child: const Text('드래그 중'),
12
  ),
13
)

결론: 리스트에서는 LongPressDraggable을 사용하고, dragAnchorStrategy로 드래그 위치를 조정합니다.

Why#

NOTE

드롭 영역은 드래그 중인 항목이 위에 있을 때 시각적 피드백을 제공해야 합니다.
또한 특정 조건에서만 드롭을 허용해야 할 수 있습니다.

1
드래그 진입 → 하이라이트 → 조건 검사 → 수락 또는 거부

What#

NOTE

DragTarget의 builder는 드래그 상태에 따라 다른 UI를 반환합니다.
onWillAcceptWithDetails로 드롭 허용 여부를 결정할 수 있습니다.

How#

TIP

조건부 드롭 허용

1
DragTarget<CartItem>(
2
  builder: (context, candidateData, rejectedData) {
3
    final hasCandidate = candidateData.isNotEmpty;
4
    final hasRejected = rejectedData.isNotEmpty;
5

6
    return AnimatedContainer(
7
      duration: const Duration(milliseconds: 200),
8
      decoration: BoxDecoration(
9
        color: hasCandidate
10
            ? Colors.green[100]
11
            : hasRejected
12
                ? Colors.red[100]
13
                : Colors.grey[200],
14
        border: Border.all(
15
          color: hasCandidate
16
              ? Colors.green
17
              : hasRejected
18
                  ? Colors.red
19
                  : Colors.grey,
20
          width: 2,
21
        ),
22
        borderRadius: BorderRadius.circular(16),
23
      ),
24
      child: const Center(
25
        child: Text('장바구니'),
26
      ),
27
    );
28
  },
29
  onWillAcceptWithDetails: (details) {
30
    // 재고가 있는 항목만 수락
31
    return details.data.inStock;
32
  },
33
  onAcceptWithDetails: (details) {
34
    addToCart(details.data);
35
  },
36
  onLeave: (data) {
37
    // 드래그가 영역을 벗어남
38
    print('항목이 영역을 벗어남');
39
  },
40
)

builder 콜백 파라미터

파라미터	설명
candidateData	드롭 가능한 항목 목록
rejectedData	onWillAcceptWithDetails가 false를 반환한 항목 목록

장바구니 드래그 앤 드롭 예제

1
class ShoppingCart extends StatefulWidget {
2
  const ShoppingCart({super.key});
3

4
  @override
5
  State<ShoppingCart> createState() => _ShoppingCartState();
6
}
7

8
class _ShoppingCartState extends State<ShoppingCart> {
9
  final List<Product> _cartItems = [];
10

11
  @override
12
  Widget build(BuildContext context) {
13
    return Row(
14
      children: [
15
        // 상품 목록
16
        Expanded(
17
          child: ListView.builder(
18
            itemCount: products.length,
19
            itemBuilder: (context, index) {
20
              final product = products[index];
21
              return LongPressDraggable<Product>(
22
                data: product,
23
                feedback: ProductDragFeedback(product: product),
24
                child: ProductCard(product: product),
25
              );
26
            },
27
          ),
28
        ),
29
        // 장바구니 드롭 존
30
        DragTarget<Product>(
31
          builder: (context, candidates, rejected) {
32
            return CartDropZone(
33
              items: _cartItems,
34
              isHighlighted: candidates.isNotEmpty,
35
            );
36
          },
37
          onAcceptWithDetails: (details) {
38
            setState(() {
39
              _cartItems.add(details.data);
40
            });
41
          },
42
        ),
43
      ],
44
    );
45
  }
46
}

Watch out#

WARNING

candidateData는 현재 영역 위에 있는 모든 드래그 가능한 항목을 포함합니다.
여러 항목을 동시에 드래그하는 경우를 처리해야 할 수 있습니다.

1
builder: (context, candidateData, rejectedData) {
2
  // 여러 항목이 동시에 드래그될 수 있음
3
  if (candidateData.length > 1) {
4
    return MultiDropIndicator();
5
  }
6
  return SingleDropIndicator();
7
}

결론: onWillAcceptWithDetails로 조건부 드롭을 구현하고, candidateData와 rejectedData로 상태별 UI를 표시합니다.

Why#

NOTE

Flutter 앱과 다른 앱 간에 드래그 앤 드롭이 필요한 경우가 있습니다.
예를 들어 이미지를 파일 탐색기로 드래그하거나, 외부 파일을 앱으로 드래그하는 기능입니다.

1
앱 내 드래그: Draggable/DragTarget 사용
2
앱 간 드래그: super_drag_and_drop 패키지 사용

What#

NOTE

super_drag_and_drop 패키지는 Flutter 앱과 다른 앱 간의 드래그 앤 드롭을 지원합니다.
데스크톱, 모바일, 웹 플랫폼에서 모두 작동합니다.

How#

TIP

super_drag_and_drop 패키지 설치

1
dependencies:
2
  super_drag_and_drop: ^0.8.0

기본 사용법

1
import 'package:super_drag_and_drop/super_drag_and_drop.dart';
2

3
class ExternalDragDemo extends StatelessWidget {
4
  const ExternalDragDemo({super.key});
5

6
  @override
7
  Widget build(BuildContext context) {
8
    return DropRegion(
9
      formats: Formats.standardFormats,
10
      onDropOver: (event) {
11
        // 드래그 중인 데이터 형식 확인
12
        if (event.session.allowedOperations.contains(DropOperation.copy)) {
13
          return DropOperation.copy;
14
        }
15
        return DropOperation.none;
16
      },
17
      onPerformDrop: (event) async {
18
        // 드롭된 항목 처리
19
        final item = event.session.items.first;
20
        final reader = item.dataReader!;
21

22
        // 이미지 데이터 읽기
23
        if (reader.canProvide(Formats.png)) {
24
          reader.getFile(Formats.png, (file) async {
25
            final data = await file.readAll();
26
            // 이미지 데이터 처리
27
          });
28
        }
29
      },
30
      child: Container(
31
        width: 300,
32
        height: 300,
33
        color: Colors.grey[200],
34
        child: const Center(
35
          child: Text('파일을 여기에 드롭하세요'),
36
        ),
37
      ),
38
    );
39
  }
40
}

앱 간 드래그 비교

기능	Draggable	super_drag_and_drop
앱 내 드래그	✅	✅
앱 간 드래그	❌	✅
플랫폼 지원	모든 플랫폼	데스크톱, 모바일, 웹
복잡도	낮음	중간
데이터 타입 선언	비동기	동기 (사전 선언)

Watch out#

WARNING

super_drag_and_drop은 플랫폼 API와 동기적으로 통신해야 합니다.
따라서 허용할 데이터 형식을 미리 선언해야 합니다.

1
// 허용할 형식을 미리 선언
2
DropRegion(
3
  formats: [
4
    Formats.png,
5
    Formats.jpeg,
6
    Formats.plainText,
7
  ],
8
  // ...
9
)

앱 내 드래그만 필요하다면 Draggable과 DragTarget이 더 간단합니다.

결론: 앱 내 드래그는 기본 위젯을, 앱 간 드래그는 super_drag_and_drop 패키지를 사용합니다.