🌟 flutter_smart_forms #

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

[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 #

🏗 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 #

🚀 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");
}

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

🌐 Remote API Dropdown #

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 #

Register async validator:

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 #

Register custom field widget.

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 #

Dependent Validators

🔗 Cross Field 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"
  }
}

🧪 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:

1. Fork repository
2. Create branch
3. Commit changes
4. 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