flutterdarttexteditingcontroller

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


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 retrieve data

This is my model class 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); 

Solution

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

    })),),),