📦 formio

A dynamic Form.io renderer for Flutter. This package allows you to render and submit Form.io forms directly in your Flutter app using native widgets — including support for all standard, advanced, data, layout, and premium components.

✨ Features

✅ Renders Form.io JSON forms into native Flutter widgets
✅ Supports dynamic form structure, validation, and conditional fields
✅ Handles all core Form.io components:
- Basic (textfield, checkbox, radio, select, etc.)
- Advanced (datetime, day, currency, survey, signature)
- Data (datagrid, container, hidden, editgrid)
- Layout (panel, tabs, columns, table, well)
- Premium (file, nestedform, captcha)
📡 Built-in API client using Dio
🧠 FormProvider for state management
📤 Submission support via SubmissionService

📦 Installation

Add the dependency in your pubspec.yaml:

dependencies:
  formio:
    git:
      url: https://github.com/mskayali/formio_flutter.git

🛠️ Getting Started

Fetch a Form from Form.io

final formService = FormService(ApiClient());
final form = await formService.getFormByPath('/contact');

Render the Form

FormRenderer(
  form: form,
  onChanged: (data) => print('Current values: $data'),
  onSubmit: (data) => print('Submitted: $data'),
  onError: (err) => print('Failed: $err'),
)

🧱 Project Structure

lib/
├── formio.dart         # Library entry point
├── models/                     # Form, component, submission models
├── services/                   # API services
├── widgets/                    # Components + FormRenderer
├── core/                       # Constants, utils, exceptions
├── network/                    # API client + endpoints
└── providers/                 # Optional form state provider

📤 Submitting Data

Handled automatically by FormRenderer when a "submit" button is tapped.

If using manually:

final submissionService = SubmissionService(ApiClient());
await submissionService.submit('/contact', {
  'name': 'John',
  'email': 'john@example.com',
});

Example

MaterialApp(
  home: Scaffold(
    body: FutureBuilder<FormModel>(
      future: FormService(ApiClient()).getFormByPath('/feedback'),
      builder: (context, snapshot) {
        if (!snapshot.hasData) return CircularProgressIndicator();
        return Padding(
          padding: EdgeInsets.all(16),
          child: FormRenderer(form: snapshot.data!),
        );
      },
    ),
  ),
);

🔧 Roadmap

x Core components
x Layout and advanced components
x Form submission support
Conditional logic
Validation rules (regex, min/max, etc.)
Multi-page forms
Offline support / caching

🤝 Contributing

Pull requests, issues and feedback are welcome. Please open an issue first for major changes.

Libraries

core/constants
core/exceptions
core/utils
formio: Entry point for the formio package.
models/component
models/form: Model class representing a Form.io form definition.
models/submission
models/user
network/api_client
network/endpoints
providers/form_provider: A simple ChangeNotifier-based state manager for Form.io dynamic forms.
services/auth_service: Service class for authenticating users against the Form.io API.
services/form_service: Service class for interacting with Form.io form endpoints.
services/submission_service: A service for managing form submissions with Form.io's API.
widgets/component_factory: ComponentFactory maps Form.io component types to Flutter widgets.
widgets/components/button_component: A Flutter widget that renders a button based on a Form.io "button" component.
widgets/components/captcha_component: A Flutter widget that simulates a CAPTCHA field based on a Form.io "captcha" component.
widgets/components/checkbox_component: A Flutter widget that renders a checkbox based on a Form.io "checkbox" component.
widgets/components/columns_component: A Flutter widget that renders horizontally aligned columns based on a Form.io "columns" layout component.
widgets/components/container_component: A Flutter widget that renders a container of nested components based on a Form.io "container" component.
widgets/components/content_component: A Flutter widget that renders static content based on a Form.io "content" component.
widgets/components/currency_component: A Flutter widget that renders a currency input field based on a Form.io "currency" component.
widgets/components/custom_component: A Flutter widget that renders a placeholder for a developer-defined custom component, based on a Form.io "custom" component.
widgets/components/data_grid_component: A Flutter widget that renders a repeatable table of input rows based on a Form.io "datagrid" component.
widgets/components/data_map_component: A Flutter widget that renders a key-value input structure based on a Form.io "datamap" component.
widgets/components/date_component: A Flutter widget that renders a date/time picker based on a Form.io "datetime" component.
widgets/components/datetime_component: A Flutter widget that renders a date and/or time picker based on a Form.io "datetime" component.
widgets/components/day_component: A Flutter widget that renders day, month, and year dropdowns based on a Form.io "day" component.
widgets/components/edit_grid_component: A Flutter widget that renders a repeatable grid of form entries based on a Form.io "editgrid" component.
widgets/components/email_component: A Flutter widget that renders an email input based on a Form.io "email" component.
widgets/components/fieldset_component: A Flutter widget that renders a group of components within a bordered fieldset based on a Form.io "fieldset" component.
widgets/components/file_component: A Flutter widget that renders a file upload input based on a Form.io "file" component.
widgets/components/hidden_component: A Flutter widget representing a hidden input field based on a Form.io "hidden" component.
widgets/components/html_element_component: A Flutter widget that renders static HTML content based on a Form.io "htmlelement" component.
widgets/components/nested_form_component: A Flutter widget that renders an embedded form (child form) based on a Form.io "nestedform" component.
widgets/components/number_component: A Flutter widget that renders a number input based on a Form.io "number" component.
widgets/components/panel_component: A Flutter widget that renders a titled container panel based on a Form.io "panel" component.
widgets/components/password_component: A Flutter widget that renders a password input based on a Form.io "password" component.
widgets/components/phone_number_component: A Flutter widget that renders a phone number input field based on a Form.io "phoneNumber" component.
widgets/components/radio_component: A Flutter widget that renders a group of radio buttons based on a Form.io "radio" component.
widgets/components/select_boxes_component: A Flutter widget that renders multiple checkboxes based on a Form.io "selectboxes" component.
widgets/components/select_component: A Flutter widget that renders a dropdown menu based on a Form.io "select" component.
widgets/components/signature_component: A Flutter widget that renders a signature input field based on a Form.io "signature" component.
widgets/components/survey_component: A Flutter widget that renders a survey matrix based on a Form.io "survey" component.
widgets/components/table_component: A Flutter widget that renders a grid-style layout of form components based on a Form.io "table" component.
widgets/components/tabs_component: A Flutter widget that renders tabbed navigation for form sections based on a Form.io "tabs" component.
widgets/components/text_area_component: A Flutter widget that renders a multi-line text area based on a Form.io "textarea" component.
widgets/components/text_field_component: A Flutter widget that renders a text field based on a Form.io "textfield" component.
widgets/components/time_component: A Flutter widget that renders a time picker based on a Form.io "time" component.
widgets/components/well_component: A Flutter widget that renders a visual container for grouping content based on a Form.io "well" layout component.
widgets/form_renderer: Renders a dynamic form in Flutter based on a Form.io form definition.