Я пытаюсь сделать выборку слов, по клику из которой эти слова перемещаются в ячейки

Question

Я пытаюсь сделать выборку слов, по клику из которой эти слова перемещаются в ячейки. Я сделал это с помощью Draggable и DragTarget, пока это работает, если вы двигаете пальцем.

Но мне нужно иметь возможность перемещать их, щелкая.

      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,
    );
  }
}

Как это может быть сделано?

Я знаю, что есть свойство onDragStarted:, но я не совсем понимаю, как его правильно использовать. Кто-нибудь, помогите мне, пожалуйста.

Answer 1

Возможно, класс GestureDetector и егоonTagилиonTapUpпараметр может быть полезен. Если вы хотите обнаруживать щелчки/нажатия, зачем использовать виджет, связанный с перетаскиванием?