TextField value repeats when updating - flutter

Question

I am making a todo-app using getx and get_storage and in the todoEditing screen in the title text field, whenever I add a new character, the previous value repeats itself and then the new character appears. This however only happens in the title text field and not in the notes text field. I am not able to find where the issue is originating from in the code and any help would be much appreciated.
class TodoScreen extends StatelessWidget {
final int? index;
final TodoController todoController = Get.find();
TodoScreen({this.index});
#override
Widget build(BuildContext context) {
String title = '';
String detail = '';
if (this.index != null) {
title = todoController.todos[index!].title;
detail = todoController.todos[index!].details;
}
Color add = Color(0xFFA8A8A8);
TextEditingController titleEditingController =
TextEditingController(text: title);
TextEditingController detailEditingController =
TextEditingController(text: detail);
return Scaffold(
appBar: AppBar(
title: Text((this.index == null) ? 'New Reminder' : 'Edit Reminder',
style: TextStyle(
fontSize: 22,
color: Theme.of(context).textTheme.headline2!.color)),
leadingWidth: 80.0,
leading: Center(
child: TextButton(
style: const ButtonStyle(
splashFactory: NoSplash.splashFactory,
),
onPressed: () {
Get.back();
},
child: const Text(
"Cancel",
style: TextStyle(fontSize: 20.0, color: Color(0xFF39A7FD)),
),
),
),
centerTitle: true,
actions: [
Center(
child: TextButton(
style: const ButtonStyle(
splashFactory: NoSplash.splashFactory,
),
onPressed: () {
if (this.index == null) {
todoController.todos.add(Todo(
details: detailEditingController.text,
title: titleEditingController.text,
));
} else {
var editing = todoController.todos[index!];
editing.title = titleEditingController.text;
editing.details = detailEditingController.text;
todoController.todos[index!] = editing;
}
;
Get.back();
},
child: Text((this.index == null) ? 'Add' : 'Update',
style:
TextStyle(color: Color(0xFF39A7FD), fontSize: 20.0))),
)
],
),
body: SafeArea(
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
child: Container(
decoration: BoxDecoration(
color: Color(0xFF414141),
boxShadow: const [
BoxShadow(
color: Color(0xFF414141),
offset: Offset(2.5, 2.5),
blurRadius: 5.0,
spreadRadius: 1.0,
), //B
],
borderRadius: BorderRadius.circular(14.0)),
padding:
const EdgeInsets.symmetric(horizontal: 24.0, vertical: 15.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
controller: titleEditingController,
autofocus: true,
autocorrect: false,
cursorColor: Colors.grey,
maxLines: 1,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: "Title", border: InputBorder.none),
style: GoogleFonts.notoSans(
color: Color(0xFFA8A8A8), fontSize: 20.0),
),
const Divider(
color: Color(0xFF707070),
),
TextField(
controller: detailEditingController,
maxLines: null,
autocorrect: false,
cursorColor: Colors.grey,
textInputAction: TextInputAction.done,
decoration: const InputDecoration(
hintText: "Notes", border: InputBorder.none),
style: GoogleFonts.notoSans(
color: Color(0xFFA8A8A8), fontSize: 20.0),
),
],
)),
),
),
);
}
}

Answer 1

My approche would be like this:
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class TodoScreen extends StatefulWidget {
final int? index;
const TodoScreen({Key? key, this.index}) : super(key: key);
#override
State<TodoScreen> createState() => _TodoScreenState();
}
class _TodoScreenState extends State<TodoScreen> {
final TodoController todoController = Get.find();
TextEditingController titleEditingController = TextEditingController();
TextEditingController detailEditingController = TextEditingController();
#override
void initState() {
super.initState();
if (widget.index != null) {
titleEditingController.text = todoController.todos[widget.index!].title;
detailEditingController.text =
todoController.todos[widget.index!].details;
}
// Color add = const Color(0xFFA8A8A8);
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text((widget.index == null) ? 'New Reminder' : 'Edit Reminder',
style: TextStyle(
fontSize: 22,
color: Theme.of(context).textTheme.headline2!.color)),
leadingWidth: 80.0,
leading: Center(
child: TextButton(
style: const ButtonStyle(
splashFactory: NoSplash.splashFactory,
),
onPressed: () {
Get.back();
},
child: const Text(
"Cancel",
style: TextStyle(fontSize: 20.0, color: Color(0xFF39A7FD)),
),
),
),
centerTitle: true,
actions: [
Center(
child: TextButton(
style: const ButtonStyle(
splashFactory: NoSplash.splashFactory,
),
onPressed: () {
if (widget.index == null) {
todoController.todos.add(Todo(
details: detailEditingController.text,
title: titleEditingController.text,
));
} else {
var editing = todoController.todos[widget.index!];
editing.title = titleEditingController.text;
editing.details = detailEditingController.text;
todoController.todos[widget.index!] = editing;
}
Get.back();
},
child: Text((widget.index == null) ? 'Add' : 'Update',
style: const TextStyle(
color: Color(0xFF39A7FD), fontSize: 20.0))),
)
],
),
body: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
child: Container(
decoration: BoxDecoration(
color: const Color(0xFF414141),
boxShadow: const [
BoxShadow(
color: Color(0xFF414141),
offset: Offset(2.5, 2.5),
blurRadius: 5.0,
spreadRadius: 1.0,
), //B
],
borderRadius: BorderRadius.circular(14.0)),
padding:
const EdgeInsets.symmetric(horizontal: 24.0, vertical: 15.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
controller: titleEditingController,
autofocus: true,
autocorrect: false,
cursorColor: Colors.grey,
maxLines: 1,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: "Title", border: InputBorder.none),
style: GoogleFonts.notoSans(
color: const Color(0xFFA8A8A8), fontSize: 20.0),
),
const Divider(
color: Color(0xFF707070),
),
TextField(
controller: detailEditingController,
maxLines: null,
autocorrect: false,
cursorColor: Colors.grey,
textInputAction: TextInputAction.done,
decoration: const InputDecoration(
hintText: "Notes", border: InputBorder.none),
style: GoogleFonts.notoSans(
color: const Color(0xFFA8A8A8), fontSize: 20.0),
),
],
)),
),
),
);
}
}