🌟 flutter_smart_forms #

license

flutter_smart_forms is a powerful, reactive, and dynamic JSON-driven form builder for Flutter.

It allows developers to create complex forms in minutes with built-in validation, conditional fields, async validation, file uploads, dynamic arrays, barcode scanning, signature capture, and more.

Perfect for:

Admin dashboards
CMS-driven forms
Enterprise applications
Survey apps
Workflow systems
Dynamic configuration based forms

📸 Demo #

Validation Demo #

[Validation]

JSON Dynamic Form #

[Dynamic JSON Form]

Complex JSON Form Layout #

[Dynamic JSON Form Example]

File & Image Upload #

[File Upload]

[Dropdown Demo]

Stepper Form Example #

[Stepper Demo]

✨ 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
✅ Stepper form
✅ 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

📱 Supported Platforms #

✅ Android
✅ iOS
✅ Web
✅ Windows
✅ macOS
✅ Linux

Why flutter_smart_forms? #

flutter_smart_forms simplifies building complex dynamic forms in Flutter.

Forms can be defined using:

JSON configuration
FieldModel objects
Native Flutter widgets

This makes it ideal for:

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

📊 Comparison #

Feature	flutter_smart_forms	flutter_form_builder	reactive_forms
JSON Forms	✅	❌	❌
Conditional Fields	✅	⚠️	⚠️
Async Validation	✅	⚠️	⚠️
Dynamic Arrays	✅	⚠️	⚠️
Barcode Scanner	✅	❌	❌
Signature Field	✅	❌	❌
File Upload	✅	⚠️	❌

🏗 Architecture #

flutter_smart_forms uses a modular architecture.

JSON Schema
     │
     ▼
FieldModel Parser
     │
     ▼
FormRegistry
     │
     ▼
SmartFormController
     │
     ▼
Reactive Field Widgets
     │
     ▼
Validation Engine
     │
     ▼
Submit Result

⚡ JSON-Driven Dynamic Forms #

Create entire forms using JSON configuration.

SmartForm(
  controller: controller,
  json: jsonForm,
  onSubmit: (values) {
    print(values);
  },
)

🧠 Reactive Form Controller #

SmartFormController manages:

Field values
Validation
Visibility
Dependencies
Async validation
Form reset
Value listeners
Conditional fields

🧩 Built-in Field Types #

Field	Description
text	Basic text input
email	Email input
password	Secure password field
phone	Phone number input
textarea	Multi-line input
number	Numeric input
dropdown	Single select dropdown
multiSelect	Multi select dropdown
suggestion	Auto-complete field
checkbox	Boolean checkbox
radio	Radio options
date	Date picker
time	Time picker
barcode	Barcode scanner
otp	OTP verification
signature	Signature capture
file	File upload
image	Image upload
array	Dynamic repeatable forms

🚀 Installation #

Add dependency in pubspec.yaml

dependencies:
  flutter_smart_forms: ^1.0.2

Install via CLI #

flutter pub add flutter_smart_forms

Then run

flutter pub get

🚀 Getting Started #

Import the package:

import 'package:flutter_smart_forms/flutter_smart_forms.dart';

Quick Example #

SmartForm(
  controller: SmartFormController(),
  json: [
    {
      "type": "text",
      "key": "name",
      "label": "Name",
      "validators": "required"
    }
  ],
  onSubmit: (values) {
    print(values);
  },
)

📌 Basic Usage #

1️⃣ Create Controller #

final controller = SmartFormController();

2️⃣ Build Form #

SmartForm(
  controller: controller,
  json: jsonForm,
  submitText: "Submit",
  onSubmit: (values) async {
    print(values);
  },
)

1️⃣ Create Controller With Draft Key #

final controller = SmartFormController(
  draftKey: "profile_form_draft",
  autoSaveDraft: true,
);

2️⃣ Restore Draft When Screen Opens #

@override
void initState() {
  super.initState();

  controller.restoreDraft();
}

Now if user previously filled the form, values will auto populate.

3️⃣ Save Draft Manually #

If autoSaveDraft = false, save manually.

ElevatedButton(
  onPressed: () async {
    await controller.saveDraft();

    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text("Draft saved")),
    );
  },
  child: const Text("Save Draft"),
)

4️⃣ Auto Save Draft (Recommended) #

SmartFormController(
  draftKey: "profile_form_draft",
  autoSaveDraft: true,
);

5️⃣ Clear Draft #

await controller.clearDraft();

6️⃣ How to Access Draft #

final draft = await controller.getDraft();

if (draft != null) {
  print(draft);
}

7️⃣ If has Draft #

if (await controller.hasDraft()) {
  print("Draft exists");
}

