feat: add conditonal fields example

Author: deandreamatias

example/lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:example/sources/conditional_fields.dart';
 import 'package:example/sources/dynamic_fields.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
@@ -105,6 +106,23 @@ class _HomePage extends StatelessWidget {
               );
             },
           ),
+          const Divider(),
+          ListTile(
+            title: const Text('Conditional Form'),
+            trailing: const Icon(Icons.arrow_right_sharp),
+            onTap: () {
+              Navigator.of(context).push(
+                MaterialPageRoute(
+                  builder: (context) {
+                    return const CodePage(
+                      title: 'Conditional Form',
+                      child: ConditionalFields(),
+                    );
+                  },
+                ),
+              );
+            },
+          ),
         ],
       ),
     );

example/lib/sources/conditional_fields.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_form_builder/flutter_form_builder.dart';
+import 'package:form_builder_validators/form_builder_validators.dart';
+
+class ConditionalFields extends StatefulWidget {
+  const ConditionalFields({Key? key}) : super(key: key);
+
+  @override
+  State<ConditionalFields> createState() => _ConditionalFieldsState();
+}
+
+class _ConditionalFieldsState extends State<ConditionalFields> {
+  final _formKey = GlobalKey<FormBuilderState>();
+  int? option;
+
+  @override
+  Widget build(BuildContext context) {
+    return FormBuilder(
+      key: _formKey,
+      child: Column(
+        children: <Widget>[
+          const SizedBox(height: 20),
+          FormBuilderDropdown<int>(
+            name: 'options',
+            validator: FormBuilderValidators.required(),
+            decoration: const InputDecoration(
+              label: Text('Select the option'),
+            ),
+            onChanged: (value) {
+              setState(() {
+                option = value;
+              });
+            },
+            items: const [
+              DropdownMenuItem(value: 0, child: Text('Show textfield')),
+              DropdownMenuItem(value: 1, child: Text('Show info text')),
+            ],
+          ),
+          const SizedBox(height: 10),
+          Visibility(
+            visible: option == 0,
+            // Can use to recreate completely the field
+            // maintainState: false,
+            child: FormBuilderTextField(
+              name: 'textfield',
+              validator: FormBuilderValidators.minLength(4),
+              decoration: const InputDecoration(
+                label: Text('Magic field'),
+              ),
+            ),
+          ),
+          Visibility(
+            visible: option == 1,
+            child: const Text('Magic info'),
+          ),
+          const SizedBox(height: 10),
+          MaterialButton(
+            color: Theme.of(context).colorScheme.secondary,
+            child: const Text(
+              "Submit",
+              style: TextStyle(color: Colors.white),
+            ),
+            onPressed: () {
+              _formKey.currentState!.saveAndValidate();
+              debugPrint(_formKey.currentState?.instantValue.toString() ?? '');
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}

example/lib/sources/dynamic_fields.dart

@@ -81,7 +81,7 @@ class _DynamicFieldsState extends State<DynamicFields> {
             ],
           ),
           const Divider(height: 40),
-          Text('Saved value: ${_formKey.currentState?.value.toString() ?? ''}'),
+          Text('Saved value: $savedValue'),
         ],
       ),
     );