I'm trying to make a selection of words by clicking from which these words are moved into cells

Question

I'm trying to make a selection of words by clicking from which these words are moved into cells. I've done this with Draggable and DragTarget so far it works if you move your finger.

But I need to be able to move them by clicking.

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class Screen6_1_3 extends StatefulWidget {
  const Screen6_1_3({super.key});

  @override
  State<Screen6_1_3> createState() => _Screen6_1_3State();
}

class _Screen6_1_3State extends State<Screen6_1_3> {
  var caughtAnimation1;

  var caughtAnimation2;

  var caughtAnimation3;

  //

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.blue,
        leading: GestureDetector(
          child: Icon(
            Icons.close,
            color: Colors.white,
          ),
          onTap: () {
            Navigator.pushNamedAndRemoveUntil(
                context, "home", (route) => false);
          },
        ),
      ),
      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              DragTarget(
                onAccept: (LottieBuilder animation) {
                  setState(() {
                    caughtAnimation1 = animation;
                  });
                },
                builder: (BuildContext context, List<dynamic> candidateData,
                    List<dynamic> rejectedData) {
                  return Center(
                    child: Container(
                      height: 60,
                      width: 60,
                      decoration: BoxDecoration(
                          color: Colors.grey.shade400.withOpacity(0.5),
                          borderRadius: BorderRadius.circular(20.0)),
                      child: caughtAnimation1,
                    ),
                  );
                },
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: DragTarget(
                  onAccept: (LottieBuilder animation) {
                    setState(() {
                      caughtAnimation2 = animation;
                    });
                  },
                  builder: (BuildContext context, List<dynamic> candidateData,
                      List<dynamic> rejectedData) {
                    return Center(
                      child: Container(
                        height: 60,
                        width: 60,
                        decoration: BoxDecoration(
                            color: Colors.grey.shade400.withOpacity(0.5),
                            borderRadius: BorderRadius.circular(20.0)),
                        child: caughtAnimation2,
                      ),
                    );
                  },
                ),
              ),
              DragTarget(
                onAccept: (LottieBuilder animation) {
                  setState(() {
                    caughtAnimation3 = animation;
                  });
                },
                builder: (BuildContext context, List<dynamic> candidateData,
                    List<dynamic> rejectedData) {
                  return Center(
                    child: Container(
                      height: 60,
                      width: 60,
                      decoration: BoxDecoration(
                          color: Colors.grey.shade400.withOpacity(0.5),
                          borderRadius: BorderRadius.circular(20.0)),
                      child: caughtAnimation3,
                    ),
                  );
                },
              ),
            ],
          ),
          Row(
            children: [
              SizedBox(
                height: 20,
              ),
            ],
          ),

          // Draggable
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 10.0, right: 10.0),
                child: Container(
                  width: 200,
                  height: 60,
                  decoration: BoxDecoration(
                      color: Colors.grey.shade400.withOpacity(0.5),
                      borderRadius: BorderRadius.circular(20.0)),
                  child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: <Widget>[
                      Container(
                        width: 15,
                      ),
                      DragBox(
                        animatedAsset: Lottie.asset('assets/sunny.json'),
                        width: 40,
                      ),
                      Container(
                        width: 15,
                      ),
                      DragBox(
                        animatedAsset: Lottie.asset('assets/cat.json'),
                        width: 40,
                      ),
                      Container(
                        width: 15,
                      ),
                      DragBox(
                        animatedAsset: Lottie.asset('assets/scanning.json'),
                        width: 40,
                      ),
                      //More drag boxes like this one
                    ],
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class DragBox extends StatefulWidget {
  DragBox({required this.animatedAsset, required this.width});
  final LottieBuilder animatedAsset;
  final double width;
  @override
  _DragBoxState createState() => _DragBoxState();
}

class _DragBoxState extends State<DragBox> {
  var caughtAnimation3;

  @override
  Widget build(BuildContext context) {
    return Draggable(
      onDragStarted: () {
        setState(() {
          DragTarget(
            onAccept: (LottieBuilder animation) {
              setState(() {
                caughtAnimation3 = animation;
              });
            },
            builder: (BuildContext context, List<dynamic> candidateData,
                List<dynamic> rejectedData) {
              return Center(
                child: Container(
                  height: 60,
                  width: 60,
                  decoration: BoxDecoration(
                      color: Colors.grey.shade400.withOpacity(0.5),
                      borderRadius: BorderRadius.circular(20.0)),
                  child: caughtAnimation3,
                ),
              );
            },
          );
        });
      },
      feedback: Container(
        width: 50,
        height: 50,
        child: widget.animatedAsset,
      ),
      child: Container(
        child: widget.animatedAsset,
        width: widget.width,
        height: 50,
      ),
      childWhenDragging: Container(),
      data: widget.animatedAsset,
    );
  }
}

How can this be done?

I know there is a property onDragStarted: but I don't fully understand how to use it correctly. Somebody help me please.

Answer 1

Maybe the GestureDetector class and its onTag or onTapUp parameter could be helpful. If you want to detect clicks/taps, why use a dragging related widget?