Search code examples
flutterlistviewtextformfield

Flutter how to get value from multiple TextFormField inside ListView


I have multiple TextFormField in ListView.

List<TextEditingController>? notes = [];
List<TextEditingController>? notesMask = [];
List<TextEditingController>? remark = [];
List<TextEditingController>? remarkMask = [];

and below is the TextFormField inside ListView.

TextFormField(
    controller: notes![index],
    onChanged: (value) {
      if (notes1Mask![index] != value) {
        isButtonEnable = true;
      } else {
        isButtonEnable = false;
      }
    },
    decoration: InputDecoration(
      border: InputBorder.none,
      contentPadding:
          const EdgeInsets.all(10.0),
      fillColor: Colors.white,
      filled: true,
      hintText: 'Catatan',
      hintStyle: TextStyle(
          color: const Color(0xFFc0c0c0)
              .withOpacity(1)),
    ),
    style: const TextStyle(
        fontSize: 14,
        color: Color(0xFF5E5E5E)),
),

TextFormField(
    controller: remark![index],
    onChanged: (value) {
      if (notes1Mask![index] != value) {
        isButtonEnable = true;
      } else {
        isButtonEnable = false;
      }
    },
    decoration: InputDecoration(
      border: InputBorder.none,
      contentPadding:
          const EdgeInsets.all(10.0),
      fillColor: Colors.white,
      filled: true,
      hintText: 'Catatan',
      hintStyle: TextStyle(
          color: const Color(0xFFc0c0c0)
              .withOpacity(1)),
    ),
    style: const TextStyle(
        fontSize: 14,
        color: Color(0xFF5E5E5E)),
),

My question, How to get value from TextEditingController in ListView?

I tried print(notes), I got this result:

[TextEditingController#d4602(TextEditingValue(text: ┤Persiapan Sholat Shubuh 2 rokaats├, selection: TextSelection.collapsed(offset: 33, affinity: TextAffinity.downstream, isDirectional: false), composing: TextRange(start: -1, end: -1))), 

Solution

  • As the result, you are getting is list of TextEditingController because List<TextEditingController>? notes = [];. To get text from it, you can do looping,

    if (notes == null) return;
        for (final noteController in notes!) {
          print(noteController.text);
        }
    

    To get notes text as List, you can use

    List<String>? notesText =
         notes?.map((controller) => controller.text).toList();
    

    More about TextEditingController