Method	Purpose
`saveDraft()`	Save current form values
`restoreDraft()`	Load draft into form
`clearDraft()`	Delete stored draft
`getDraft()`	Read draft without restoring
`hasDraft()`	Check if exists

📄 JSON Form Example #

[
  {
    "type": "text",
    "key": "firstName",
    "label": "First Name",
    "validators": "required|min:2"
  },
  {
    "type": "email",
    "key": "email",
    "label": "Email",
    "validators": "required|email"
  },
  {
    "type": "password",
    "key": "password",
    "label": "Password",
    "validators": "required|min:6"
  },
  {
    "type": "password",
    "key": "confirmPassword",
    "label": "Confirm Password",
    "validators": "required|match:password"
  }
]

flutter_smart_forms supports dynamic dropdown data loaded from API.

{
  "type": "dropdown",
  "key": "country",
  "label": "Select Country",
  "extra": {
    "api": "https://api.restful-api.dev/objects",
    "method": "GET",
    "valueKey": "id",
    "labelKey": "name",
    "cache": true,
  }
},
{
  "type": "dropdown",
  "key": "devices",
  "label": "Devices",
  "extra": {
    "multiSelect": true,
    "api": "https://api.restful-api.dev/objects",
    "labelKey": "name",
    "valueKey": "id",
    "cache": true,
    'selectedChipTextColor': '0xFFFFFFFF',
  }
},

Flutter Smart Form Stepper Example #

This example demonstrates how to use the SmartFormStepper widget with section titles displayed correctly.

JSON Sections Example #

final jsonSections = [
  {
    "title": "Personal",
    "fields": [
      {
        "type": "text",
        "key": "firstName",
        "label": "First Name",
        "placeholder": "Enter first name",
        "default": "Johna",
        "validators": "required|min:2",
        "extra": {
          "fillColor": "0xFFFFFFFF",
          "borderColor": "#1976D2",
          "borderRadius": 12,
          "padding": {"left": 16, "top": 12, "right": 16, "bottom": 12},
          "textColor": "#000000",
        }
      },
      {
        "type": "text",
        "key": "lastName",
        "label": "Last Name",
        "placeholder": "Enter last name",
        "validators": "required",
        "extra": {
          "fillColor": "0xFFFFFFFF",
          "borderColor": "#1976D2",
          "borderRadius": 12,
          "padding": {"left": 16, "top": 12, "right": 16, "bottom": 12},
        }
      }
    ]
  },
  {
    "title": "Scan & Date",
    "fields": [
      {
        "type": "barcode",
        "key": "barcode",
        "label": "Scan Product",
        "placeholder": "Scan or enter barcode",
        "validators": "required",
        "extra": {
          "scannerTitle": "Barcode Scan",
          "scannerAppBarColor": "#1976D2",
          "showClearIcon": true,
          "clearIcon": "close",
          "fillColor": "0xFFFFFFFF",
          "borderColor": "#1976D2",
          "borderRadius": 12,
          "padding": {"left": 16, "top": 12, "right": 16, "bottom": 12},
        }
      },
      {
        "type": "date",
        "key": "birthday",
        "label": "Select Birthday",
        "extra": {
          "placeholder": "Pick a date",
          "format": "dd/MM/yyyy",
          "fillColor": "0xFFFFFFFF",
          "borderRadius": 10,
          "padding": {"left": 12, "top": 10, "right": 12, "bottom": 10},
        }
      }
    ]
  }
];

Widget buildStepperForm() {
  final convertedSections = JsonFormBuilder.fromJsonSections(jsonSections);
  return SmartFormStepper(
    controller: controller,
    field: FieldModel(type: "stepper", key: "mainStepper", extra: {}, label: ''),
    sections: convertedSections,
    onSubmit: (data) {
      print(data);
    },
  );
}

🧠 Access Form Values #

final values = controller.values;

print(values["email"]);

🔍 Validate Form #

bool valid = await controller.validate();

Get value #

controller.getValue("email");

🔄 Update Field Value #

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

🔄 Reset Form #

controller.reset();

🔄 Export Analytics #

final analytics = controller.analytics.export();

print(analytics);

👀 Listen to Form Changes #

controller.changes.listen((values) {
  print(values);
});

🔄 Conditional Fields #

Fields can react to other fields.

Example JSON:

{
  "type": "text",
  "key": "lastName",
  "label": "Last Name",
  "visibleIf": {
    "firstName": "John"
  }
}

🧪 Async Validation #

AsyncValidationEngine.register(
  "emailAvailable",
  (value) async {
    await Future.delayed(Duration(milliseconds: 500));

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

    return null;
  },
);

Use in JSON:

validators: "required|email|async:emailAvailable"

🧩 Custom Field Support #

