Visual Form Editor

The Vyuh Form Editor is a powerful visual designer that allows you to build complex forms without writing code. Create, edit, and export forms using an intuitive drag-and-drop interface.

Overview

The Form Editor provides:

Drag-and-Drop Builder: Build forms by dragging fields from a palette
Live Preview: See your form as you build it
Property Editor: Configure field properties visually
Field Palette: Searchable catalog of all field types
JSON Export: Export forms as JSON configuration
Import/Export: Save and load form designs
Template Library: Save reusable form templates

Getting Started

Installation

Add vyuh_form_editor to your pubspec.yaml:

dependencies:
  vyuh_form_editor: ^latest_version

Basic Usage

import 'package:flutter/material.dart';
import 'package:vyuh_form_editor/vyuh_form_editor.dart';

class FormEditorScreen extends StatefulWidget {
  @override
  State<FormEditorScreen> createState() => _FormEditorScreenState();
}

class _FormEditorScreenState extends State<FormEditorScreen> {
  late final FormEditorController controller;

  @override
  void initState() {
    super.initState();
    controller = FormEditorController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Editor'),
        actions: [
          IconButton(
            icon: Icon(Icons.save),
            onPressed: _saveForm,
          ),
          IconButton(
            icon: Icon(Icons.preview),
            onPressed: _previewForm,
          ),
        ],
      ),
      body: FormEditor(
        controller: controller,
        onFormChanged: (form) {
          print('Form updated: ${form.title}');
        },
      ),
    );
  }

  void _saveForm() {
    final formJson = controller.exportToJson();
    // Save to database or file
    print('Form JSON: $formJson');
  }

  void _previewForm() {
    final form = controller.buildForm();
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => FormPreviewScreen(form: form),
      ),
    );
  }
}

User Interface

The Form Editor consists of four main panels:

1. Field Palette (Left)

Browse and search all available field types:

Text Fields: TextField, PasswordField, TextArea
Numbers: NumberField, SliderField
Dates: DateField, TimeField, DateTimeField
Selection: SelectField, RadioField, CheckboxField
Files: FileField, ImageField
Advanced: FormulaField, SignatureField, RatingField

Drag fields from the palette onto the canvas to add them to your form.

2. Form Canvas (Center)

The main area where you build your form:

Drag fields from the palette
Reorder fields by dragging
Click to select and edit fields
Delete fields with the trash icon
Group fields into sections

3. Property Editor (Right)

Configure the selected field's properties:

Basic Properties:

Name (unique identifier)
Label (display text)
Placeholder/Hint
Description/Help text
Initial value

Validation:

Required checkbox
Built-in validators
Custom validation rules
Error messages

Appearance:

Field width
Visibility conditions
Custom styling

Behavior:

Enable/Disable
Read-only
Conditional logic

Quick actions:

Save form
Load form
Export JSON
Preview
Undo/Redo
Form settings

Building Forms

Adding Fields

Find the field type in the palette
Drag it onto the canvas
Drop it where you want it
Configure properties in the right panel

Configuring Fields

Click any field to edit its properties:

// Example: Configure an email field
TextField(
  name: 'email',              // Set in Properties
  label: 'Email Address',     // Set in Properties
  hint: 'your@email.com',     // Set in Properties
  validators: [               // Add via Validation panel
    required(),
    email(),
  ],
  validateOnChange: true,     // Set in Behavior panel
)

Field Reordering

Reorder fields by:

Click and hold a field
Drag to new position
Drop to place

Field Groups

Create sections to organize fields:

Add a "Field Group" from the palette
Drag fields into the group
Configure group title and description

Conditional Fields

Show/hide fields based on conditions:

Select a field
Go to Behavior panel
Set visibility condition:
```
{{employmentStatus}} == "employed"
```

Form Properties

Configure global form settings:

General

Form Title: Display title
Description: Form description
Submit Button Text: Custom button label
Show Progress: For multi-step forms

Validation

Validate on Change: Validate as user types
Show Error Summary: Display all errors at top
Scroll to Error: Auto-scroll to first error

Submission

Success Message: Message after submission
Redirect URL: Where to go after submit
Reset After Submit: Clear form on success

Multi-Step Forms

Create wizard-style forms:

Click "Add Step" in toolbar
Name the step
Add fields to the step
Configure step validation
Set step visibility conditions

// Multi-step form structure
StepForm(
  steps: [
    FormStep(
      title: 'Personal Info',
      fields: [...],
    ),
    FormStep(
      title: 'Contact Details',
      fields: [...],
    ),
    FormStep(
      title: 'Review',
      fields: [...],
    ),
  ],
)

Advanced Features

Formula Fields

Create calculated fields:

Add FormulaField from palette
Set formula in properties:
```
{{quantity}} * {{price}}
```
Select dependencies
Choose format (currency, percentage, etc.)

Field Dependencies

Make fields dependent on others:

Example: City depends on State

SelectField(
  name: 'state',
  label: 'State',
  options: stateOptions,
),
SelectField(
  name: 'city',
  label: 'City',
  optionsUrl: '/api/cities?state={{state}}',
  dependsOn: ['state'],
)

Custom Validators

Add custom validation rules:

Select field
Go to Validation panel
Click "Add Custom Validator"

Enter validation logic:

function validate(value) {
  if (value.length < 8) {
    return "Minimum 8 characters";
  }
  return null;
}

Export & Import

Export to JSON

final formJson = controller.exportToJson();

// Result:
{
  "title": "Contact Form",
  "fields": [
    {
      "type": "text",
      "name": "name",
      "label": "Your Name",
      "validators": [
        {"type": "required"}
      ]
    },
    // ... more fields
  ]
}

Import from JSON

final formJson = await loadFormJson();
controller.importFromJson(formJson);

Save as Template

controller.saveAsTemplate(
  name: 'Contact Form Template',
  category: 'General',
);

Integration with Code

Use editor-generated forms in your app:

// 1. Export JSON from editor
final formJson = controller.exportToJson();

// 2. Save to assets or database
await saveFormDefinition('contact_form', formJson);

// 3. Load and render in app
final formJson = await loadFormDefinition('contact_form');
final form = FormBuilder.fromJson(formJson);

// 4. Display the form
FormRenderer(
  form: form,
  onSubmit: handleSubmit,
)