Form Editor

Dynamic Form Builder

A complete form system for Flutter with 12 field types, rich validation, conditional rules, multi-step wizards, and a visual drag-and-drop designer. Split into a runtime package and an editor package.

Key Capabilities

Rich Field Types

Text, select, boolean, number, date/time, slider, range, file/image picker, phone number, entity references, and formula fields.

Comprehensive Validation

Sync validators (required, email, URL, pattern, ranges), temporal validators (future/past date, business hours), soft warnings, and async validation.

Rules Engine

Conditional logic with boolean, compound, string, numeric, and date conditions driving visibility, enable/disable, focus, set-value, and validation actions.

Visual Form Designer

Drag-and-drop editor with field palette, properties panel, preview, import/export, and keyboard shortcuts.

Core Components

Component	Description
vyuh_feature_forms	Form runtime — field types, validation, rules, step forms, and the FormBuilder DSL
vyuh_form_editor	Visual designer — drag-drop canvas, field palette, properties panel, import/export
FormBuilder DSL	Fluent API for constructing forms and fields programmatically
StepForm	Multi-step wizard with StepFormController and vertical stepper layout
Rules System	Condition + Action pairs for dynamic field behavior (show/hide, enable, set values)
RepeatingSection	Dynamically add/remove groups of fields within a form

Packages

vyuh_feature_formsForm runtime — models, fields, validation, rules, step forms vyuh_form_editorVisual form designer with drag-drop editing

Field Types

The form system includes these built-in field types:

Field	Description
`TextField`	Standard text input
`SelectField`	Dropdown/select
`BooleanField`	Checkbox/toggle
`NumberField`	Integer and decimal input
`DateTimeField`	Date and time picking
`SliderField`	Single-value range input
`RangeSliderField`	Min/max range selection
`FilePickerField`	File selection
`ImagePickerField`	Image selection
`PhoneNumberField`	Phone input
`ReferenceField`	Entity reference links
`FormulaField`	Calculated/derived values

Quick Example

dart

// Build a form using the fluent DSL
final form = FormBuilder('User Registration')
  .text('fullName', title: 'Full Name')
    .required('Name is required')
    .minLength(2)
  .text('email', title: 'Email')
    .required()
    .email()
  .select('role', title: 'Role')
    .option('developer', title: 'Developer')
    .option('designer', title: 'Designer')
    .option('manager', title: 'Manager')
  .number('teamSize', title: 'Team Size')
    .range(min: 1, max: 50)
    .showWhen(When.fieldEquals('role', 'manager'))
  .text('bio', title: 'Bio')
    .multiline(4)
    .maxLength(500)
  .section('Preferences', (s) => s
    .boolean('notifications', title: 'Enable Notifications')
    .dateTime('startDate', title: 'Start Date')
      .dateOnly(),
    collapsible: true,
  )
  .build();

The DSL uses an auto-finalize pattern — calling a new field method automatically commits the previous field. Validation, visibility rules, and field properties are all fluent chainable methods.

Form Editor ​