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

user_17699263 0
Viewed 44

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);
texteditingcontroller flutter-layout dart flutter
2 Answers

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

})),),),

user_176992630

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