FormRegistry.register(
  "colorPicker",
  (field, controller) => ColorPickerField(
    field: field,
    controller: controller,
  ),
);

JSON usage:

{
  "type": "colorPicker",
  "key": "favoriteColor"
}

🖼 File & Image Upload #

Features:

Multiple file upload
Image preview
File validation
Image compression
Cropping
File size limit
Allowed extensions

✍ Signature Field #

Capture user signature.

Features:

Draw signature
Undo / clear
Preview
Save as image
Fullscreen canvas

📷 Barcode Scanner #

Scan barcodes using device camera.

Features:

Multi scan support
Duplicate prevention
Scan delay
Pattern validation

🔢 OTP Input #

Highly customizable OTP input field.

Options:

Length
Box size
Spacing
Auto focus
Obscure input
Success animation

⚙️ Conditional Logic #

Fields can depend on other fields.

Example:

{
  "type": "dropdown",
  "key": "state",
  "watchFields": ["country"],
  "visibleIf": { "country": "US" }
}

🎨 Styling Fields #

Customize styles via JSON.

{
  "type": "text",
  "key": "name",
  "extra": {
    "fillColor": "#FFFFFF",
    "borderColor": "#1976D2",
    "borderRadius": 12
  }
}

📦 Built-in Validators #

Validator	Description
required	Required field
email	Email validation
phone	Phone number validation
min	Minimum length
max	Maximum length
number	Only numbers
integer	Integer values
decimal	Decimal values
url	URL validation
regex	Regex validation
password	Strong password
date	Date validation
json	JSON validation
alpha	Letters only
alphaNumeric	Letters + numbers

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

🔗 Cross Field Validators #

Validator	Description
match	Must match another field
same	Same as another field
different	Must be different
confirmed	Confirmation field

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"
  }
}

🧪 Example Project #

Example app included.

example/lib/main.dart

Run example:

flutter run

🛣 Roadmap #

Upcoming features:

Multi-step forms
Form wizard
Remote dropdown APIs
JSON schema support
Form persistence
Visual form builder
Analytics support

🤝 Contributing #

Contributions are welcome.

Steps:

Fork repository
Create branch
Commit changes
Submit pull request

📜 License #

MIT License

❤️ Support #

If you like this package:

⭐ Star the repository
🐛 Report issues
💡 Suggest improvements

Maintainers #

Raju
Flutter Developer

🔎 Keywords #

Flutter dynamic form
Flutter JSON form builder
Flutter dynamic forms
Flutter form generator
Flutter reactive forms
Flutter low code forms
Flutter survey forms
Flutter conditional forms
Flutter async validation forms

flutter_smart_forms 1.0.2 flutter_smart_forms: ^1.0.2 copied to clipboard

Metadata

🌟 flutter_smart_forms #

📸 Demo #

Validation Demo #

JSON Dynamic Form #

Complex JSON Form Layout #

File & Image Upload #

Dropdown Field Example #

Stepper Form Example #

✨ Features #

📱 Supported Platforms #

Why flutter_smart_forms? #

📊 Comparison #

🏗 Architecture #

⚡ JSON-Driven Dynamic Forms #

🧠 Reactive Form Controller #

🧩 Built-in Field Types #

🚀 Installation #

Install via CLI #

🚀 Getting Started #

Quick Example #

📌 Basic Usage #

1️⃣ Create Controller #

2️⃣ Build Form #

1️⃣ Create Controller With Draft Key #

2️⃣ Restore Draft When Screen Opens #

3️⃣ Save Draft Manually #

4️⃣ Auto Save Draft (Recommended) #

5️⃣ Clear Draft #

6️⃣ How to Access Draft #

7️⃣ If has Draft #

📄 JSON Form Example #

🌐 Remote API Dropdown #

Flutter Smart Form Stepper Example #

JSON Sections Example #

🧠 Access Form Values #

🔍 Validate Form #

Get value #

🔄 Update Field Value #

🔄 Reset Form #

🔄 Export Analytics #

👀 Listen to Form Changes #

🔄 Conditional Fields #

🧪 Async Validation #

🧩 Custom Field Support #

🖼 File & Image Upload #

✍ Signature Field #

📷 Barcode Scanner #

🔢 OTP Input #

⚙️ Conditional Logic #

🎨 Styling Fields #

📦 Built-in Validators #

🔗 Cross Field Validators #

Smart Error Messages #

🧪 Example Project #

🛣 Roadmap #

🤝 Contributing #

📜 License #

❤️ Support #

Maintainers #

🔎 Keywords #

← Metadata

Documentation

Publisher

Weekly Downloads

Metadata

Topics

License

Dependencies

More

flutter_smart_forms 1.0.2
flutter_smart_forms: ^1.0.2 copied to clipboard