flash_form

Description:

flash form

Flash Form Flutter Package #
FlashForm is a Flutter package that simplifies form creation by automatically generating form fields from your data model's structure. This eliminates the need to manually create widgets for each field, allowing you to build forms quickly and efficiently.
Features #

Automatic Form Generation: Define your model's structure, and FlashForm will generate the corresponding form fields automatically.
Customizable Fields: Easily configure validation rules, labels, decorators, input formats, and more for each field.
Nested Forms Support: Create forms for complex, nested data models with ease.
List and Dynamic Fields Support: Manage list-based fields and dynamically add or remove fields within your form.
Data Model Integration: Convert form inputs directly to your data model and initialize forms from existing data.

Demo #
Check out the live demo to see FlashForm in action.
Installation #
Add flash_form to your pubspec.yaml file:
dependencies:
flash_form: ^latest_version
copied to clipboard
Then run:
flutter pub get
copied to clipboard
Getting Started #
1. Define a ModelSchema #
Create a ModelSchema for your data model. This schema will define the form fields and their behavior.
Example Data Model
Suppose you have a simple Person class:
class Person {
String name;
int age;

Person({
required this.name,
required this.age,
});
}
copied to clipboard
Create PersonSchema
Extend ModelSchema to create PersonSchema and define form fields:
class PersonSchema extends ModelSchema<Person> {
PersonSchema() : super(parent: null);

// Name field
late final nameField = ValueSchema<String, String>(
fieldFormat: TextFieldFormat(),
decorators: [
const DefaultValueDecorator(label: 'Name'),
],
validators: [
RequiredValidator(),
],
value: null,
parent: this,
);

// Age field
late final ageField = ValueSchema<num, String>(
fieldFormat: NumberFieldFormat(),
decorators: [
const DefaultValueDecorator(label: 'Age'),
],
validators: [
RequiredValidator(),
RangeValidator(min: 0, max: 120),
],
value: null,
parent: this,
);

@override
List<FieldSchema> get fields => [
nameField,
ageField,
];

// Convert between model and form
@override
void fromModel(Person model) { /* ... */ }

@override
Person toModel() { /* ... */ }
}
copied to clipboard
Note:

Field Definitions: Each form field is defined using ValueSchema.
Field Formats: Specify input types like TextFieldFormat and NumberFieldFormat.
Decorators: Add labels and other UI decorations.
Validators: Enforce validation rules such as RequiredValidator and RangeValidator.
Fields List: The fields getter returns a list of fields to include in the form.

2. Use FlashModelField in Your Widget #
Pass the PersonSchema instance to FlashModelField to render the form in your widget:
// Inside your widget's build method
FlashModelField(form: form),
copied to clipboard
Handle form submission and validation:
ElevatedButton(
onPressed: () {
if (form.validate()) {
final person = form.toModel();
// Use the 'person' object as needed
}
},
child: const Text('Submit'),
),
copied to clipboard
Advanced Usage #
Adding a Multi-Select Field #
You can extend your data model and schema to include fields like a list of skills selected via checkboxes.
Update Data Model
class Person {
String name;
int age;
List<String> skills;

Person({
required this.name,
required this.age,
required this.skills,
});
}
copied to clipboard
Update PersonSchema
Add a skillsField to your schema:
late final skillsField = ValueSchema<List<String>, List<String>>(
fieldFormat: MultiSelectFieldFormat.checkbox(
options: ['Dart', 'Flutter', 'Java', 'Kotlin'],
toDisplay: (value) => value,
),
decorators: [
const DefaultValueDecorator(label: 'Skills'),
],
value: [],
parent: this,
);

// Include 'skillsField' in the fields list
@override
List<FieldSchema> get fields => [
nameField,
ageField,
skillsField,
];
copied to clipboard
Adding a Dynamic List Field #
Allow users to dynamically add or remove items in a list, such as hobbies.
Update Data Model
class Person {
// ... existing fields ...
List<String> hobbies;

Person({
// ... existing parameters ...
required this.hobbies,
});
}
copied to clipboard
Update PersonSchema
Add a hobbiesField to your schema:
late final hobbiesField = ListSchema<String, String>(
children: [],
decorators: [
const DefaultListDecorator(label: 'Hobbies'),
],
childFactory: (value, parent) {
return ValueSchema<String, String>(
fieldFormat: TextFieldFormat(),
value: value,
parent: parent,
);
},
parent: this,
);

// Include 'hobbiesField' in the fields list
@override
List<FieldSchema> get fields => [
nameField,
ageField,
skillsField,
hobbiesField,
];
copied to clipboard
Example Usage #
Here's how you might integrate PersonSchema into your application:
class MyHomePage extends StatefulWidget {
// ... constructor ...

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
final form = PersonSchema();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Person Form'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
FlashModelField(form: form),
const SizedBox(height: 32.0),
ElevatedButton(
onPressed: () {
if (form.validate()) {
final person = form.toModel();
// Use the 'person' object as needed
}
},
child: const Text('Submit'),
),
],
),
),
);
}
}
copied to clipboard
Contributing #
We welcome contributions! If you have ideas for new features or improvements, please open an issue or submit a pull request on our GitHub repository.
License #
This project is licensed under the MIT License. See the LICENSE file for details.

Thank you for using FlashForm! We hope it makes your form creation process faster and easier. If you have any feedback or need additional features, feel free to reach out.