Dynamic Field Renderer
Component Detail
Description
Renders form fields at runtime from a JSON field schema fetched from Supabase. Supports text, multiline text, checkbox group, radio, and date field types. Each rendered field includes a speech-to-text trigger for free-text fields and meets WCAG 2.2 AA label and contrast requirements.
dynamic-field-renderer
Summaries
The Dynamic Field Renderer eliminates the need for costly app store releases every time an organization wants to change what data is collected in the field. By fetching form field definitions directly from the database at runtime, the business can adapt reporting requirements to evolving operational needs without engaging developers or waiting weeks for an update cycle. This flexibility is a significant competitive differentiator for organizations managing distributed field workers. Built-in speech-to-text support on every free-text field directly increases data quality and submission rates among users in physically demanding environments.
WCAG 2.2 AA compliance reduces legal exposure and broadens the accessible user base, supporting enterprise procurement requirements.
This is a high-complexity component and one of the most technically demanding deliverables in the mobile layer. It has two upstream dependencies — the Speech-To-Text Field Overlay and the Org Field Config Loader — both of which must be stable before integration testing can begin on this component. The renderer must handle five distinct field types (text, multiline, checkbox group, radio, date), each with its own widget implementation, error display logic, and accessibility labelling. Budget testing time accordingly: WCAG 2.2 AA compliance must be verified per field type across screen readers and contrast checkers.
Any schema changes in Supabase will require regression tests on all field types. Plan for a dedicated accessibility review sprint before sign-off.
Dynamic Field Renderer operates in the mobile (Flutter) execution context and resolves its field schema at runtime via `org-field-config-loader`, which fetches JSON field configs from Supabase. The core dispatch method `renderField(fieldConfig)` branches to five typed render functions — `renderTextField`, `renderMultilineField`, `renderCheckboxGroup`, `renderRadioGroup`, and `renderDateField` — each producing the appropriate Flutter widget tree. Free-text field types (`text`, `multiline`) receive an injected speech-to-text trigger via the `speech-to-text-field-overlay` dependency. All widgets must include explicit semantic labels and accessible error states driven by `setFieldError(fieldId, message)`.
State propagation is upward-only: `onValueChanged(fieldId, value)` emits to the parent form state manager. The data model binding is `report-field-schema`. Maintainability risk is moderate: adding new field types requires both a render function and a corresponding schema type definition; ensure schema versioning is handled in the loader to avoid breaking changes.
Responsibilities
- Render correct Flutter widget per field type from schema definition
- Attach speech-to-text trigger button to eligible free-text fields
- Apply explicit semantic labels and accessible error messaging to every field
- Emit field value changes to parent form state
Interfaces
renderField(fieldConfig)
renderTextField(config)
renderMultilineField(config)
renderCheckboxGroup(config)
renderRadioGroup(config)
renderDateField(config)
onValueChanged(fieldId, value)
setFieldError(fieldId, message)
Relationships
Dependencies (2)
Components this component depends on
Related Data Entities (1)
Data entities managed by this component