JSON Form Builder

A powerful Flutter package for building dynamic forms from JSON definitions. Create complex forms with validation, error handling, conditional logic, and flexible layouts without writing repetitive UI code.

Features

Dynamic Form Generation - Build forms directly from JSON schemas
Field Validation - Built-in validators (required, email, custom patterns, field matching)
Error Handling - Comprehensive error display and validation feedback
Multiple Input Types - Text, email, password, number, checkbox, radio buttons, dropdowns
Flexible Layouts - Horizontal and vertical field arrangements
Conditional Logic - Show/hide and enable/disable fields based on other field values
Form Submission - Easy form data collection and validation
Customizable - Easily extendable for custom widgets and styling

Supported Field Types

• Text Fields: text, email, password, number, phone
• Selection: datetime, checkbox, radio, select (dropdown)
• Validation: Required fields, email validation, custom patterns, field matching
• Conditional Logic: Show/hide rules, enable/disable rules

Getting Started

Add this to your package's pubspec.yaml file:

dependencies:
  json_form_builder: ^0.1.0

Then run:

flutter pub get

Basic Usage

import 'package:flutter/material.dart';
import 'package:json_form_builder/json_form_builder.dart';
import 'package:json_form_builder/models/json_form.dart';

class MyFormPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Define your JSON schema
    final jsonSchema = {
      "title": "User Registration",
      "subtitle": "Please fill in your details",
      "groups": [
        {
          "title": "Personal Information",
          "elements": [
            {
              "layout": "vertical",
              "fields": [
                {
                  "key": "firstName",
                  "format": "text",
                  "label": "First Name",
                  "placeholder": "Enter your first name",
                  "validators": [
                    {"key": "required", "message": "First name is required"}
                  ]
                },
                {
                  "key": "email",
                  "format": "email",
                  "label": "Email",
                  "placeholder": "Enter your email",
                  "validators": [
                    {"key": "required", "message": "Email is required"}
                  ]
                }
              ]
            }
          ]
        }
      ]
    };

    final jsonForm = JsonForm.fromJson(jsonSchema);

    return Scaffold(
      appBar: AppBar(title: Text('Dynamic Form')),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: JsonFormBuilder(
          jsonForm: jsonForm,
          onSubmit: (formData) {
            print('Form submitted with data: $formData');
            // Handle form submission
          },
        ),
      ),
    );
  }
}

Advanced Usage

Conditional Fields

{
  "key": "hasAccount",
  "format": "checkbox",
  "label": "I already have an account"
},
{
  "key": "password",
  "format": "password",
  "label": "Password",
  "rule": {
    "type": "SHOW",
    "field": "hasAccount",
    "value": true
  },
  "validators": [
    {"key": "required", "message": "Password is required"}
  ]
}

Radio Buttons with Horizontal Layout

{
  "key": "gender",
  "format": "radio",
  "label": "Gender",
  "options_layout": "horizontal",
  "options": [
    {"label": "Male", "value": "male"},
    {"label": "Female", "value": "female"},
    {"label": "Other", "value": "other"}
  ],
  "validators": [
    {"key": "required", "message": "Please select your gender"}
  ]
}

Dropdown Selection

{
  "key": "country",
  "format": "select",
  "label": "Country",
  "placeholder": "Select your country",
  "options": [
    {"label": "United States", "value": "us"},
    {"label": "Canada", "value": "ca"},
    {"label": "United Kingdom", "value": "uk"}
  ],
  "validators": [
    {"key": "required", "message": "Country is required"}
  ]
}

Field Matching Validation

{
  "key": "confirmPassword",
  "format": "password",
  "label": "Confirm Password",
  "validators": [
    {"key": "required", "message": "Please confirm your password"},
    {"key": "match", "field": "password", "message": "Passwords do not match"}
  ]
}

JSON Schema Structure

{
  "title": "Form Title",           // Optional form title
  "subtitle": "Form Subtitle",     // Optional form subtitle
  "groups": [                      // Array of form groups
    {
      "title": "Group Title",      // Optional group title
      "elements": [                // Array of form elements
        {
          "layout": "horizontal",  // "horizontal" or "vertical"
          "fields": [              // Array of form fields
            {
              "key": "fieldKey",           // Unique field identifier
              "format": "text",            // Field type
              "label": "Field Label",      // Field label
              "placeholder": "Placeholder", // Optional placeholder
              "value": "default_value",    // Optional default value
              "validators": [...],         // Optional validators
              "rule": {...},              // Optional conditional rule
              "options": [...],           // For select/radio fields
              "options_layout": "horizontal" // For radio button layout
            }
          ]
        }
      ]
    }
  ]
}

Available Field Formats

• text - Basic text input
• email - Email input with email keyboard
• password - Password input (obscured text)
• number - Numeric input with number keyboard
• phone - Numeric input with phone keyboard
• datetime - DateTime input with date picker modal
• checkbox - Boolean checkbox
• radio - Single selection from options
• select - Dropdown selection

Validation Rules

• required - Field must have a value
• match - Field must match another field's value
• format - Field must match with the provided pattern
• minLength - Field length must be greater or equal to provided value
• maxLength - Field length must be shorter or equal to provided value

Conditional Rules

Show/Hide Rules

"rule": {
  "type": "SHOW",
  "field": "otherFieldKey",
  "value": expectedValue
}

Enable/Disable Rules

"rule": {
  "type": "DISABLE", 
  "field": "otherFieldKey",
  "value": expectedValue
}

Example Project

Check out the example directory for a complete working example with:

• Simple form demo
• Complex form with all field types
• Conditional logic examples
• Widgetbook integration for testing

To run the example:

cd example
flutter run lib\widgetbook.dart

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For bugs and feature requests, please file an issue on the GitHub repository.