🌟 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

Dynamic JSON Form

Complex JSON Form Layout

Dynamic JSON Form Example

File & Image Upload

File Upload

Validation Demo

Validation

Dropdown Demo

⚡ 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

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

Fork the repository
Create a new feature branch
Commit your changes
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

🌟 flutter_smart_forms

📸 Demo

JSON Dynamic Form

Complex JSON Form Layout

File & Image Upload

Validation Demo

⚡ 30 Second Example

✨ Features

Why flutter_smart_forms?

Architecture Diagram

🧩 Supported Field Types

📦 Installation

🚀 Quick Start

🧠 JSON Driven Forms

🧾 FieldModel Example

👁 Conditional / Reactive Fields

📅 Date / Time / DateTime Picker

✔ Validation

Smart Error Messages

⏳ Async Validation

🗂 File / Image Upload Options

🔗 Nested Arrays

🎛 SmartFormController

🎨 Custom Submit Button

📂 Example Project

🗺 Roadmap

🤝 Contributing

🐛 Issues

📄 License

⭐ Support

🔎 Keywords

Libraries

flutter_smart_forms package

🌟 flutter_smart_forms

📸 Demo

JSON Dynamic Form

Complex JSON Form Layout

File & Image Upload

Validation Demo

Dropdown Field Example

⚡ 30 Second Example

✨ Features

Why flutter_smart_forms?

Architecture Diagram

🧩 Supported Field Types

📦 Installation

🚀 Quick Start

🧠 JSON Driven Forms

🧾 FieldModel Example

👁 Conditional / Reactive Fields

📅 Date / Time / DateTime Picker

✔ Validation

Smart Error Messages

⏳ Async Validation

🗂 File / Image Upload Options

🔗 Nested Arrays

🎛 SmartFormController

🎨 Custom Submit Button

📂 Example Project

🗺 Roadmap

🤝 Contributing

🐛 Issues

📄 License

⭐ Support

🔎 Keywords

Libraries

flutter_smart_forms package