📦 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 -
-
-
-
🤝 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.
- 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.
- 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.