Get value from textFormField within a ListView

Question

I've a ListView in my flutter project, in which I have 2 TextFormFields. I want the get the value whatever user has typed in from the TextFormField and print it(for now).

I've checked following link - Flutter : Textfield in ListView.builder and tried to get the value.

Following is my code -

class _OrderBookingState extends State<OrderBooking> {
  @override
  Widget build(BuildContext context) {
    TextEditingController controller = new TextEditingController();
    List<TextEditingController> _textFieldRateControllers = new List();
    List<TextEditingController> _textFieldQtyControllers = new List();

    return Scaffold(
      appBar: AppBar(
        title: Center(child: Text(widget.shop.shopName)),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            child: StreamBuilder<List<ProductModel>>(
              stream: DatabaseService().productList,
                builder: (context,snapshot){
                  if(snapshot.hasData){
                    return Flexible(
                      child: ListView.builder(
                        scrollDirection: Axis.vertical,
                          shrinkWrap: true,
                          itemCount: snapshot.data.length,
                          itemBuilder: (context, index){
                            _textFieldRateControllers[index].text = "5";
                            _textFieldQtyControllers[index].text = "5";
                          _textFieldQtyControllers.add(new TextEditingController());
                          _textFieldRateControllers.add(new TextEditingController());
                            return Padding(
                              padding: EdgeInsets.only(top: 8.0),
                              child: Card(
                                margin: EdgeInsets.fromLTRB(10.0, 6.0, 10.0, 0.0),
                                child: ListTile(
                                  leading: CircleAvatar(
                                    radius: 25.0,
                                    backgroundColor: Colors.deepOrangeAccent,
                                  ),
                                  title: Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                    children: <Widget>[
                                      Container(
                                        width: 175,
                                        child: Text(snapshot.data[index].productName,),
                                      ),
                                      // Expanded(child: Container(
                                      //   width: 10,
                                      //     child: Center(child: Text(snapshot.data[index].productName,)))),
                                      SizedBox(width: 5,),
                                      Expanded(child: Container(
                                        width: 10,
                                          child: TextFormField(
                                            controller: _textFieldRateControllers[index],
                                            initialValue: snapshot.data[index].rate,textAlign: TextAlign.center,
                                          ),


                                      ),
                                      ),
                                      SizedBox(width: 5,),
                                      Expanded(child: TextFormField(
                                        controller: _textFieldQtyControllers[index],
                                        initialValue: "0",textAlign: TextAlign.center,)
                                      )
                                    ],
                                  ),
                                  subtitle: Text('MRP ' + snapshot.data[index].mrp),

                                ),
                              ),
                            );
                          }
                      ),
                    );
                  }else{
                    return Loading();
                  }
                }
            ),

          ),
          Container(
            margin: EdgeInsets.fromLTRB(10.0, 6.0, 10.0, 0.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                    "Total Value: 0/-",
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold,backgroundColor: Colors.greenAccent)
                ),
                RaisedButton(
                  child: Text("Save",style: TextStyle(fontSize: 18.0),),
                  color: Colors.green,
                  textColor: Colors.white,
                  highlightColor: Colors.lightGreenAccent,
                  onPressed: (){
                    print(_textFieldQtyControllers[1].text);
                  },
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

I'm getting below error -

RangeError (index): Invalid value: Valid value range is empty: 0

Please let me know how to solve this.

Lars · Accepted Answer · 2021-03-05T12:44:01.287

NEW UPDATE

You need to the remove the initalValue argument from the TextField:

Expanded(child: TextFormField(
    controller: _textFieldQtyControllers[index],
    initialValue: "0", //REMOVE THIS LINE
    textAlign: TextAlign.center,)
)

And you have the wrong order of actions, it must be:

Set add the TextEditingController to your list with

_textFieldRateControllers.add(new TextEditingController());
_textFieldQtyControllers.add(new TextEditingController());

Set the controller text to your initialValue:

_textFieldRateControllers[index].text = snapshot.data[index].rate.toString();
_textFieldQtyControllers[index].text = "0";

OLD

To solve your error, remove the initialValue and instead set the

//set this after 
_textFieldRateControllers[index].text = //your Initial data
_textFieldQtyControllers[index].text = //your Initial data

I think you did not set the List properly, as a TextEditingController needs to be created like this:

TextEditingController controller = new TextEditingController();

So then in your ListView, call this in the builder:

_textFieldRateControllers.add(new TextEditingController());
_textFieldQtyControllers.add(new TextEditingController());

This creates the controller properly with a constructor

I tried adding these two lines after (within) the Listview.builder. Then I get error - "Failed assertion: line 191 pos 15: 'initialValue == null || controller == null': is not true." — Alias, Mar 05 '21 at 08:05
I've added my current code in the question. it produces the same output. Are you suggesting the same only or am I getting something wrong. — Alias, Mar 05 '21 at 11:47
@Alias i have updated it again, make sure to delete the initialValue argument from you TextField — Lars, Mar 05 '21 at 12:44

score 0 · Answer 2 · answered Apr 28 '22 at 17:21

late List<TextEditingController> txtDataNascDogs;
late List<FocusNode> _dataNascFocuss;

@override
void initState() {
txtDataNascDogs = List<TextEditingController>.generate(
Get.find<AgendamentoVacinaController>().listDogMenorIdade.length,
(index) => TextEditingController(text: ""));

_dataNascFocuss = List<FocusNode>.generate(
Get.find<AgendamentoVacinaController>().listDogMenorIdade.length,
(index) => FocusNode());
super.initState();
}

Get value from textFormField within a ListView

2 Answers2

NEW UPDATE

OLD