flutter_formio 2.0.0

Flutter widgets for rendering Form.io forms with full feature parity. Includes 46+ components, validation, wizard forms, calculations, and JavaScript support.

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

Register custom widget builders:

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):

• See formio_api documentation
• Form.io API Reference

Contributing

Contributions welcome! Please read CONTRIBUTING.md first.

License

[Your License]

Links

• Form.io Documentation
• GitHub Repository
• Issue Tracker
• formio_api Package