knowing that I need controllers to store my variables values and to send the data via a POST Method.

I'm facing this issue : I have TextFormField that can be added multiple time (infinite) with a button click.

How can I get all the values that the user added in the inputs ?

Otherwise , how to manage adding controllers to every new TextFormField and send them via POST Method.

This is my Widget and the function that will add a new one to the list :

    List<Widget> _cardList = [
    (InputRefNomProduit(
      label: 'Référence',
      content: 'Taper la référence',
      label2: 'Nom du produit',
      content2: '',
      label3: 'Quantité',
      content3: 'Taper la quantité',
      label4: 'Prix',
      content4: 'Taper le prix unitaire',
    )),
  ];

  void _addCardWidgetExp() {
    setState(() {
      _cardList.add(SizedBox(height: 10));
      Divider(
        thickness: 2,
        color: Colors.white,
      );
      _cardList.add(InputRefNomProduit(
        label: 'Référence',
        content: 'Taper la référence',
        label2: 'Nom du produit',
        content2: '',
        label3: 'Quantité',
        content3: 'Taper la quantité',
        label4: 'Prix',
        content4: 'Taper le prix unitaire',
      ));
    });
  }

This is my POST Method where all the controllers values should be sent to my Database :

 onPressed: () {
            if (_formKey.currentState.validate()) {
                setState(() {
                     future = 
                      // Multiple controllers here
                     });

CodePudding user response：

I'm thinking about those following steps :

1. Create an array of TextEditController and store it as a property in your Stateless or Stateful Widget. ex : List textControllers. Create as many as you need for retrieving your InputRefNomProduit values.
2. Add those properties to

// Above maybe in init()
TextEditingController controller1 = TextEditingController();
TextEditingController controller2 = TextEditingController();
TextEditingController controller3 = TextEditingController();
TextEditingController controller4 = TextEditingController();

textControllers.add(controller1);
textControllers.add(controller2);
textControllers.add(controller3);
textControllers.add(controller4);

// Below where you create your InputRefNomProduit

    InputRefNomProduit(
          label: 'Référence',
          content: 'Taper la référence',
          textController1: controller1,
          label2: 'Nom du produit',
          content2: '',
          textController2: controller2,
          label3: 'Quantité',
          content3: 'Taper la quantité',
          textController3: controller3,
          label4: 'Prix',
          content4: 'Taper le prix unitaire',
          textController4: controller4,
        ))

3. Attach the text controller to the Textformfield you want

4. When you want to retrieve values, loop into _cardList and grab values in textController1, textController2 etc...

Note : there's a better way to do this, having a method to get specific values but it's to give you an idea and it's simple/basic solution

CodePudding user response：

Below is the code using textEditingController please have a look:

import 'package:flutter/material.dart';

class DynamicTextField extends StatefulWidget {
  const DynamicTextField({Key? key}) : super(key: key);

  @override
  State<DynamicTextField> createState() => _DynamicTextFieldState();
}

class _DynamicTextFieldState extends State<DynamicTextField> {
  List<Widget> dynamicTextField = [];
  List<TextEditingController> controllers = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          actions: [
            IconButton(
                onPressed: () {
                  setState(() {
                    controllers.add(TextEditingController());
                    dynamicTextField
                        .add(DynamicField(controller: controllers.last));
                  });
                },
                icon: Icon(Icons.add, color: Colors.white))
          ],
          title: Text("Sample Screen"),
        ),
        floatingActionButton: dynamicTextField.isNotEmpty
            ? ElevatedButton(
                onPressed: () {
                  for (int i = 0; i < dynamicTextField.length; i  ) {
                    print(controllers[i].text);
                  }
                },
                child: Icon(Icons.save))
            : const SizedBox(),
        body: dynamicTextField.isNotEmpty
            ? ListView.separated(
                shrinkWrap: true,
                itemBuilder: (context, index) {
                  return dynamicTextField[index];
                },
                separatorBuilder: (context, index) => SizedBox(height: 10),
                itemCount: dynamicTextField.length)
            : const Text(
                "Please press the above button on the app bar to add text field"));
  }
}

class DynamicField extends StatelessWidget {
  final TextEditingController controller;
  const DynamicField({
    Key? key,
    required this.controller,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
    );
  }
}