Provides a powerful drag and drop controls, you can customize flexible
Draggable Widget
Draggable Control is responsible for dragging, Parent used Draggable, its children is that you can drag the child elements of the container can be achieved, can be a picture. With very flexible.
Parameter Description:
data: is the parameter to be passed, in DragTarget years, you will receive this parameter. Of course, to push dragged at drag controls DragTarget time.
child: where you want to place the push pull element may be a container, it can be pictures and text.
feedback: commonly used settings like when push pull element in the case when push pull, we put it into a color transparency 50%. Of course, you can also change its size.
onDraggableCanceled: when the corresponding event is loosened, often used to change the position reached when the push pull, is performed by changing setState.
DragTarget Widget
DragTarget control is used to receive drag events, when the Draggable into DragTarget, he receives value Draggable passed over, and then change components state by generator.
onAccept: When pushed dragged control in the trigger, often in here to get the value passed over.
builder: builder, child inside modified value.
Entry code:
Import 'Package: Flutter / material.dart';
Import 'draggable_demo.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'Flutter Demo',
theme:ThemeData(
primarySwatch: Colors.blue
),
home:DraggableDemo()
);
}
}
draggable_demo.dart file:
import 'package:flutter/material.dart';
import 'draggable_widget.dart';
class DraggableDemo extends StatefulWidget {
@override
_DraggableDemoState createState() => _DraggableDemoState();
}
class _DraggableDemoState extends State<DraggableDemo> {
Color _draggableColor = Colors.grey;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
DraggableWidget(
offset: Offset(80.0, 80.0),
widgetColor: Colors.tealAccent,
),
DraggableWidget(
offset: Offset(180.0, 80.0),
widgetColor: Colors.redAccent,
),
Center(
child: DragTarget(onAccept: (Color color) {
_draggableColor = color;
}, builder: (context, candidateData, rejectedData) {
return Container(
width: 200.0,
height: 200.0,
color: _draggableColor,
);
}),
)
],
));
}
}
draggable_widget.dart file:
import 'package:flutter/material.dart';
class DraggableWidget extends StatefulWidget {
final Offset offset;
final Color widgetColor;
const DraggableWidget({Key key, this.offset, this.widgetColor}):super(key:key);
_DraggableWidgetState createState() => _DraggableWidgetState();
}
class _DraggableWidgetState extends State<DraggableWidget> {
Offset offset = Offset(0.0,0.0);
@override
void initState() {
super.initState();
offset = widget.offset;
}
@override
Widget build(BuildContext context) {
return Positioned(
left: offset.dx,
top:offset.dy,
child: Draggable(
data:widget.widgetColor,
child: Container(
width: 100,
height: 100,
color:widget.widgetColor,
),
feedback:Container(
width: 100.0,
height: 100.0,
color: widget.widgetColor.withOpacity(0.5),
),
onDraggableCanceled: (Velocity velocity, Offset offset){
setState(() {
this.offset = offset;
});
},
),
);
}
}