Hi! I'm trying to implement the same functionality duolingo in flutter - flutter

Question

I'm trying to implement the same functionality, where word choices are offered as separate buttons and by clicking on them they are moved to the line, creating a sentence. Just like duolingo.
Example
I started doing it through TextFiled and text, but something tells me that's not a good solution.
How would you implement something like this?
import 'package:flutter/material.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> {
String textOne = "Bread";
var colorite = Colors.white;
TextEditingController textarea = TextEditingController();
#override
void initState() {
super.initState();
}
#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: [
Container(
width: 70,
height: 50,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 226, 226, 226),
border: Border.all(
color: const Color.fromARGB(255, 123, 123, 123),
width: 2,
),
borderRadius: BorderRadius.circular(10),
),
child: TextField(
enableSuggestions: false,
autocorrect: false,
controller: textarea,
maxLines: 1,
readOnly: false,
decoration: const InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color.fromARGB(255, 123, 123, 123))),
),
onTap: () {
setState(() {
textarea.clear();
textOne = 'Bread';
colorite = Colors.white;
});
},
),
),
],
),
Row(
children: [
SizedBox(
height: 20,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
setState(() {
if (textarea.text.isEmpty) {
insert('Bread');
textOne = 'Bread';
colorite = Colors.transparent;
}
});
},
child: Padding(
padding: const EdgeInsets.all(13.0),
child: Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.white)),
child: Text(
textOne,
style: TextStyle(
color: colorite,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
],
),
);
}
void insert(String content) {
var text = textarea.text;
var pos = textarea.selection.start;
textarea.value = TextEditingValue(
text: text.substring(0, pos) + content + text.substring(pos),
selection: TextSelection.collapsed(offset: pos + content.length),
);
}
}

Answer 1

It will be pretty easy to implement if you use Draggable widgets for the words and DragTarget for the textfields.
Youtube Tutorial: https://www.youtube.com/watch?v=QzA4c4QHZCY
And a great example you might relate to :
https://mobikul.com/draggable-widget-in-flutter/
I'd recommend trying to watch the video first to get an idea about how Draggable widget works and then trying to implement it in your project by taking inspiration from the article that I've provided.