Overview
드래그를 할 수 있는 Draggable 과 DragTarget 위젯에 대해 알아보자
- Draggable
- DragTarget
0. 문서
https://api.flutter.dev/flutter/widgets/Draggable-class.html
Draggable class - widgets library - Dart API
A widget that can be dragged from to a DragTarget. When a draggable widget recognizes the start of a drag gesture, it displays a feedback widget that tracks the user's finger across the screen. If the user lifts their finger while on top of a DragTarget, t
api.flutter.dev
https://api.flutter.dev/flutter/widgets/DragTarget-class.html
DragTarget class - widgets library - Dart API
A widget that receives data when a Draggable widget is dropped. When a draggable is dragged on top of a drag target, the drag target is asked whether it will accept the data the draggable is carrying. If the user does drop the draggable on top of the drag
api.flutter.dev
1. Draggalbe 이란?
위젯을 다른 위젯 위로 드래그 할 수 있는 위젯이다.
어디서 사용해야 할 진 아직 모르겠다 ㅋㅋ..
공식 문서의 예제를 확인해보자
1. Draggable
feedback : 드래그할 컨테이너이다.
childWhenDragging : 남아 있을 잔상 컨테이너 이다.
child : 처음 보이게될 컨테이너이다.
2. DragTarget
builder : builder 를 활용해서 accept 할 곳을 확인할 수 있는 컨테이너를 생성
onAcceptWithDetails : 드래그가 accept 가 되면 state 를 변경
나머진 따로 하면 될듯 ㅎㅎ.. 이정도만 있어도 뭐..
import 'package:flutter/material.dart';
/// Flutter code sample for [Draggable].
void main() => runApp(const DraggableExampleApp());
class DraggableExampleApp extends StatelessWidget {
const DraggableExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Draggable Sample')),
body: const DraggableExample(),
),
);
}
}
class DraggableExample extends StatefulWidget {
const DraggableExample({super.key});
@override
State<DraggableExample> createState() => _DraggableExampleState();
}
class _DraggableExampleState extends State<DraggableExample> {
int acceptedData = 0;
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Draggable<int>(
// Data is the value this Draggable stores.
data: 10,
// 드래그할 컨테이너
feedback: Container(
color: Colors.deepOrange,
height: 100,
width: 100,
child: const Icon(Icons.directions_run),
),
// 남아 있을 잔상
childWhenDragging: Container(
height: 100.0,
width: 100.0,
color: Colors.pinkAccent,
child: const Center(
child: Text('Child When Dragging'),
),
),
// 원래 처음 보이게 될 컨테이너
child: Container(
height: 100.0,
width: 100.0,
color: Colors.lightGreenAccent,
child: const Center(
child: Text('Draggable'),
),
),
),
// 드래그 대상
DragTarget<int>(
builder: (
BuildContext context,
List<dynamic> accepted,
List<dynamic> rejected,
) {
return Container(
height: 100.0,
width: 100.0,
color: Colors.cyan,
child: Center(
child: Text('Value is updated to: $acceptedData'),
),
);
},
// 드래그가 accept 되면 state 변경
onAcceptWithDetails: (DragTargetDetails<int> details) {
setState(() {
acceptedData += details.data;
});
},
),
],
);
}
}
'flutter & dart' 카테고리의 다른 글
flutter & dart - 아코디언 같은 ExpantionPanelList (0) | 2024.04.02 |
---|---|
flutter & dart - 사이드바? Drawer (0) | 2024.04.02 |
flutter & dart - Divider 와 Spacer (0) | 2024.04.01 |
flutter & dart - Dismissible ( 스와이프 위젯 ) (0) | 2024.04.01 |
flutter & dart - CustomScrollView (0) | 2024.04.01 |