Overview
드래그를 할 수 있는 Draggable 과 DragTarget 위젯에 대해 알아보자
- Draggable
- DragTarget
0. 문서
https://api.flutter.dev/flutter/widgets/Draggable-class.html
https://api.flutter.dev/flutter/widgets/DragTarget-class.html
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 |