[flutter] ExpansionPanel 위젯의 드래그 앤 드롭 기능 추가하기
이번 글에서는 Flutter의 ExpansionPanel 위젯에 드래그 앤 드롭 기능을 추가하는 방법에 대해 알아보겠습니다.
ExpansionPanel 위젯 소개
ExpansionPanel 위젯은 Flutter에서 확장 가능한 패널을 만들기 위해 사용하는 위젯입니다. 기본적으로 패널은 접혀있는 상태로 시작하며, 여러 개의 패널을 한 번에 펼치거나 접을 수 있습니다.
드래그 앤 드롭 기능 추가하기
ExpansionPanel 위젯에 드래그 앤 드롭 기능을 추가하려면 몇 가지 단계를 따라야 합니다.
1. 패널 위젯을 드래그 가능하게 만들기
패널 위젯을 드래그 가능하게 만들기 위해서는 Draggable 위젯을 사용해야 합니다. Draggable 위젯은 해당 위젯의 자식 위젯을 드래그할 수 있는 기능을 제공합니다.
ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return Draggable(
child: Container(
// 패널 헤더 위젯의 내용
),
feedback: Container(
// 드래그할 때 보여질 위젯의 내용
),
childWhenDragging: Container(),
);
},
body: Container(
// 패널 본문 위젯의 내용
),
isExpanded: false,
);
2. 드롭 영역 생성하기
드래그한 패널을 놓을 드롭 영역을 생성해야 합니다. 이를 위해 DragTarget 위젯을 사용합니다. DragTarget 위젯은 드롭 영역을 만들고 드래그한 위젯을 받아들이는 기능을 제공합니다.
DragTarget(
builder: (BuildContext context, List<dynamic> candidateData, List<dynamic> rejectedData) {
return Container(
// 드롭 영역의 디자인
);
},
onAccept: (dynamic data) {
// 드롭한 패널에 대한 처리 로직
},
onWillAccept: (dynamic data) {
// 패널을 드롭할 수 있는지 여부를 확인하는 로직
return true;
},
);
3. 드래그 앤 드롭 이벤트 처리하기
Draggable 위젯과 DragTarget 위젯을 연결하기 위해선 해당 위젯들의 onDragStarted, onDragEnd, onDraggableCanceled 이벤트 등을 적절하게 처리해야 합니다.
Draggable(
onDragStarted: () {
// 드래그가 시작될 때 실행되는 로직
},
onDragEnd: (DraggableDetails details) {
// 드래그가 종료될 때 실행되는 로직
},
onDraggableCanceled: (Velocity velocity, Offset offset) {
// 드래그가 취소될 때 실행되는 로직
},
//...
)
DragTarget(
onWillAccept: (dynamic data) {
// 패널을 드롭할 수 있는지 여부를 확인하는 로직
return true;
},
onAccept: (dynamic data) {
// 드롭한 패널에 대한 처리 로직
},
//...
)
결론
이상으로 Flutter의 ExpansionPanel 위젯에 드래그 앤 드롭 기능을 추가하는 방법에 대해 알아보았습니다. 드래그 앤 드롭을 이용하여 사용자 친화적인 인터페이스를 구현할 수 있으니 앱 개발시 유용하게 활용해보시기 바랍니다.