How do I stop TextEditingController from repeating text in TextField?

user_14307385 0
Viewed 159

I can type different text per line without the controller but I need to use it. Do you know how can I fix this problem? Not really sure why this is happening. Added a couple screenshots to show what I mean and added my code below. Sorry I don't know what else to add for this question.

without controller

with controller

class AddNoteScreen extends StatefulWidget {
  User user;
  AddNoteScreen({
    required this.user,
  });

  @override
  State<AddNoteScreen> createState() => _AddNoteScreenState();
}

class _AddNoteScreenState extends State<AddNoteScreen> {
  TextEditingController notesController = TextEditingController();

  FirebaseFirestore firestore = FirebaseFirestore.instance;

  bool loading = false;

  List<TextField> textFields = [];

  @override
  void initState() {
    super.initState();
    textFields.add(_buildTextField());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      ),
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).unfocus();
          notesController.text = '';
        },
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Column(children: <Widget>[
              Container(
                child: ListView(
                  children: textFields,  
                  shrinkWrap: true,
                ),
              ),
              SizedBox(
                height: 50,
              ),
              loading
                  ? Center(
                      child: CircularProgressIndicator(),
                    )
                  : Container(
                      height: 50,
                      width: MediaQuery.of(context).size.width,
                      child: ElevatedButton(
                        onPressed: () async {
                          if (notesController.text.isEmpty) {
                            ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                                content: Text("All feilds are required")));
                          } else {
                            setState(() {
                              loading = true;
                            });

                            await FirestoreServiceEdit().insertNote(
                                notesController.text, widget.user.uid);

                            setState(() {
                              loading = false;
                            });

                            Navigator.pop(context);
                          }
                        },
                        child: Text("Add Note"),
                      ),
                    ),
            ]),
          ),
        ),
      ),
      backgroundColor: Colors.white,
    );
  }

  TextField _buildTextField() {
    return TextField(
        controller: notesController,
        style: TextStyle(
          color: Colors.black,
          fontSize: 18,
        ),
        decoration: InputDecoration(
          prefix: Icon(
            Icons.circle,
            size: 10,
            color: Colors.black,
          ),
        ),
        autofocus: true,
        onSubmitted: (_) {
          setState(() {
            textFields.add(_buildTextField()); 
            notesController.text + ' ';
          });
        });
  }
}

Any help is appreciated!

dart flutter
2 Answers

You have set common text editing controller to all text field. You need to create unique textformfield to each item.And if you want the instance of all items, you can manage list of TextEditingController()

TextField _buildTextField() {
        return TextField(
            controller: TextEditingController(),
            style: TextStyle(
              color: Colors.black,
              fontSize: 18,
            ),
            decoration: InputDecoration(
              prefix: Icon(
                Icons.circle,
                size: 10,
                color: Colors.black,
              ),
            ),
            autofocus: true,
            onSubmitted: (_) {
              setState(() {
                textFields.add(_buildTextField()); 
                notesController.text + ' ';
              });
            });
      }
user_191657060

As Dan commented, a single TextEditingController is assigned to a single TextField. Therefore if you want to have 3 TextField, you will need to have 3 corresponding TextEditingController.

What I would suggest if you are building a note-taking app is that you only use one TextField at any given time, because user can only enter text into one TextField at any given time.

So you would want to define a list of notes:

List<String> notes = [];

And your TextField would look like this:

TextField(
  controller: notesController,
  style: TextStyle(
    color: Colors.black,
    fontSize: 18,
  ),
  decoration: InputDecoration(
    prefix: Icon(
      Icons.circle,
      size: 10,
      color: Colors.black,
    ),
  ),
  autofocus: true,
  onSubmitted: (_) {
    setState(() {
      notes.add(notesController.text);
    });
  })
user_96617970
Related