form_bloc 0.10.1

Easy Form State Management using BLoC pattern. Separate the Form State and Business Logic from the User Interface. Async Validation, Progress, Dynamic fields, and more.

form_bloc

Easy Form State Management using BLoC pattern. Separate the Form State and Business Logic from the User Interface. Dynamic Fields, Async Validation, Progress, Failures, Successes, and more.

---

To create beautiful forms in Flutter using form_bloc check out flutter_form_bloc.

---

Before to use this package you need to know the core concepts of bloc package.

---

Examples

• Form with dynamic fields: BLoC - UI.
• FieldBlocs with async validation: BLoC - UI.
• Manually set FieldBloc error: BLoC - UI.
• FormBloc with submission progress: BLoC - UI.
• FormBloc without auto validation: BLoC - UI.
• Complex async prefilled FormBloc: BLoC - UI.
• And more examples.

Basic Example

dependencies:
  form_bloc: ^0.10.0

import 'package:form_bloc/form_bloc.dart';

class LoginFormBloc extends FormBloc<String, String> {
  LoginFormBloc() {
    addFieldBloc(
      fieldBloc: TextFieldBloc(
        name: 'email',
        validators: [FieldBlocValidators.email],
      ),
    );

    addFieldBloc(
      fieldBloc: TextFieldBloc(
        name: 'password',
        validators: [FieldBlocValidators.requiredTextFieldBloc],
      ),
    );
  }

  @override
  Stream<FormBlocState<String, String>> onSubmitting() async* {
    // Login logic...

    // Get the fields values:
    print(state.fieldBlocFromPath('email').asTextFieldBloc.value);
    print(state.fieldBlocFromPath('password').asTextFieldBloc.value);

    await Future<void>.delayed(Duration(seconds: 2));
    yield state.toSuccess();
  }
}

Basic usage

1. Import it

import 'package:form_bloc/form_bloc.dart';

2. Create a class that extends FormBloc<SuccessResponse, FailureResponse>

FormBloc<SuccessResponse, FailureResponse>

SuccessResponse The type of the success response.

FailureResponse The type of the failure response.

For example, the SuccessResponse type and FailureResponse type of LoginFormBloc will be String.

import 'package:form_bloc/form_bloc.dart';

class LoginFormBloc extends FormBloc<String, String> {}

3. Create the Field Blocs

Add the field blocs to the form bloc using addFieldBloc method.

You can create:

• InputFieldBloc<Value>.
• TextFieldBloc.
• BooleanFieldBloc.
• SelectFieldBloc<Value>.
• MultiSelectFieldBloc<Value>.

For example the LoginFormBloc will have two TextFieldBloc.

The name parameter must be an unique string and will serve to identify that field bloc.

The state of the form has a Map<String, FieldBloc> fieldBlocs property, in which each field bloc can be accessed using its name as a key.

import 'package:form_bloc/form_bloc.dart';

class LoginFormBloc extends FormBloc<String, String> {
  LoginFormBloc() {
    addFieldBloc(
      fieldBloc: TextFieldBloc(
        name: 'email',
        validators: [FieldBlocValidators.email],
      ),
    );

    addFieldBloc(
      fieldBloc: TextFieldBloc(
        name: 'password',
        validators: [FieldBlocValidators.requiredTextFieldBloc],
      ),
    );
  }
}

4. Implement onSubmitting method

onSubmitting returns a Stream<FormBlocState<SuccessResponse, FailureResponse>>.

This method is called when you call loginFormBloc.submit() and FormBlocState.isValid is true, so each field bloc has a valid value.

To get the value of each field bloc you can do it through the state of the form bloc, and using the fieldBlocFromPath method that receives a path and will return the corresponding field bloc. Then you will have to cast the corresponding type and you will get the value by using the value property.

The path is a String that allows easy access to the Map<String, FieldBloc> fieldBlocs that is found in state.fieldBlocs.

To access nested field Blocs, you must use the / character.

Examples:

• email
• group1/name
• group1/group2/name/

You must call all your business logic of this form here, and yield the corresponding state.

You can yield a new state using:

• state.toFailure([FailureResponse failureResponse]).
• state.toSuccess([SuccessResponse successResponse]).
• state.toLoaded().

See other states here.

import 'package:form_bloc/form_bloc.dart';

class LoginFormBloc extends FormBloc<String, String> {
  LoginFormBloc() {
    addFieldBloc(
      fieldBloc: TextFieldBloc(
        name: 'email',
        validators: [FieldBlocValidators.email],
      ),
    );

    addFieldBloc(
      fieldBloc: TextFieldBloc(
        name: 'password',
        validators: [FieldBlocValidators.requiredTextFieldBloc],
      ),
    );
  }

  @override
  Stream<FormBlocState<String, String>> onSubmitting() async* {
    // Login logic...

    // Get the fields values:
    print(state.fieldBlocFromPath('email').asTextFieldBloc.value);
    print(state.fieldBlocFromPath('password').asTextFieldBloc.value);

    await Future<void>.delayed(Duration(seconds: 2));
    yield state.toSuccess();
  }
}

Credits

This package uses the following packages:

• bloc
• rxdart
• equatable
• quiver