create more on same page on clicked button-CodePudding

So i have already created a widget (including text form) with the thing i want. Im currently displaying one on the page, but i want to add when another button is pressed add one more. I would like to have the text felts = to diffrent things so i can show both on another page.

This is my page created

@override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          leading: CloseButton(),
          actions: buildEditingActions(),
          backgroundColor: Colors.red,
        ),
        body: SingleChildScrollView(
          padding: EdgeInsets.all(12),
          child: Form(
            key: _formKey,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text("Text...",style: TextStyle(fontSize: 24)),
                buildTitle(),
                SizedBox(height: 12),
                buildDateTimePickers(),
                Text("\nText",style: TextStyle(fontSize: 24)),
                buildWidget(),
              ],
            ),
          ),
        ),
      );

i want to be able to show the diffrent text input fields on another page, but starting with only one on the main page and everytime the button gets clicked it adds another text field, Anybody know how to do this?

I was thinking, to make a loop with a variable like in PHP "$NR" and set = 1 and then name the text fields something like "Text$NR" and at the end of the loop set $NR = 1 and then the amount of times looped is = the amount of time the button is pressed. But im not quite sure if this would work

Thanks in advance :-)

CodePudding user response：

First Step: Make sure that the screen holding text fields is a StatefulWidget.

Second Step: Declare an int variable to hold the count of text fields in the screen and start it with 1 (The initial text field), for example:

int numberOfTextFields = 1;

Third Step: In the code where you place your text fields, make a for loop with iterations equal to the value of the variable holding the count of text fields and render the text field widget, for example:

Form(
    key: _formKey,
    child: Column(
        children: [
            ...
            for(int i = 0 ; i < numberOfTextFields ; i  )
                TextField()
            ...
        ],
    ),
),

Fourth Step: In the callback of the button, increment the count variable inside setState() method, for example:

{
    ...
    setState((){
        numberOfTextFields  ;
    })
    ...
}

Lastly: To get the values from the Text Fields and pass them to the new screen, you can follow any tutorial to know how to get a value from text field in flutter, and then pass them with the why you are using, for example, Passing them in the constructor of the new screen or passing them to the arguments parameter while using named routes.

CodePudding user response：

The method works like a charm for creating ekstra fields. Im having the problem that whatever i type in text field 1 automaticly becomes the input in text field 2.

Widget buildSets() => TextFormField(
        keyboardType: TextInputType.number,
        inputFormatters: <TextInputFormatter>[
          FilteringTextInputFormatter.digitsOnly
        ],
        style: TextStyle(fontSize: 15),
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Sets',
        ),
        onFieldSubmitted: (_) => saveForm,
        validator: (sets) =>
            sets != null && sets.isEmpty ? 'Sets cannot be empty' : null,
        controller: setsController,
      );

The way i store the information is in "sets" and if this was in like PHP i would say sets$numberOfTextFields to give them all a diffrent location to store. Im not quite sure how to do that in flutter and i tried the method with sets${numberOfTextFields}. but i dindt work