如何使材料小部件可拖动到一个容器中，并在flutter中对其进行评分

Question

我想让字母、图片和一些材料按钮都可以在flutter中拖动，就像用户可以在屏幕上拖动一样。我在试，但没有用。我把字母表做成了可拖动的，但代码本身太复杂了，无法使用。我希望当用户拖动一个材料小部件、字母表或图片时，能够将其放入我指定的容器中。字母表也显示为两半，就像中间的一样。如果有人帮助我，我将不胜感激。

import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter_tts/flutter_tts.dart';
import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
import '../../../constants.dart';
import '../../../utils/routes.dart';
class DragDrop extends StatefulWidget {
const DragDrop({Key? key}) : super(key: key);
@override
State<DragDrop> createState() => _DragDropState();
}
final FlutterTts flutterTts = FlutterTts();
final List words = ["h", "c", "d", "w", "c", "f"];
moveToQ2(BuildContext context) async {
changeButton = true;
await Navigator.pushNamed(context, MyRoutes.speakQ);
}
String question =
"Listen to this letter sound and then drag all  the letter whose sound you hear into the bucket.";
var changeButton = false;
final Map<String, bool> score = {};
var word_1 = "";
final Map choices = {
'A': Colors.green,
};
speak(word) async {
await flutterTts.setLanguage("en-US");
await flutterTts.setPitch(1);
await flutterTts.setVolume(1.0);
await flutterTts.speak(word);
}
int seed = 0;
class _DragDropState extends State<DragDrop> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Colors.cyan,
// ignore: prefer_const_constructors
title: Text("AD&DY"),
),
body: Padding(
padding: const EdgeInsets.all(14.0),
// ignore: prefer_const_literals_to_create_immutables
child: SingleChildScrollView(
child: SafeArea(
child: Column(children: [
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
const Padding(
padding: EdgeInsets.symmetric(horizontal: kDefaultPadding),
//child: ProgressBar(),
),
const Padding(
padding: EdgeInsets.symmetric(horizontal: kDefaultPadding),
child: Text.rich(
TextSpan(
text: "Question 1",
style: TextStyle(
fontSize: 24,
),
children: [TextSpan(text: "/25")],
),
),
),
const SizedBox(
height: 20,
),
const Divider(
thickness: 1.5,
),
Text.rich(
TextSpan(
text: question,
style: const TextStyle(
fontSize: 15,
),
),
),
const SizedBox(
height: 20,
),
ListTile(
onTap: () {
word_1 = (words.toList()..shuffle()).first;
speak(word_1);
},
leading: const Icon(CupertinoIcons.play_circle,
color: Colors.black),
title: const Text("Play",
textScaleFactor: 1.2,
style: TextStyle(
color: Colors.black,
)),
),
const SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: choices.keys
.map((words) => _buildDragTarget(words))
.toList()
..shuffle(Random(seed)),
),
const SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
children: words.map((emoji) {
return Draggable<String>(
data: emoji,
child: Emoji(words: score[emoji] == true ? '✅' : emoji),
feedback: Emoji(words: emoji),
childWhenDragging: const Emoji(words: ''),
);
}).toList(),
),
Material(
color: Color.fromARGB(255, 174, 145, 224),
borderRadius: BorderRadius.circular(changeButton ? 50 : 8),
child: InkWell(
onTap: () => moveToQ2(context),
child: AnimatedContainer(
duration: Duration(seconds: 1),
width: changeButton ? 50 : 150,
height: 50,
alignment: Alignment.center,
child: changeButton
? Icon(
Icons.done,
color: Colors.black,
)
: Text(
'Next',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
),
),
),
]),
]),
))),
);
}
}
Widget _buildDragTarget(emoji) {
return DragTarget<String>(
builder: (BuildContext context, List<String?> incoming, List rejected) {
if (score[emoji] == true) {
return Container(
color: Colors.white,
child: const Text('Correct!'),
alignment: Alignment.center,
height: 80,
width: 200,
);
} else {
return Container(color: choices[emoji], height: 80, width: 200);
}
},
onWillAccept: (data) => data == emoji,
onLeave: (data) {},
);
}
class Emoji extends StatelessWidget {
const Emoji({Key? key, required this.words}) : super(key: key);
final String words;
@override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: Container(
alignment: Alignment.center,
height: 50,
padding: const EdgeInsets.all(10),
child: Text(
words,
style: const TextStyle(color: Colors.black, fontSize: 50),
),
),
);
}
}
final plyr = AudioPlayer();

Answer 1

您需要更好的状态管理您的代码几乎不可读您可以尝试Riverpod或Bloc来简化任务，另外，为什么不继承Flutter自己的可拖动和拖动目标，以下链接包含更简单的方法，希望这有帮助颤振可拖动和拖动目标