Flutter_form_builder: Hide form fields based on value of other form fields?

Created on 13 Jun 2020  路  3Comments  路  Source: danvick/flutter_form_builder

Using _fbKey.currentState.fields['dependent_field'].currentState.value does not work, throws the error that customState was called on null

question

All 3 comments

@joshuakoh1 You could use Visibility() widget and set visible to either true or false depending on the value of the other field.

@Dennis-Mwea Do you mean I'll declare a separate bool value on init then set that with onChanged of the form field that is responsible for the visibility value? Because my current setup throws an error "NoSuchMethodError: The method '[]' was called on null" as the state has not been initialised unless the form has been submitted.

 Visibility(
                            visible: this._fbKey.currentState?.fields['dependent_field']?.currentState.value,
                            maintainState: true,
                            child: Text('Hello'),
                          ),

@joshuakoh1 Yeah you have to declare separate bool value on init then set that with onChanged of the form field that is responsible for the visibility value. This is what I did
```
bool enterAddressManually = false;

               Container(
                  margin: EdgeInsets.only(
                    top: 10.0,
                    bottom: enterAddressManually ? 0.0 : 16.0,
                  ),
                  child: RichText(
                    text: TextSpan(
                      text: 'Enter address manually',
                      style: TextStyle(
                        color: Colors.white,
                        fontFamily: 'Gibson',
                        fontSize: 12.0,
                        fontWeight: FontWeight.w400,
                        height: 1.4,
                      ),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          setState(() {
                            enterAddressManually = true;
                          });
                        },
                    ),
                  ),
                ),
                Visibility(
                  visible: enterAddressManually,
                  child: FormBuilderDropdown(
                    attribute: "address",
                    style: TextStyle(color: Colors.white),
                    initialValue: selectedAddress,
                    onChanged: (val) {
                      setState(() {
                        selectedAddress = val;
                        address = addresses
                            .where(
                                (address) => address.id == selectedAddress)
                            .toList()
                            .first;
                      });
                    },
                    validators: [
                      FormBuilderValidators.required(
                        errorText: 'Please choose your address.',
                      ),
                    ],
                    items: List.generate(
                      addresses.length,
                      (index) => DropdownMenuItem(
                        value: index,
                        child: Text('${addresses[index].address_1}'),
                        onTap: () {
                          setState(() {
                            address1Controller.text =
                                addresses[index].address_1;
                            address2Controller.text =
                                addresses[index].address_2;
                            address3Controller.text =
                                addresses[index].address_3;
                            cityController.text = addresses[index].city;
                            countyController.text = addresses[index].county;
                          });
                        },
                      ),
                    ),
                  ),
                ),
Was this page helpful?
0 / 5 - 0 ratings

Related issues

jans-y picture jans-y  路  7Comments

mattf80 picture mattf80  路  3Comments

awhitford picture awhitford  路  5Comments

SachinTanpure picture SachinTanpure  路  3Comments

abhinavc picture abhinavc  路  6Comments