So verschieben Sie ein Bild in Flutter/Dart mit einem Draggable
Ich versuche, ein einfaches Kinderspiel zu erstellen, bei dem der Benutzer auf ein Bild klicken und es auf ein DragTarget ziehen kann. Die Bilder enthalten schließlich dynamischen Text aus einer Liste, aber sie enthalten derzeit nur eine Zahl, um dies zu simulieren. Wenn ich derzeit auf dem Bild auswähle, bewegt sich nur der Text. Das Bild selbst bleibt stehen. Was ich schließlich möchte, ist, dass das Bild vom Bildschirm verschwindet, sobald es an das DragTarget geliefert wird. Ich habe einige Variationen des folgenden Codes ausprobiert, aber nichts hat funktioniert. Ich gehe davon aus, dass ich eine Form von GestureDetector verwenden muss, aber es ist mir nicht gelungen, einen erfolgreich zu implementieren (mein Code zeigt diese Versuche nicht an). Jede Hilfe oder Beratung wird sehr geschätzt!
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
children: <Widget>[
new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/images/landscape_with_tree.png"),
fit: BoxFit.cover,
),
),
),
DragBox(Offset(250.0, 50.0), '1'),
DragBox(Offset(350.0, 50.0), '2'),
DragBox(Offset(200.0, 100.0), '3'),
Positioned(
right: 50.0,
bottom: 0.0,
child: DragTarget(
// onAccept: () {
// },
builder: (
BuildContext context,
List<dynamic> accepted,
List<dynamic> rejected,
) {
return Container(
width: 100.0,
height: 100.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/basket.png"),
),
),
child: Center(
child: Text(
'Drag Here!',
style: TextStyle(fontWeight: FontWeight.bold),
),
}
Ziehbare Klasse
class _DragBoxState extends State<DragBox> {
Offset position = Offset(0.0, 0.0);
@override
Widget build(BuildContext context) {
return Positioned(
left: position.dx,
top: position.dy,
child: Draggable(
child: Container(
width: 50.0,
height: 50.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/apple.png"),
),
),
child: Center(
child: Text(
widget.label,
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.none,
fontSize: 20.0,
),
),
),
),
onDraggableCanceled: (velocity, offset) {
setState(() {
position = widget.initPos;
});
},
feedback: Container(
width: 60.0,
height: 60.0,
child: Center(
child: Text(
widget.label,
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.none,
fontSize: 18.0,
),
Ich bin mir nicht sicher, ob dies der effizienteste oder beste Weg ist, aber ich habe die folgende Lösung zum Laufen gebracht. Bitte lassen Sie es mich wissen, wenn Sie einen besseren Weg haben!
class _DragBoxState extends State<DragBox> {
Offset position = Offset(0.0, 0.0);
AssetImage apple;
AssetImage _imageToShow = new AssetImage('assets/images/apple.png');
@override
void initState() {
super.initState();
position = widget.initPos;
}
@override
Widget build(BuildContext context) {
return Positioned(
left: position.dx,
top: position.dy,
child: Draggable<AssetImage>(
data: apple,
child: Container(
width: 50.0,
height: 50.0,
decoration: BoxDecoration(
image: DecorationImage(
image: _imageToShow,
),
),
child: Center(
child: Text(
widget.label,
style: TextStyle(
color: Colors.black,
decoration: TextDecoration.none,
fontSize: 18.0,
),
),
),
),
onDraggableCanceled: (velocity, offset) {
setState(() {
position = widget.initPos;
});
},
onDragStarted: () {
setState(() {
print('drag started');
_imageToShow = new AssetImage('assets/images/answered_apple.png');
return _imageToShow;
});
},
feedback: Container(
width: 60.0,
height: 60.0,
decoration: BoxDecoration(
image: DecorationImage(
image: _imageToShow,
),
),
child: Center(
child: Text(
widget.label,
style: TextStyle(
color: Colors.black,
decoration: TextDecoration.none,
fontSize: 16.0,
),
),
),
),
),
);
}
}