flutter_smart_forms 1.0.0

A powerful, reactive, and dynamic form builder for Flutter supporting JSON-driven forms, conditional fields, validation, and custom UI components.

🌟 flutter_smart_forms

Flutter Smart Forms is a powerful, reactive, and dynamic form builder for Flutter that allows developers to build complex forms using JSON or Flutter widgets with minimal boilerplate.

It includes validation, async validation, conditional fields, icons, dynamic visibility, showClearIcon inputs, and reactive state management.

Build powerful forms once and control them dynamically through APIs or JSON.

---

✨ Features

• ✅ JSON-driven forms
• ✅ Widget-driven forms
• ✅ Reactive field updates
• ✅ Real-time value tracking
• ✅ Synchronous validation
• ✅ Async validation
• ✅ Conditional field visibility
• ✅ Enable/disable fields dynamically
• ✅ Readonly fields
• ✅ showClearIcon input fields
• ✅ Date / Time / DateTime picker support
• ✅ Icon support
• ✅ Nested array support
• ✅ File / Image upload support
• ✅ Signature pad
• ✅ Fully customizable UI
• ✅ Simple developer API
• ✅ Extendable architecture

---

🧩 Supported Field Types

Field Type	Supported
Text	✅
Multiline Text	✅
Email	✅
Phone	✅
Password	✅
Dropdown	✅
Multi Select	✅
Checkbox	✅
Radio	✅
Switch	✅
Date Picker	✅
Time Picker	✅
DateTime Picker	✅
File Upload	✅
Image Upload	✅
Suggestion/AutoComplete	✅
Signature Pad	✅
Barcode Scanner	✅
Rating	✅

More fields will be added in future releases.

---

📦 Installation

Add the package to pubspec.yaml

dependencies:
  flutter_smart_forms: ^1.0.0

Run

flutter pub get

---

🚀 Quick Start

Create a form quickly using Flutter widgets.

import 'package:flutter_smart_forms/flutter_smart_forms.dart';

final formController = SmartFormController();

SmartForm(
  controller: formController,
  children: [

    TextFieldField(
      "name",
      label: "Full Name",
showClearIcon: true,
    ),

    EmailField(
      "email",
      label: "Email Address",
    ),

    PasswordField(
      "password",
      label: "Password",
    ),

    DropdownField(
      "country",
      label: "Country",
      items: ["India", "USA", "UK"],
    ),

  ],
  onSubmit: (values) {
    print(values);
  },
);

Example output

{
  name: John,
  email: [e-mail],
  password: ****,
  country: India
}

---

🧠 JSON Driven Forms

Forms can also be created dynamically using JSON.

final jsonForm = [
  {
    "type": "text",
    "key": "name",
    "label": "Full Name",
    "placeholder": "Enter your full name",
    "showClearIcon": true
  },
  {
    "type": "email",
    "key": "email",
    "label": "Email Address"
  },
  {
    "type": "password",
    "key": "password",
    "label": "Password"
  },
  {
    "type": "dropdown",
    "key": "country",
    "label": "Country",
    "items": ["India", "USA", "UK"]
  }
];

Use JSON in SmartForm

final fields = jsonForm.map((e) => FieldModel.fromJson(e)).toList();
SmartForm(
  controller: controller,
  fields: fields,
  onSubmit: (values) {
    print(values);
  },
);

---

🧾 FieldModel List

You can also define forms directly using FieldModel:

final fields = [
  FieldModel(
  type: 'text',
  key: 'firstName',
  label: 'First Name',
  placeholder: 'Enter first name',
  defaultValue: 'Alice',
  extra: {'disabled': true},
  ),
  FieldModel(
  type: 'text',
  key: 'lastName',
  label: 'Last Name',
  defaultValue: 'R',
  ),
  FieldModel(
  type: 'text',
  key: 'fullName',
  label: 'Full Name',
  defaultValueCallback: (values) {
    final first = values['firstName'] ?? '';
  final last = values['lastName'] ?? '';
  return '$first $last';
},
  ),
];

---

❌ Conditional / Reactive Fields

FieldModel(
type: "text",
key: "company_name",
label: "Company Name",
visibleIf: {"user_type": "company"},
)

watchFields ensures dependent fields update reactively.

FieldModel(
type: 'dropdown',
key: 'state',
watchFields: ['country'],
visibleIf: {'country': 'US'},
)

---

📅 Date / Time / DateTime Picker

FieldModel(
type: "date",
key: "meeting_time",
label: "Meeting Time",
dateMode: "datetime", // date / time / datetime
)

---

✔ Validation

EmailField(
"email",
validators: [Validators.required, Validators.email],
)

{
"type": "text",
"key": "firstName",
"label": "First Name",
"placeholder": "Enter first name",
"default": "Johna",
"validators": "required|min:2",
},

