🌟 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.

---

📸 Demo

JSON Dynamic Form

Complex JSON Form Layout

File & Image Upload

Validation Demo

Dropdown Field Example

---

⚡ 30 Second Example

Create a fully working form in seconds.

import 'package:flutter_smart_forms/flutter_smart_forms.dart';

final controller = SmartFormController();

SmartForm(
  controller: controller,
  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);
  },
);

Result

{
"name": "John",
"email": "john@email.com",
"password": "****",
"country": "India"
}

---

✨ 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
• ✅ Barcode scanner
• ✅ Fully customizable UI
• ✅ Simple developer API
• ✅ Extendable architecture

---

Why flutter_smart_forms?

flutter_smart_forms simplifies building complex dynamic forms in Flutter.

Instead of writing hundreds of lines of UI code, forms can be defined using:

• JSON • FieldModel • Flutter widgets

This makes it ideal for:

• Admin dashboards • CMS driven apps • Enterprise applications • Dynamic form APIs

Feature	flutter_smart_forms	flutter_form_builder	reactive_forms
JSON driven forms	✅	❌	❌
Conditional fields	✅	⚠️	⚠️
Async validation	✅	✅	✅
File upload	✅	❌	❌
Signature pad	✅	❌	❌
Nested arrays	✅	⚠️	⚠️

---

Architecture Diagram

JSON / Widgets
      ↓
FieldModel
      ↓
SmartFormController
      ↓
Reactive Fields
      ↓
UI Rendering

---

🧩 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 your pubspec.yaml

dependencies:
  flutter_smart_forms: ^1.0.1

Run

flutter pub get

---

🚀 Quick Start

Create a form 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: john@email.com,
  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 Example

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

Show fields dynamically based on other field values.

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

Reactive dependency example:

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

---

📅 Date / Time / DateTime Picker

Control picker type using dateMode.

Supported values

date
time
datetime

Example

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

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

---

✔ Validation

Widget example

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

JSON example

{
  "type": "text",
  "key": "firstName",
  "label": "First Name",
  "validators": "required|min:2"
}

Available validators

• required
• required_if:userType,admin
• required_unless:isGuest,true
• email
• phone
• url
• min:3
• max:20
• between:3,10
• after:2024-01-01
• fileType:jpg,png,pdf
• regex
• match:password
• async:emailAvailable

Dependent Validators

Rule	Example	Meaning
same	same:password	Must be equal
different	different:username	Must NOT be equal
in	in:admin,user,manager	Value must be in list
not_in	not_in:test,guest	Value must NOT be in list
confirmed	confirmed	Must match field_confirmation
accepted	accepted	Must be true/yes/1

---

Smart Error Messages

{
"type": "text",
"key": "username",
"label": "Username",
"validators": "required|min:3|max:10",
"messages": {
"required": "Username is required",
"min": "Username must be at least :min characters",
"max": "Username cannot exceed :max characters"
}
}

---

⏳ Async Validation

Example checking email availability.

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

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

    if (value == "test@email.com") {
      return "Email already exists";
    }

    return null;
  },
)

---

🗂 File / Image Upload Options

Parameter	Type	Description
uploadText	String	Upload button text
uploadIcon	String	Icon type: cloud / image
multiple	bool	Allow multiple files
compress	bool	Enable compression
compressQuality	int	Compression quality
preview	bool	Show preview
removable	bool	Allow remove
crop	bool	Enable crop
cropStyle	String	rectangle / circle
cropAspectRatio	Map	Example { "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 complex structures like:

Orders
 └ Items
    └ Sub Items

---

🎛 SmartFormController

Provides full control over form state.

Create controller

final controller = SmartFormController();

Set value

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

Get value

controller.getValue("email");

Validate form

controller.validate();

Validate on button click

await controller.validateFields([
"email",
"password",
"phone"
]);

ElevatedButton(
  onPressed: () async {
    final valid = await controller.validateField("email");

    if (valid) {
      print("Email valid");
    }
  },
  child: Text("Check Email"),
)

Reset form

controller.reset();

Get all values

controller.values

Register custom validator

Validators.register("noAdmin", (value, param) {
  if (value == "admin") {
    return "Admin is not allowed";
  }
  return null;
});

---

🎨 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);
  },
);

---

📂 Example Project

A full example is available inside

example/lib/main.dart

Run the example to explore all field types.

---

🗺 Roadmap

Upcoming features

• Multi-step wizard forms • Remote API driven forms • Form auto-save persistence • Dynamic sections • Drag & drop form builder

---

🤝 Contributing

Contributions are welcome.

Steps

1. Fork the repository
2. Create a new feature branch
3. Commit your 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.flutter-io.cn

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