Drag and Drop 라이브러리

이번에 drag and drop 라이브러리 괜찮은게 보여서 가져와 보았습니다.

https://pub.dev/packages/drag_and_drop_lists

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

class DragAndDropPage extends StatefulWidget {
  const DragAndDropPage({Key? key}) : super(key: key);

  @override
  State<DragAndDropPage> createState() => _DragAndDropPageState();
}

class _DragAndDropPageState extends State<DragAndDropPage> {
  List<Word> wordList = [
    Word(qes: 'car', ans: '차'),
    Word(qes: 'apple', ans: '사과'),
    Word(qes: 'banana', ans: '바나나'),
    Word(qes: 'orange', ans: '오렌지'),
    Word(qes: 'flutter', ans: '실룩거리다'),
  ];
  void moveOrder(int oldIndex, int newIndex) {
    if (oldIndex != newIndex) {
      Word movedStation = wordList.removeAt(oldIndex);
      wordList.insert(newIndex, movedStation);
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drag and Drop'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: DragAndDropLists(
              listDecoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(12),
                ),
                border: Border.all(
                  color: Colors.blue,
                  width: 1,
                ),
                color: Colors.white,
              ),
              children: List.generate(
                wordList.length,
                (index) => DragAndDropList(
                  header: Padding(
                    padding: EdgeInsets.only(
                      left: 16,
                      top: 24,
                    ),
                    child: Row(
                      children: [
                        Container(
                          alignment: Alignment.center,
                          padding: EdgeInsets.all(8),
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: Colors.yellow,
                          ),
                          child: Text(
                            '${index + 1}',
                            style: TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ),
                        SizedBox(
                          width: 8,
                        ),
                        Text(
                          wordList[index].qes,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                  children: <DragAndDropItem>[
                    DragAndDropItem(
                      child: GestureDetector(
                        child: Container(
                          width: 288,
                          margin: EdgeInsets.symmetric(
                            vertical: 16,
                            horizontal: 16,
                          ),
                          padding: EdgeInsets.symmetric(
                            horizontal: 16,
                            vertical: 20,
                          ),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(
                              Radius.circular(12),
                            ),
                            color: Colors.white,
                          ),
                          child: Row(
                            children: [
                              Text(
                                '정답 : ${wordList[index].ans}',
                                style: TextStyle(
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              onItemReorder: (int a, int b, int c, int d) => {},
              onListReorder: moveOrder,
              onListDraggingChanged: (list, dragging) => print('zz'),
              listPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
              listDragHandle: DragHandle(
                verticalAlignment: DragHandleVerticalAlignment.top,
                child: Padding(
                    padding: EdgeInsets.only(
                      right: 16,
                      top: 26,
                    ),
                    child: Icon(Icons.menu)),
              ),
              listDecorationWhileDragging: BoxDecoration(
                color: Colors.white.withOpacity(.3),
                borderRadius: BorderRadius.all(
                  Radius.circular(12),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class Word {
  final String qes;
  final String ans;

  Word({
    required this.qes,
    required this.ans,
  });
}

위 라이브러리는 List와 Item을 자유롭게 drag and drop할 수 있는 라이브러리인데 저의 경우 item까지는 drag and drop할 필요는 없어서 사용하지 않았습니다.

저 같은 경우 List를 옮기면 onListReorder 함수가 실행되는데 이 때 List를 옮기기 전의 인덱스와 옮긴후의 인덱스를 주는데 이 받은 인덱스로 배열의 위치를 옮겨주셔야 합니다.

onItemReorder는 위에 코드에는 작성하지 않았지만 Item을 옮길때 실행해주는 함수이고 위에 onListReorder와 다른점은 Item은 List를 옮겨 다닐 수 있기 때문에 옮기기 전 List 인덱스 옮긴 후의 List 인덱스, 옮기기 전의 Item 인덱스와 옮긴 후의 아이템 Iten 이렇게 4개가 주어집니다.