How to assign TextEditingController to dynamicaly created textfield in model and retrieve data from TextEditingController in flutter

Question

What I actually want is to create text fields against each index of my list and display this list of text fields in expansion tile with Title 'index' of list and children are Textfields which user will create dynamically on button click so I Created list of text fields dynamically and now want to assign TextEditingController to each of textfields and retirive data

This is my Model I created

class MyModel {
  List<Widget> widgets;
  bool isShow = false;
  MyModel({ required this.widgets, required this.isShow});
}

This is my Controller

class DummyController extends ChangeNotifier {
  List<MyModel> myModelList = [];
  addTextFieldToDay(var index) {
    myModelList[index].widgets.add(TextField());
    notifyListeners();
  }
}

And here is how I am calling above function and displaying textfields

ListView.builder(
                   itemCount: vm.myModelList.length,
                   itemBuilder: ((context, index) {
                     return ExpansionTile(
                         title: Text('Day ${index + 1}'),
                              children: [
                                IconButton(
                                    onPressed: () {
                                      vm.addTextFieldToDay(index);
                                    },
                                    icon: Icon(Icons.add)),
                                Container(
                                    color: Colors.white,
                                    height: 150,
                                    child: ListView(children:vm.myModelList[index].widgets)
                                ),

I tried all previously asked question solutions: But the problem i faced in this is i don't know how to get value of specific index controller i.e

List<TextEditingController> controllers = [];

TextEditingController controller = TextEditingController();
controllers.add(controller);

score 0 · Answer 1 · answered Aug 18 '22 at 17:06

It here:

class Home extends StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<Widget> listData = [];

  List<TextEditingController> listDataCTL = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('AppBar'),
        ),
        body: Column(
          children: [
            TextButton(
                onPressed: () {
                  var ctl = TextEditingController(text: "index");
                  var textF = TextField(
                    controller: ctl,
                  );
                  listData.add(textF);
                  listDataCTL.add(ctl);
                  setState(() {});
                },
                child: Text("Add")),
            Expanded(
              child: ListView.builder(
                itemCount: listData.length + 1,
                itemExtent: 50,
                itemBuilder: (context, index) {
                  if (index == 0) {
                    return GestureDetector(
                      onTap: () {
                        print(listDataCTL.first.text);
                      },
                      child: Container(
                        child: Text('Header'),
                      ),
                    );
                  }
                  return Container(
                    child: listData[index - 1],
                  );
                },
              ),
            ),
          ],
        ));
  }
}

score 0 · Accepted Answer · answered Aug 22 '22 at 10:47

Here is how achieve this I remove model class and create List of dynamic type and added days to my list with key value pair

  class DummyController extends ChangeNotifier {

  List days = [];
  int addedDay =0;
  List finalMap = [];

  addDaysToList(){
    addedDay++;
    days.add({'day$addedDay':<TextEditingController>[]});
    finalMap.add({'day$addedDay':<String>[]});
    notifyListeners();
  }

  addTextFieldsToList(var index){
    days[index]['day${index+1}'].add(TextEditingController());
    notifyListeners();
  }}

And this is what i do in my view

  Container(
                child: SizedBox(
                  height: 500,
                  child: ListView.builder(
                      itemCount: vm.days.length,
                      itemBuilder: ((context, index) {
                        return ExpansionTile(
                          title: Text('Day ${index + 1}'),
                          children: [
                            IconButton(
                                onPressed: () {
                                  vm.addTextFieldsToList(index);
                                },
                                icon: Icon(Icons.add)),
                            Container(
                                color: Colors.grey[300],
                                height: 150,
                                child: ListView.builder(
                                    itemCount: vm.days[index['day${index+1}'].length,
                                    itemBuilder: ((context, mindex) {
                                      return TextField(
                                        controller: vm.days[index]['day${index+1}'][mindex],);
                  })) ),],);

})),),),

How to assign TextEditingController to dynamicaly created textfield in model and retrieve data from TextEditingController in flutter

2 Answers2