title: What's the best way to dynamically load form fields in flutter?
body: <p>My TextFormFields don't work properly and cause the page to rebuild when I click on them and the keyboard doesn't fully show.</p>
  
  <p>I have a form that has 2 dropdowns and multiple text fields. The dropdowns determine which text fields are shown. I determine this by doing the following:</p>
  
  <pre><code>Form(
                      key: _formKey,
                      child: Flex(
                        direction: Axis.vertical,
                        children: &lt;Widget&gt;[
                          //category field
                          new FormField&lt;String&gt;(
                              validator: this.validateField,
                              builder: (FormFieldState&lt;String&gt; state) {
                                return new DropdownButtonHideUnderline(
                                    child: DropdownButton&lt;String&gt;(
                                  hint: new Text('Select Category'),
                                  value: exercise.categoryName,
                                  items: categoryNameList.map((String value) {
                                    return new DropdownMenuItem&lt;String&gt;(
                                      value: value,
                                      child: new Text(value),
                                    );
                                  }).toList(),
                                  onChanged: (String val) {
                                    setState(() {
                                      //save category name to the exercise object to be saved
                                      exercise.categoryName = val;
                                      state.didChange(val);
                                      // reset exercise dropdown when switching categories
                                      exercise = new Exercise(
                                          categoryName: val, cardioImperial: -1);
                                      // get index of the selected category to be able to load the correct
                                      // exercise list
                                      _exerciseSelectedTextIndex =
                                          categoryNameList.indexOf(val);
                                      _exerciseSelectedList =
                                          categoryList[_exerciseSelectedTextIndex]
                                              .exerciseNames;
                                    });
                                  },
                                ));
                              }),
  
                          // only load the exercise list once the category is selected
                          _exerciseSelectedList != null
                              ? Container(
                                  child:
                                      Flex(direction: Axis.vertical, children: &lt;
                                          Widget&gt;[
                                  new FormField(
                                      validator: this.validateField,
                                      builder: (FormFieldState&lt;String&gt; state) {
                                        return new DropdownButtonHideUnderline(
                                            child: DropdownButton&lt;String&gt;(
                                          hint: new Text('Select Exercise'),
                                          value: exercise.name,
                                          items: _exerciseSelectedList
                                              .map((String value) {
                                            return new DropdownMenuItem&lt;String&gt;(
                                              value: value,
                                              child: new Text(value),
                                            );
                                          }).toList(),
                                          onChanged: (String val) {
                                            setState(() {
                                              exercise.name = val;
                                              state.didChange(val);
                                            });
                                          },
                                        ));
                                      }),
                                ]))
                              : Container(),
  
                          //if cardio load time/length else load reps/quantity
                          _exerciseSelectedList != null
                              ? categoryList[_exerciseSelectedTextIndex].cardio ==
                                      true
                                  ? Flex(direction: Axis.vertical, children: &lt;
                                      Widget&gt;[
                                      Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          children: &lt;Widget&gt;[
                                            SizedBox(
                                                width: 75.0,
                                                child: TextFormField(
                                                  validator: this.validateField,
                                                  onSaved: (value) =&gt; exercise
                                                      .cardioLength = value,
                                                  keyboardType:
                                                      TextInputType.number,
                                                  decoration: InputDecoration(
                                                    hintText: 'Length',
                                                  ),
                                                )),
                                            new Radio(
                                              groupValue: exercise.cardioImperial,
                                              value: 1,
                                              onChanged: (value) =&gt; setState(() {
                                                    exercise.cardioImperial =
                                                        value;
                                                  }),
                                            ),
                                            new Text('Miles'),
                                            new Radio(
                                              groupValue: exercise.cardioImperial,
                                              value: 2,
                                              onChanged: (value) =&gt; setState(() {
                                                    exercise.cardioImperial =
                                                        value;
                                                  }),
                                            ),
                                            new Text('KM')
                                          ]),
  
                                      // time fields
                                      Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          children: &lt;Widget&gt;[
                                            Padding(
                                              padding: const EdgeInsets.all(8.0),
                                              child: SizedBox(
                                                width: 30.0,
                                                child: TextFormField(
                                                  validator: this.validateField,
                                                  onSaved: (value) =&gt;
                                                      exercise.hh = value,
                                                  keyboardType:
                                                      TextInputType.number,
                                                  decoration: InputDecoration(
                                                    hintText: 'HH',
                                                  ),
                                                ),
                                              ),
                                            ),
                                            Padding(
                                              padding: const EdgeInsets.all(8.0),
                                              child: SizedBox(
                                                width: 30.0,
                                                child: TextFormField(
                                                  validator: this.validateField,
                                                  onSaved: (value) =&gt;
                                                      exercise.mm = value,
                                                  keyboardType:
                                                      TextInputType.number,
                                                  decoration: InputDecoration(
                                                    hintText: 'MM',
                                                  ),
                                                ),
                                              ),
                                            ),
                                            Padding(
                                              padding: const EdgeInsets.all(8.0),
                                              child: SizedBox(
                                                width: 30.0,
                                                child: TextFormField(
                                                  validator: this.validateField,
                                                  onSaved: (value) =&gt;
                                                      exercise.ss = value,
                                                  keyboardType:
                                                      TextInputType.number,
                                                  decoration: InputDecoration(
                                                    hintText: 'SS',
                                                  ),
                                                ),
                                              ),
                                            )
                                          ])
                                    ])
  
                                  // if not cardio, load quantity/reps
                                  : Flex(
                                      direction: Axis.vertical,
                                      children: &lt;Widget&gt;[
                                          SizedBox(
                                            width: 75.0,
                                            child: TextFormField(
                                              onSaved: (value) =&gt;
                                                  exercise.quantity = value,
                                              keyboardType: TextInputType.number,
                                              decoration: InputDecoration(
                                                hintText: 'Weight',
                                              ),
                                            ),
                                          ),
  
                                          // reps field
                                          Padding(
                                            padding: const EdgeInsets.all(8.0),
                                            child: SizedBox(
                                              width: 50.0,
                                              child: TextFormField(
                                                onSaved: (value) =&gt;
                                                    exercise.reps = value,
                                                keyboardType:
                                                    TextInputType.number,
                                                decoration: InputDecoration(
                                                  hintText: 'Reps',
                                                ),
                                              ),
                                            ),
                                          ),
                                        ])
                              : Container(),
                        ],
                      ))
  </code></pre>
  
  <p>I would expect that when I select Cardio (cardio == true), the available TextFormFields could be clicked on and data could be entered. The right fields display, but the whole page rebuilds when I click on any of the text form fields. Is there a better way to construct this page that would allow for the expected behavior?</p>