doc: update readme with usage

This commit is contained in:
Hugo Pointcheval 2022-07-10 21:13:52 +02:00
parent 741f05e1be
commit 94b0ff01ad
Signed by: hugo
GPG Key ID: A9E8E9615379254F

View File

@ -30,21 +30,25 @@ Form Bloc for Dart & Flutter.
## Features ## Features
- Form - Form
* FormInput: *atom of a form* * FormInputValidator:
- Store data - Store data
- Validate this data - Validate this data
* FormEntry: *shell of this atom* * FormInputMetadata:
- Store infos and options about an input.
* FormEntry:
- Associate a key to an input - Associate a key to an input
- Configure form attribute (exportation, name...) - Configure form attribute (exportation, name...)
* FormData: *collection of entries* * FormInput:
- Contain all entries - Associaite a key, to a validator and metadata.
* FormData: *collection of inputs*
- Contain all inputs
- Basic set operation - Basic set operation
- FormDataCubit - FormDataCubit
* Data management behind a form. * Data management behind a form.
- Use entries to pass a FormData object - Use entries to pass a FormData object
- You can use several pre configured FormInput for validation - You can use several pre configured `FormInputValidator` for validation
- You can use updateFormData() to change FormData and validators during runtime (intersection, union, difference or replace) - You can use updateFormData() to change `FormData` during runtime (intersection, union, difference or replace)
- Consistent - Consistent
* Every class have same naming convention * Every class have same naming convention
@ -59,4 +63,120 @@ import 'package:wyatt_form_bloc/wyatt_form_bloc.dart';
## Usage ## Usage
todo Firstly, you have to create your form inputs.
```dart
static List<FormInput> getNormalEntries() {
return const [
FormInput(formFieldName, Name.pure()),
FormInput(formFieldEmail, Email.pure()),
FormInput(formFieldPhone, Phone.pure()),
FormInput(formFieldList, ListOption<String>.pure(defaultValue: ['checkbox3'])),
FormInput(formFieldRadio, TextString.pure()),
FormInput(formFieldPro, Boolean.pure(), metadata: FormInputMetadata<void>(name: 'business')),
FormInput(formFieldHidden, Boolean.pure(), metadata: FormInputMetadata<void>(export: false)),
];
}
static List<FormInput> getBusinessEntries() {
const entries = [
FormInput(formFieldSiren, Siren.pure()),
FormInput(formFieldIban, Iban.pure()),
];
return getNormalEntries() + entries;
}
static FormData getNormalFormData() {
return FormData(getNormalEntries());
}
static FormData getProFormData() {
return FormData(getBusinessEntries());
}
```
> Let's create functions to enable dynamic changes in runtime.
> When creating metadata with `FormInputMetadata<T>`, `T` is the type of `extra` object.
Then a `FormData` is a collection of inputs. You can `validate`, `contains`, `intersection`, `difference`, `union`, or `clone` this data.
After that, you have to extends `FormDataCubit`.
```dart
class CustomFormCubit extends FormDataCubit {
CustomFormCubit({required FormData inputs}) : super(inputs: inputs);
@override
Future<void> submitForm() {
log(state.data.toMap().toString());
// Handle all your logic here.
emit(...)
}
}
```
> The submited form is in `state.data` !
Don't forget to create and provide it !
```dart
FormDataCubit _formCubit = CustomFormCubit(inputs: getNormalFormData());
return BlocProvider(
create: (context) => _formCubit,
child: const WidgetTree(),
);
```
You can now create the first form input !
```dart
class _EmailInput extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocBuilder<FormDataCubit, FormDataState>(
builder: (context, state) {
return TextField(
onChanged: (email) => context
.read<FormDataCubit>()
.dataChanged(formFieldEmail, Email.dirty(email)),
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'email',
helperText: '',
errorText: state.data.isNotValid(formFieldEmail)
? 'invalid email'
: null,
),
);
},
);
}
}
```
Then, you can create the trigger
```dart
class _SignUpButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocBuilder<FormDataCubit, FormDataState>(
buildWhen: (previous, current) => previous.status != current.status,
builder: (context, state) {
return state.status.isSubmissionInProgress
? const CircularProgressIndicator()
: ElevatedButton(
onPressed: state.status.isValidated
? () => context.read<FormDataCubit>().submitForm()
: null,
child: const Text('SIGN UP'),
);
},
);
}
}
```
> With `state.status` you can access the status of the form to check if there is an error or if it's in submission.