Built-in validators:

• required, email, phone, numeric, minLength, maxLength, passwordStrength

Supports custom & async validators:

EmailField(
"email",
asyncValidator: (value) async {
await Future.delayed(Duration(seconds: 1));
if (value == "[e-mail]") return "Email already exists";
return null;
},
)

---

🗂 File / Image Upload Extra Options

Parameter	Type	Description
uploadText	String	Upload button text
uploadIcon	String	Icon type: cloud / image
multiple	bool	Allow multiple files/images
compress	bool	Enable compression
compressQuality	int	Compression quality 0–100
preview	bool	Show preview
removable	bool	Allow remove
crop	bool	Enable crop (image only)
cropStyle	String	rectangle / circle
cropAspectRatio	Map	e.g., {"x":1,"y":1}

---

🔗 Nested Arrays

FieldModel(
type: 'array',
key: 'addresses',
label: 'Addresses',
extra: {'minItems': 1, 'maxItems': 5},
fields: [
FieldModel(type: 'text', key: 'street', label: 'Street'),
FieldModel(type: 'text', key: 'city', label: 'City'),
],
)

Supports nested arrays for complex structures like Orders → Items → Subitems.

---

🎛 SmartFormController

• Full reactive form control
• Get/set field values
• Validation
• Reset
• Access all form values

final controller = SmartFormController();

controller.setValue("name", "John");
final email = controller.getValue("email");
controller.validate();
controller.reset();
final allValues = controller.values;

---

🎨 Custom Submit Button

SmartForm(
controller: controller,
fields: fields,
submitText: "Create Account",
submitButtonStyle: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
padding: EdgeInsets.symmetric(vertical: 16),
),
onSubmit: (values) {
print(values);
},
);

---

Convert JSON to fields

final fields = json.map((e) => FieldModel.fromJson(e)).toList();

---

📅 Date / Time Picker

You can control picker type using dateMode.

Supported values

date
time
datetime

Example

FieldModel(
  type: "date",
  key: "meeting_time",
  label: "Meeting Time",
  dateMode: "datetime",
)

Examples

Mode	Result
date	Date Picker
time	Time Picker
datetime	Date + Time Picker

---

❌ showClearIcon Fields

Fields can show a clear icon to reset input.

TextFieldField(
  "name",
  label: "Name",
showClearIcon: true,
)

---

👁 Conditional Fields

Show fields based on other field values.

Example

Show company_name if user_type == company

FieldModel(
  type: "text",
  key: "company_name",
  label: "Company Name",
  visibleWhen: {
    "field": "user_type",
    "equals": "company"
  },
)

---

✔ Built-in Validation

Add validators easily.

EmailField(
  "email",
  validators: [
    Validators.required,
    Validators.email,
  ],
)

Available validators

• required • email • phone • numeric • minLength • maxLength • passwordStrength

You can also create custom validators.

---

⏳ Async Validation

Example checking email availability.

EmailField(
  "email",
  asyncValidator: (value) async {

    await Future.delayed(Duration(seconds: 1));

    if (value == "[e-mail]") {
      return "Email already exists";
    }

    return null;
  },
)

---

🎛 SmartFormController

The controller allows full control of the form.

Create controller

final form = SmartFormController();

Get field value

form.getValue("email");

Set field value

form.setValue("name", "John");

Get all form values

form.values

Validate form

form.validate();

Reset form

form.reset();

---

🎨 Custom Submit Button

Customize submit button.

SmartForm(
  controller: controller,
  fields: fields,
  submitText: "Create Account",
  submitButtonStyle: ElevatedButton.styleFrom(
    backgroundColor: Colors.green,
    padding: EdgeInsets.symmetric(vertical: 16),
  ),
  onSubmit: (values) {
    print(values);
  },
);

---

📂 Example Project

A full example is available inside

example/lib/main.dart

Run it to explore all field types.

---

🗺 Roadmap

Upcoming features

• Multi-step forms • Form stepper wizard • Drag & drop form builder • Dynamic sections • Form analytics

---

🤝 Contributing

Contributions are welcome.

Steps:

1. Fork the repository
2. Create a new feature branch
3. Commit changes
4. Open a Pull Request

---

🐛 Issues

If you find a bug or want to request a feature, please open an issue in the repository.

---

📄 License

MIT License

---

⭐ Support

If you like this package:

• ⭐ Star the repository • 👍 Like the package on pub.dev

Your support helps the project grow.

---

🔎 Keywords

Flutter dynamic forms Flutter form builder Flutter JSON forms Flutter validation Flutter dynamic form generator Flutter async validation Flutter form engine Flutter CMS forms Flutter reactive forms Flutter form builder package