Can you programmatically put a Draggable inside a DragTarget? - flutter

Question

This sounds a strange thing to ask! But I have two drag targets, and two draggables. I want them to start off one in each target. Then, when one is drag&dropped onto the second target, the second target's draggable needs to jump across to the first target.
I guess the problem resolves down to whether you can programmatically put a draggable inside a target. Does this look possible, or is a DragTarget not suitable?
Some example code - I can't start the draggables inside the dragtargets
import 'package:flutter/material.dart';
MyDraggable drag1 = new MyDraggable(Colors.red);
MyDraggable drag2 = new MyDraggable(Colors.green);
MyDragTarget target1 = new MyDragTarget();
MyDragTarget target2 = new MyDragTarget();
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(fontFamily: 'PressStart'),
home: MyHomeScreen(),
);
}
}
class MyHomeScreen extends StatefulWidget {
MyHomeScreen({Key key}) : super(key: key);
createState() => MyHomeScreenState();
}
class MyHomeScreenState extends State<MyHomeScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.red[100],
appBar: AppBar(
toolbarHeight: 70.0,
title: Center(child: Text('Swap the draggables')),
backgroundColor: Colors.pink,
),
body: Container(
color: Colors.yellow[200],
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [target1, drag1, drag2, target2],
// children: [target1, SizedBox(width: 100), target2],
),
),
Text('Q1: Can the Draggables be started in the DragTargets?'),
Text('Q2: If you drag from one target to the other, '
'can the second swap to the other target?'),
],
),
),
);
} // End build()
} // End class MyHomeScreenState
class MyDragTarget extends StatelessWidget {
bool dragAccepted = false;
Color acceptedColor;
#override
Widget build(BuildContext context) {
return Stack(children: [
Container(color: Colors.blue,height: 90.0,width: 90.0,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: DragTarget<Color>(
builder: (context, List<Color> acceptedData, rejectedData) {
if (dragAccepted) {
return MyDraggable(acceptedColor);
} else {
return Container(color: Colors.grey,height: 50,width: 50,);
}
},
onWillAccept: (aColor) {
acceptedColor = aColor;
return true;
},
onMove: (moveData) {},
onAccept: (aColor) { dragAccepted = true; },
onLeave: (data) {},
),
),
),
]);
} // Build
} // End Class MyDragTarget
class MyDraggable extends StatefulWidget {
MyDraggable(this.color);
final Color color;
#override
_MyDraggableState createState() => _MyDraggableState();
}
class _MyDraggableState extends State<MyDraggable> {
#override
Widget build(BuildContext context) {
return Draggable(
data: widget.color,
child: Container(color: widget.color, height: 50, width: 50),
feedback: Container(color: widget.color, height: 50, width: 50),
childWhenDragging:
Container(color: Colors.pink[100], height: 50, width: 50),
onDragStarted: () {},
onDragEnd: (dragDetails) {
setState(() {});
},
onDragCompleted: () {},
onDraggableCanceled: (velocity, offset) {},
);
}
}

Answer 1

For the default Draggable from Flutter SDK, there is no method provided that allowed us to modify the offset/ position of the Draggable displaying on the UI (all those infos are stored in DraggableDetails of a Draggable).
With that said, there are 2 options you can try out:
Create a custom Draggable class that allows for manipulating its position on UI programatically
Change the property of the children of Draggable widget based on the onWillAccept callback of the DragTarget class (the color of each Container in this case)