Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thomasthiebaud/formi
A minimalist form builder, with null safety and no dependency
https://github.com/thomasthiebaud/formi
flutter form formi forms
Last synced: about 2 months ago
JSON representation
A minimalist form builder, with null safety and no dependency
- Host: GitHub
- URL: https://github.com/thomasthiebaud/formi
- Owner: thomasthiebaud
- License: bsd-2-clause
- Created: 2021-04-14T19:29:43.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-05-12T09:42:34.000Z (over 3 years ago)
- Last Synced: 2024-10-19T11:30:58.725Z (3 months ago)
- Topics: flutter, form, formi, forms
- Language: Dart
- Homepage:
- Size: 14.6 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# formi
A minimalist form builder, with null safety and no dependency. Inspired by https://pub.dev/packages/flutter_form_builder.
## Getting Started
`formi` does not include UI components but it will help you to build yours so you have **full control**.
You can check the **example** folder that contains some components to get you started.
### 1. Create a widget that extends FormiField
For example you could create a Checkbox field like this
```
class FormiCheckbox extends FormiField {
final String title;
final String? subtitle;
FormiCheckbox({
required this.title,
required String name,
this.subtitle,
List>? validators,
bool? initialValue,
bool? enabled = true,
}) : super(
name: name,
validators: validators,
initialValue: initialValue,
enabled: enabled,
builder: (field) {
return CheckboxListTile(
dense: true,
title: Text(title),
value: field.value ?? false,
onChanged: field.didChange,
contentPadding: EdgeInsets.zero,
);
},
);
}
```
### 2. Wrap your form in a Formi container
Fields in `Formi` needs a unique `name` that is used to keep the value of the field
```
Formi(
child: Column(
children: [
Text('Privacy preferences'),
FormiCheckbox(
name: 'strict',
title: 'Strictly necesary',
subtitle: 'Required for the app to run as expected',
initialValue: true,
enabled: false,
),
FormiCheckbox(
name: 'analytics',
title: 'Analytics',
subtitle: 'Allow us to collect information about how you use the app',
),
OutlinedButton(
child: Text('Submit'),
onPressed: () {
final formiState = Formi.of(context);
formiState.save();
if (formiState.validate()) {
// Retrieve the form state with formiState.value
}
}
),
]
),
)
```
### 3. Add custom validators
A validator is a function that takes the field value and the form state and returns:
- a `String` if there is an error
- `null` otherwise
```
FormiValidator required(
BuildContext context, {
String? errorText,
}) {
return (value, state) {
if (value == null ||
(value is String && value.isEmpty) ||
(value is Iterable && value.isEmpty) ||
(value is Map && value.isEmpty)) {
return errorText ?? 'This field cannot be empty.';
}
return null;
};
}
```
### 4. Create more components to fit your needs
For example the submit button could be written as
```
class FormiSubmit extends StatelessWidget {
final Widget Function(FormiState) builder;
FormiSubmit({required this.builder});
@override
Widget build(BuildContext context) {
final _formiState = Formi.of(context);
return builder(_formiState);
}
}
```