TextField value repeats when updating

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