flutter_dynamic_form_renderer 0.1.0

Dynamic form generation library in Flutter.

Dynamic Form Package

Package Overview

This package provides a dynamic form generation library in Flutter. It allows developers to define form components dynamically and handle form data efficiently. The components can be linked with each other, providing a highly customizable and extendable form management solution.

Components

The library includes various types of form components, each designed to handle different types of user input. The main components are:

TextComponent

Description: Displays static text or labels.

Fields:

• componentId: Unique identifier for the component.
• label: The text to be displayed.
• configuration: Additional settings such as text style, alignment, etc.

DropdownComponent

Description: A dropdown field for selecting one option from a list.

Fields:

• componentId: Unique identifier for the component.
• label: The text label for the dropdown.
• defaultValue: The default selected value.
• options: A list of dropdown options.
• validators: Validation rules for the dropdown.
• configuration: Additional settings such as dropdown appearance, hint text, etc.

CheckBoxComponent

Description: A list of checkboxes.

Fields:

• componentId: Unique identifier for the component.
• label: The text label for the checkbox group.
• defaultValue: The default selected checkboxes.
• options: A list of checkbox options.
• validators: Validation rules for the checkbox group.
• configuration: Additional settings such as layout direction, checkbox color, etc.

RadioComponent

Description: A list of radio buttons for selecting one option.

Fields:

• componentId: Unique identifier for the component.
• label: The text label for the radio button group.
• defaultValue: The default selected radio button.
• options: A list of radio button options.
• validators: Validation rules for the radio button group.
• configuration: Additional settings such as radio button color, layout direction, etc.

SliderComponent

Description: A slider for selecting a value within a range.

Fields:

• componentId: Unique identifier for the component.
• label: The text label for the slider.
• defaultValue: The default value of the slider.
• validators: Validation rules for the slider.
• configuration: Additional settings such as min/max values, divisions, etc.

DateTimePickerComponent

Description: A component for selecting dates and times.

Fields:

• componentId: Unique identifier for the component.
• label: The text label for the date/time picker.
• defaultValue: The default date/time value.
• dateTimePickerType: The type of date/time picker (date, time, or dateTime).
• validators: Validation rules for the date/time picker.
• configuration: Additional settings such as date format, initial date, first/last date, etc.

InputFieldComponent

Description: A text input field for entering text or numbers.

Fields:

• componentId: Unique identifier for the component.
• label: The text label for the input field.
• defaultValue: The default text value.
• textInputType: The type of input (text, number, etc.).
• validators: Validation rules for the input field.
• autoCorrect: Whether auto-correct is enabled.
• autoFocus: Whether the input field should autofocus.
• configuration: Additional settings such as max length, decoration, obscure text, etc.

AsyncDropdownComponent

Description: A dropdown field that fetches options asynchronously from an API.

Fields:

• componentId: Unique identifier for the component.
• label: The text label for the dropdown.
• defaultValue: The default selected value.
• baseURL: The URL for fetching options.
• linkedComponentsForData: List of component IDs linked for fetching data.
• validators: Validation rules for the dropdown.
• configuration: Additional settings such as dropdown appearance, hint text, etc.

Usage of parentComponents Field

The parentComponents field is used to link components in the form. It specifies dependencies between components, allowing for dynamic behavior based on the state of parent components.

Fields in parentComponents

• componentId: The ID of the parent component.
• clearDependentOnUpdate: Whether to clear the dependent component when the parent is updated.
• disabledUntilParentIsValid: Whether to disable the dependent component until the parent is valid.
• disabledError: The error message to display when the component is disabled.
• clearDependentOnInvalidData: Whether to clear the dependent component when the parent has invalid data.

By using the parentComponents field, you can create complex forms with interdependent fields, enhancing the user experience by dynamically updating the form based on user input.

For a complete example implementation, refer to the ./example/ directory in the project.