feat: add dynamic fields example

Author: deandreamatias

example/lib/main.dart

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

example/lib/sources/custom_fields.dart

@@ -11,7 +11,6 @@ class CustomFields extends StatefulWidget {
 
 class _CustomFieldsState extends State<CustomFields> {
   final _formKey = GlobalKey<FormBuilderState>();
-  var options = ["Option 1", "Option 2", "Option 3"];
 
   @override
   Widget build(BuildContext context) {

example/lib/sources/dynamic_fields.dart

@@ -0,0 +1,136 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_form_builder/flutter_form_builder.dart';
+import 'package:form_builder_validators/form_builder_validators.dart';
+
+class DynamicFields extends StatefulWidget {
+  const DynamicFields({Key? key}) : super(key: key);
+
+  @override
+  State<DynamicFields> createState() => _DynamicFieldsState();
+}
+
+class _DynamicFieldsState extends State<DynamicFields> {
+  final _formKey = GlobalKey<FormBuilderState>();
+  final List<Widget> fields = [];
+  String savedValue = '';
+
+  @override
+  void initState() {
+    savedValue = _formKey.currentState?.value.toString() ?? '';
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FormBuilder(
+      key: _formKey,
+      clearValueOnUnregister: true,
+      child: Column(
+        children: <Widget>[
+          const SizedBox(height: 20),
+          FormBuilderTextField(
+            name: 'name',
+            validator: FormBuilderValidators.required(),
+            decoration: const InputDecoration(
+              label: Text('Started field'),
+            ),
+          ),
+          ...fields,
+          const SizedBox(height: 10),
+          Row(
+            children: <Widget>[
+              Expanded(
+                child: MaterialButton(
+                  color: Theme.of(context).colorScheme.secondary,
+                  child: const Text(
+                    "Submit",
+                    style: TextStyle(color: Colors.white),
+                  ),
+                  onPressed: () {
+                    _formKey.currentState!.saveAndValidate();
+                    setState(() {
+                      savedValue =
+                          _formKey.currentState?.value.toString() ?? '';
+                    });
+                  },
+                ),
+              ),
+              const SizedBox(width: 20),
+              Expanded(
+                child: MaterialButton(
+                  color: Theme.of(context).colorScheme.secondary,
+                  child: const Text(
+                    "Add field",
+                    style: TextStyle(color: Colors.white),
+                  ),
+                  onPressed: () {
+                    setState(() {
+                      fields.add(NewTextField(
+                        name: 'name_${fields.length}',
+                        onDelete: () {
+                          setState(() {
+                            fields.removeAt(fields.length - 1);
+                          });
+                        },
+                      ));
+                    });
+                  },
+                ),
+              ),
+            ],
+          ),
+          const Divider(height: 40),
+          Text('Saved value: ${_formKey.currentState?.value.toString() ?? ''}'),
+        ],
+      ),
+    );
+  }
+}
+
+class NewTextField extends StatefulWidget {
+  const NewTextField({
+    super.key,
+    required this.name,
+    this.onDelete,
+    this.unregisterField,
+  });
+  final String name;
+  final VoidCallback? onDelete;
+  final void Function(String name, FormBuilderFieldState field)?
+      unregisterField;
+
+  @override
+  State<NewTextField> createState() => _NewTextFieldState();
+}
+
+class _NewTextFieldState extends State<NewTextField> {
+  @override
+  void dispose() {
+    super.dispose();
+    // widget.unregisterField?.call(widget.name, this);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 8),
+      child: Row(
+        children: [
+          Expanded(
+            child: FormBuilderTextField(
+              name: widget.name,
+              validator: FormBuilderValidators.minLength(4),
+              decoration: const InputDecoration(
+                label: Text('New field'),
+              ),
+            ),
+          ),
+          IconButton(
+            icon: const Icon(Icons.delete_forever),
+            onPressed: widget.onDelete,
+          ),
+        ],
+      ),
+    );
+  }
+}