🌟 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 Field Example #

[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

Architecture Diagram #

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

🧩 Supported Field Types #

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",
)

✔ 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

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 #

🔗 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