[flutter] 플러터에서의 드래그 앤 드롭 처리 방법

30 Nov 2023

flutter

플러터는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동일한 코드로 애플리케이션을 개발할 수 있도록 지원합니다. 플러터에서는 드래그 앤 드롭 기능을 구현하여 사용자가 요소를 드래그하여 원하는 위치로 이동시킬 수 있습니다. 이번 포스트에서는 플러터에서의 드래그 앤 드롭 처리 방법에 대해 알아보겠습니다.

드래그 앤 드롭 패키지

플러터에서 드래그 앤 드롭 기능을 구현하기 위해서는 flutter_reorderable_list나 flutter_drag_and_drop_list와 같은 드래그 앤 드롭 패키지를 사용할 수 있습니다.

예를 들어, flutter_reorderable_list 패키지를 사용하여 드래그 앤 드롭 기능을 구현하는 방법을 살펴보겠습니다.

먼저, flutter_reorderable_list 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter_reorderable_list: ^0.2.3

패키지를 가져와서 사용할 위젯을 생성합니다.

import 'package:flutter_reorderable_list/flutter_reorderable_list.dart';
import 'package:flutter/material.dart';

class MyDragAndDropWidget extends StatefulWidget {
  @override
  _MyDragAndDropWidgetState createState() => _MyDragAndDropWidgetState();
}

class _MyDragAndDropWidgetState extends State<MyDragAndDropWidget> {
  List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

  @override
  Widget build(BuildContext context) {
    return ReorderableListView(
      onReorder: (oldIndex, newIndex) {
        setState(() {
          if(oldIndex < newIndex) newIndex -= 1;
          final item = items.removeAt(oldIndex);
          items.insert(newIndex, item);
        });
      },
      children: items.map((item) => ListTile(
        key: Key(item),
        title: Text(item),
      )).toList(),
    );
  }
}

위 코드에서는 ReorderableListView 위젯을 사용하여 드래그 앤 드롭 기능을 구현하였습니다. onReorder 콜백 함수에서는 아이템의 이동을 처리하고, ListTile 위젯을 사용하여 각 아이템을 나타내었습니다.

만든 위젯을 앱에서 사용합니다.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Drag and Drop Example')),
        body: MyDragAndDropWidget(),
      ),
    );
  }
}

위 코드에서는 MyDragAndDropWidget을 앱의 화면에 출력하도록 하였습니다.

이제 앱을 실행하면 드래그 앤 드롭 기능이 동작하는 것을 확인할 수 있습니다.

결론

플러터에서는 다양한 패키지를 활용하여 드래그 앤 드롭 기능을 구현할 수 있습니다. 이번 포스트에서는 flutter_reorderable_list 패키지를 사용하는 예제를 설명하였으며, 다른 패키지들도 함께 찾아보시기 바랍니다.

참고 자료: