dynamic_field_builder 1.0.0

Build reactive Flutter forms from a dart map or JSON config with full UI customization.

dynamic_field_builder

Build beautiful, reactive Flutter forms from a Dart map or JSON config — with zero boilerplate and full UI control.

• 🔁 Server‑driven UI ready – define your entire form as JSON and ship it over the wire.
• 🎯 Reactive & performant – single controller holds all state, streams values and errors.
• 🎨 100% customizable – replace any internal widget, theme globally or per field.
• ✅ Powerful validation – declarative rules + custom async validators.
• 🧩 Conditional visibility – show/hide fields based on other fields’ values.
• ⚡ Batteries included – text, number, email, password (with toggle), multiline, dropdown, checkbox, switch, date, time, plus custom types.

---

📸 Preview

[Hero]

The Power of Dynamic Forms: From simple inputs to complex, themed interfaces.

Fully customizable UI: One codebase, limitless designs.

---

🚀 Installation

Add to your pubspec.yaml:

dependencies:
  dynamic_field_builder: ^1.0.0

Then run flutter pub get.

---

🏁 Quick start

import 'package:dynamic_field_builder/dynamic_field_builder.dart';

final config = [
  FieldConfig(
    key: 'name', 
    type: FieldType.text, 
    label: 'Full Name',
    prefix: Icon(Icons.person),
    validation: {'required': true}
  ),
  FieldConfig(
    key: 'password', 
    type: FieldType.password, 
    label: 'Password',
    prefix: Icon(Icons.lock),
  ),
  FieldConfig(
    key: 'country', 
    type: FieldType.dropdown, 
    label: 'Country',
    options: [
      DropdownOption(value: 'us', label: 'United States'),
      DropdownOption(value: 'ca', label: 'Canada'),
    ]
  ),
];

DynamicForm(
  config: config,
  onSubmit: (values) => print(values),
)

---

✨ Features deep‑dive

1. Declarative field config (FieldConfig)

Property	Description
key	Unique field identifier
type	One of FieldType (text, email, password, number, ...)
label / hint	Display text
validation	Built‑in rules (required, minLength, regex, …)
prefix / suffix	Custom Widgets (Icons, Images, etc.) for the field
activeColor	Custom color for Switch/Checkbox when active
checkColor	Custom color for Checkbox tick
options	For dropdown fields
conditional	Show/hide based on other field value
decorationProps	Override InputDecoration properties for this field

2. Password Visibility Toggle

The password field type now comes with a built-in visibility toggle. It automatically adds a suffix icon that allows users to show or hide their password.

3. Prefix & Suffix Widgets

Unlike other libraries that only allow IconData, we allow any Widget.

FieldConfig(
  key: 'profile',
  type: FieldType.text,
  prefix: CircleAvatar(backgroundImage: AssetImage('assets/user.png')),
  suffix: TextButton(onPressed: () {}, child: Text('Verify')),
)

4. Custom Submit Button

Don't like the default button? Provide your own:

DynamicForm(
  config: config,
  submitButtonBuilder: (onSubmit) => MyCustomButton(
    onTap: onSubmit,
    title: 'SIGN UP',
  ),
  onSubmit: (values) => save(values),
)

5. Validation that grows with you

FieldConfig(
  key: 'password',
  type: FieldType.password,
  validation: {
    'required': true,
    'minLength': 8,
    'regex': r'^(?=.*[A-Z])(?=.*\d).+$',
  },
)

6. Conditional visibility

Show a field only when another field meets a condition:

FieldConfig(
  key: 'other_pet',
  type: FieldType.text,
  label: 'Which pet?',
  conditional: Conditional(
    dependsOnKey: 'has_pet',
    equals: [true],
  ),
),

7. Complete UI theming

Global theme via DynamicFormTheme:

DynamicForm(
  config: config,
  theme: DynamicFormTheme(
    inputDecoration: InputDecoration(
      border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
    ),
    fieldPadding: const EdgeInsets.only(bottom: 20),
  ),
)

Per-field overrides:

FieldConfig(
  key: 'email',
  type: FieldType.email,
  decorationProps: {
    'filled': true,
    'fillColor': Colors.blue.withOpacity(0.1),
    'focusedBorder': OutlineInputBorder(borderSide: BorderSide(color: Colors.blue)),
  },
)

8. Reactive DynamicFormController

Grab the controller to read values or trigger validation programmatically:

final controller = DynamicFormController();

// Validate whole form
if (controller.validate()) {
  print(controller.formData); 
}

---

📚 Full API reference

• DynamicForm – The main widget.
• DynamicFormController – State & validation.
• DynamicFormTheme – Global appearance.
• FieldConfig / FieldType / Conditional / DropdownOption – Data models.

---

🤝 Contributing

PRs welcome! Feel free to open issues or propose enhancements.

---

📄 License

MIT – see LICENSE file.