flutter_formio

Flutter widgets for rendering Form.io forms with 98% feature parity.

Features

🎨 46+ Components: All standard Form.io components
✨ Full Feature Parity: Wizard forms, nested forms, data grids, edit grids
🧮 Calculations: JSONLogic and JavaScript-based calculated values
🔀 Conditional Logic: Show/hide components based on form data
✅ Validation: Client-side validation with custom rules
🌍 Localization: Multi-language support with customizable messages
🎯 Plugin System: Register custom components and override defaults
📱 Responsive: Works on mobile, tablet, and desktop

Installation

Add to your pubspec.yaml:

dependencies:
  flutter_formio: ^2.0.0

Run:

flutter pub get

Quick Start

1. Initialize JavaScript Evaluator

import 'package:flutter_formio/flutter_formio.dart';

void main() {
  // Required for JavaScript calculations and validations
  JavaScriptEvaluator.setEvaluator(FlutterJsEvaluator());
  
  runApp(MyApp());
}

2. Render a Form

class MyFormPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Form.io Form')),
      body: FormRenderer(
        form: FormModel.fromJson(myFormJson),
        onSubmit: (data) {
          print('Form submitted: $data');
          // Handle submission
        },
      ),
    );
  }
}

3. API Integration (Optional)

void main() async {
  // Configure API client
  ApiClient.setBaseUrl(Uri.parse('https://examples.form.io'));
  
  // Fetch forms from server
  final formService = FormService(ApiClient());
  final forms = await formService.fetchForms();
  
  JavaScriptEvaluator.setEvaluator(FlutterJsEvaluator());
  runApp(MyApp());
}

Advanced Usage

Custom Components

void main() {
  // Register custom component
  ComponentFactory.register(
    'myCustomType',
    FunctionComponentBuilder((context) {
      return MyCustomWidget(
        component: context.component,
        value: context.value,
        onChanged: context.onChanged,
      );
    }),
  );
  
  JavaScriptEvaluator.setEvaluator(FlutterJsEvaluator());
  runApp(MyApp());
}

Override Default Components

ComponentFactory.register(
  'textfield',  // Override default textfield
  const MyCustomTextFieldBuilder(),
);

Localization

class GermanFormioLocalizations implements FormioLocalizations {
  const GermanFormioLocalizations();
  
  @override
  String get submit => 'Absenden';
  
  @override
  String get cancel => 'Abbrechen';
  
  // ... implement all getters
}

// Use in your app
MaterialApp(
  localizationsDelegates: [
    DefaultFormioLocalizations.delegate,
    // Your custom delegate
  ],
  // ...
)

Wizard Forms

FormRenderer(
  form: wizardForm,
  wizardConfig: WizardConfig(
    showNavigation: true,
    showProgressBar: true,
  ),
  onSubmit: (data) => print('Wizard completed: $data'),
)

File Uploads

FormRenderer(
  form: formWithFiles,
  onFilePick: (allowMultiple, allowedExtensions) async {
    // Use file_picker or image_picker
    final result = await FilePicker.platform.pickFiles(
      allowMultiple: allowMultiple,
      allowedExtensions: allowedExtensions,
    );
    
    return result?.files.map((file) => FileData(
      name: file.name,
      bytes: file.bytes,
      path: file.path,
    )).toList();
  },
)

Components

Basic Input

Text Field
Text Area
Number
Password
Email
URL
Phone Number

Selection

Select / Dropdown
Radio
Checkbox
Select Boxes

Date & Time

Date
Time
DateTime
Day

Advanced Input

Tags
Currency
Signature
Survey

Layout

HTML
Content
Columns
Field Set
Panel
Well
Tabs

Data

Data Grid
Edit Grid
Data Map
Container
Tree

Special

Button
File
Hidden
ReCAPTCHA

Packages

This package depends on formio_api for business logic and API integration. You can use formio_api independently in pure Dart projects.

Migration from v1.x

See MIGRATION.md for upgrade instructions.

Examples

Check the /example folder for:

Basic form rendering
Wizard forms
Custom components
API integration
Localization

API Documentation

For API integration (forms, submissions, users):

Contributing

Contributions welcome! Please read CONTRIBUTING.md first.

License

Your License