multiple draggables are always moving once item is dragged

Question

My goal is to have a dog as my DragTarget and multiple items I can drag to the dog. Whenever I drag one item the others are switching positions. Also when I drag the item onto the DragTarget I want to print out a text in a text-box - but nothing is executed even though I'm using onAccept.

This is the code I have:


import 'package:flutter/material.dart';
import 'package:prototype/screens/start-page.dart';

class DragDropItems extends StatelessWidget {
  const DragDropItems({super.key});
  final Color color = Colors.black;
  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: const BoxDecoration(
            image: DecorationImage(
                fit: BoxFit.fill,
                image: AssetImage('assets/images/Environment.png'))),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          body: Stack(children: <Widget>[
            Align(
                alignment: Alignment.center,
                child: Padding(
                    padding: const EdgeInsets.only(top: 200),
                    child: DragTarget<String>(
                      onAccept: (data) => Padding(
                        padding: const EdgeInsets.all(15),
                        child: Column(
                          children: const <Widget>[
                            Padding(
                                padding: EdgeInsets.all(15),
                                child: TextField(
                                  decoration: InputDecoration(
                                      border: OutlineInputBorder(),
                                      labelText: 'asdf',
                                      hintText: 'gang'),
                                ))
                          ],
                        ),
                      ),
                      builder: (_, __, ___) {
                        return Container(
                          width: 300,
                          height: 300,
                          alignment: Alignment.center,
                          child: Image.asset('assets/images/Doggo3.png'),
                        );
                      },
                    ))),
            Align(
                alignment: Alignment.bottomCenter,
                child: Padding(
                    padding: const EdgeInsets.only(bottom: 50),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Draggable<String>(
                          data: 'red',
                          feedback: SizedBox(
                              height: 90.0,
                              width: 90.0,
                              child: Center(
                                child:
                                    Image.asset('assets/images/cupcake1.png'),
                              )),
                          childWhenDragging: Container(),
                          child: SizedBox(
                            height: 90.0,
                            width: 90.0,
                            child: Center(
                              child: Image.asset('assets/images/cupcake1.png'),
                            ),
                          ),
                        ),
                        Draggable<String>(
                          data: 'blue',
                          feedback: SizedBox(
                              height: 90.0,
                              width: 90.0,
                              child: Center(
                                child: Image.asset('assets/images/banana1.png'),
                              )),
                          childWhenDragging: Container(),
                          child: SizedBox(
                            height: 90.0,
                            width: 90.0,
                            child: Center(
                              child: Image.asset('assets/images/banana1.png'),
                            ),
                          ),
                        ),
                        Draggable<String>(
                          data: 'green',
                          feedback: SizedBox(
                              height: 90.0,
                              width: 90.0,
                              child: Center(
                                child:
                                    Image.asset('assets/images/hamburger1.png'),
                              )),
                          childWhenDragging: Container(),
                          child: SizedBox(
                            height: 90.0,
                            width: 90.0,
                            child: Center(
                              child:
                                  Image.asset('assets/images/hamburger1.png'),
                            ),
                          ),
                        ),
                      ],
                    )))
          ]),
        ));
  }
}

this is the result when executing on the emulator:

enter image description here

I would appreciate any help!

score 0 · Answer 1 · answered Dec 02 '22 at 02:15

You need to provide the widget passed to the child parameter for childWhenDragging also. It is not required for both to be the same. You can use any widget.

Check this article: https://blog.logrocket.com/drag-and-drop-ui-elements-in-flutter-with-draggable-and-dragtarget/

multiple draggables are always moving once item is dragged

1 Answers1