Form UI Builder

A powerful Flutter package for building dynamic, data-driven forms with advanced features like conditional visibility, auto-calculations, and multi-field validation.

Features

• 🚀 Dynamic Form Generation - Build forms from JSON configuration or parameter maps
• ✅ Real-time Validation - Validate input as users type with customizable rules
• 👁️ Conditional Visibility - Show/hide fields based on other field values
• 🧮 Auto-Calculation - Automatically compute field values from dependencies
• 🔗 Multi-Field Validation - Validate relationships between multiple fields
• 📱 Mobile Number Validation - Built-in support for mobile number validation with custom rules
• 📊 Range Validation - Min/max value constraints
• ⌨️ Focus Management - Seamless keyboard navigation between fields
• 🏗️ Clean Architecture - Well-structured codebase using BLoC pattern and dependency injection

Getting Started

Installation

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

dependencies:
  form_ui_builder: ^0.0.1

Then run:

flutter pub get

Basic Usage

1. Initialize the Service Locator

import 'package:form_ui_builder/form_ui_builder.dart';

void main() {
  setupServiceLocator();
  runApp(MyApp());
}

2. Build Form from JSON

import 'package:form_ui_builder/form_ui_builder.dart';

// Your JSON form configuration
final jsonFormData = [
  {
    "elementId": 1,
    "elementType": "ElementText",
    "elementLabel": "Full Name",
    "isRequired": true,
    // ... more configuration
  },
  // ... more fields
];

// Build the form logic bundle
final result = buildFormLogicBundle(jsonFormData);

result.fold(
  (failure) => print('Error: ${failure.message}'),
  (formBundle) => print('Form bundle created successfully'),
);

3. Use in Your UI

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:form_ui_builder/form_ui_builder.dart';

class MyFormScreen extends StatelessWidget {
  final FormLogicBundle formBundle;

  const MyFormScreen({required this.formBundle});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => FormUiBuilderBloc(
        buildFormLogicBundle: getIt(),
        validateTextFieldValue: getIt(),
        handleFormSubmission: getIt(),
        updateFieldValue: getIt(),
        updateFieldVisibility: getIt(),
        calculateDependentFields: getIt(),
        validateDependentFields: getIt(),
      )..add(InitializeForm(formBundle)),
      child: FormUiBuilderScreen(),
    );
  }
}

Advanced Features

Conditional Visibility

Show or hide fields based on other field values:

{
  "elementId": 5,
  "elementType": "ElementText",
  "showHideList": [
    {
      "elementId": 3,
      "optionId": 1
    }
  ]
}

Field 5 will only be visible when field 3 has option 1 selected.

Auto-Calculation

Automatically calculate field values:

{
  "elementId": 10,
  "elementType": "ElementNumber",
  "autoCalculateFromChildren": [5, 6, 7]
}

Field 10 will automatically sum the values of fields 5, 6, and 7.

Multi-Field Validation

Validate relationships between fields:

{
  "elementId": 20,
  "dependentChildren": [15, 16, 17]
}

The sum of fields 15, 16, and 17 must equal field 20.

Using Parameter Map (Advanced)

For more control, you can build forms from a parameter map:

final parameterMap = <int, ChildrenX>{
  1: ChildrenX(
    elementId: 1,
    elementType: 'ElementText',
    elementLabel: 'Full Name',
    isRequired: true,
  ),
  // ... more fields
};

final result = buildFormLogicBundleFromParameterMap(parameterMap);

Architecture

This package follows Clean Architecture principles:

• Presentation Layer: BLoC pattern for state management
• Domain Layer: Use cases and business logic
• Data Layer: Repositories and data sources
• Dependency Injection: GetIt service locator

Example

Check out the example directory for a complete working example demonstrating all features.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

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

Support

For issues, feature requests, or questions, please file an issue on the GitHub repository.