What I have done till now is make widget draggable and a drag target according to my requirements. What i want is when the user drops the draggable container into the drag target i want to show that dragged widget inside that big drag target container and able to score if that is the right option or not. second problem i am having is that i am using Text to speech for the sound and it is not working i tried many things but still it isn't working. i have a play button and give it a letter like A,B,D,G etc. whenever user presses the button i want to play the sound of that button and drag the right container into the drag target. Thankyou for your help.
// ignore_for_file: prefer_const_constructors, file_names, non_constant_identifier_names
import 'package:dyslexia/pages/round_2/Q8sound.dart';
import 'package:dyslexia/utilities/nextButton.dart';
import 'package:flutter/material.dart';
import 'package:flutter_tts/flutter_tts.dart';
import '../../utilities/QuestionWidget.dart';
class Q1DAD extends StatefulWidget {
const Q1DAD({Key? key}) : super(key: key);
@override
State<Q1DAD> createState() => _Q1DADState();
}
class _Q1DADState extends State<Q1DAD> {
String question =
"Listen to this letter sound and then choose the letter whose sound you hear";
var changeButton = false;
var score = 0;
final FlutterTts flutterTts = FlutterTts();
speak(word) async {
await flutterTts.setLanguage("en-US");
await flutterTts.setPitch(1);
await flutterTts.setVolume(10.0);
await flutterTts.speak(word);
}
var word = "M";
bool isPlayingMsg = false;
bool draged = false;
bool showDRag = false;
@override
Widget build(BuildContext context) {
bool isPlayingMsg = false;
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Colors.cyan,
title: Text("AD&DY"),
),
body: Padding(
padding: const EdgeInsets.all(14.0),
child: Column(children: [
QuestionWidget(question: question),
SizedBox(height: MediaQuery.of(context).size.height * 0.05),
Material(
elevation: 5,
color: Colors.cyan[50],
child: ListTile(
onTap: () async {
speak(word);
isPlayingMsg = true;
},
leading: Icon(isPlayingMsg ? Icons.stop : Icons.play_arrow),
title: Text(isPlayingMsg ? "Stop" : "Play",
textScaleFactor: 1.2,
style: TextStyle(
color: Colors.black,
)),
),
),
Divider(
thickness: 1.0,
),
SizedBox(height: MediaQuery.of(context).size.height * 0.05),
Column(
children: [
DragTarget1(),
SizedBox(height: MediaQuery.of(context).size.height * 0.07),
Wrap(
spacing: 10,
runSpacing: 5,
children: [
draggableWord("M", false, score),
draggableWord("N", false, score),
draggableWord("O", false, score),
draggableWord("R", false, score),
],
),
],
),
SizedBox(height: MediaQuery.of(context).size.height * 0.1),
nextButton(changeButton: changeButton, Location: Q8sound()),
]),
),
);
}
int acceptedData = 0;
Widget DragTarget1() {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
DragTarget<int>(
builder: (
BuildContext context,
List<dynamic> accepted,
List<dynamic> rejected,
) {
return Material(
elevation: 10,
borderRadius: BorderRadius.circular(80),
child: Container(
height: 100.0,
width: 250.0,
color: Color.fromARGB(255, 78, 166, 178),
child: draged
? Container(
height: 50,
width: 70,
color: Colors.lightGreenAccent,
child: Align(
child: Text(word),
),
)
: Center(
child: Text('Drag target here'),
),
),
);
},
onAccept: (int data) {
setState(() {
draged = true;
showDRag = true;
});
},
),
],
);
}
Widget draggableWord(word, option, score) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
showDRag
? SizedBox()
: Draggable<int>(
// Data is the value this Draggable stores.
data: 10,
feedback: Container(
color: Colors.yellow[100],
height: 50,
width: 70,
child: Center(child: Text(word)),
),
childWhenDragging: Material(
elevation: 5,
borderRadius: BorderRadius.circular(10),
child: Container(
height: 50.0,
width: 70.0,
color: Colors.grey,
child: Center(
child: Text(""),
),
),
),
child: Material(
elevation: 5,
borderRadius: BorderRadius.circular(10),
child: Container(
height: 50,
width: 70,
color: Colors.lightGreenAccent,
child: Center(
child: Text(word),
),
),
),
)
],
);
}
}
here is my question widget
import 'package:flutter/material.dart';
class QuestionWidget extends StatelessWidget {
const QuestionWidget({
Key? key,
required this.question,
}) : super(key: key);
final String question;
@override
Widget build(BuildContext context) {
return Material(
elevation: 12,
color: Color.fromARGB(255, 125, 200, 210),
shadowColor: Colors.grey,
borderRadius: BorderRadius.circular(8),
child: Container(
height: 80,
width: 280,
alignment: Alignment.center,
child: Text(question,
textScaleFactor: 1.2,
style: TextStyle(
color: Colors.black,
))),
);
}
}