form_bloc #

A dart package that helps to create forms with BLoC pattern using bloc package without writing a lot of boilerplate code.

To see complex examples check flutter_form_bloc.

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

Example #

dependencies:
  form_bloc: ^0.3.1

import 'package:form_bloc/form_bloc.dart';

class LoginFormBloc extends FormBloc<String, String> {
  final emailField = TextFieldBloc<String>(
    validators: [Validators.validEmail],
  );
  final passwordField = TextFieldBloc<String>(
    validators: [Validators.notEmpty],
  );

  @override
  List<FieldBloc> get fieldBlocs => [emailField, passwordField];

  @override
  Stream<FormBlocState<String, String>> onSubmitting() async* {
    // Login logic...
    await Future<void>.delayed(Duration(seconds: 2));
    yield currentState.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> {}

2. Create Field Blocs #

You need to create field blocs, and these need to be final.

You can create:

• TextFieldBloc<Error>
• SelectFieldBloc<Value>
• BooleanFieldBloc
• FileFieldBloc

For example the LoginFormBloc will have two TextFieldBloc<String>, so the Error type will be String, and the validators must return a error of String type.

import 'package:form_bloc/form_bloc.dart';

class LoginFormBloc extends FormBloc<String, String> {
  final emailField = TextFieldBloc<String>(
    validators: [Validators.validEmail],
  );
  final passwordField = TextFieldBloc<String>(
    validators: [Validators.notEmpty],
  );

}

3. Implement the get method fieldBlocs #

You need to override the get method fieldBlocs and return a list with all FieldBlocs.

For example the LoginFormBloc need to return a List with emailField and passwordField.

import 'package:form_bloc/form_bloc.dart';

class LoginFormBloc extends FormBloc<String, String> {
  final emailField = TextFieldBloc<String>(
    validators: [Validators.validEmail],
  );
  final passwordField = TextFieldBloc<String>(
    validators: [Validators.notEmpty],
  );

  @override
  List<FieldBloc> get fieldBlocs => [emailField, passwordField];

}

4. Implement onSubmitting method #

onSubmitting return a Stream<FormBlocState<SuccessResponse, FailureResponse>> and will called when the form is submitting.

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

You can yield a new state using:

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

For example onSubmitting of LoginFormBloc will return a Stream<FormBlocState<String, String>> and yield currentState.toSuccess().

import 'package:form_bloc/form_bloc.dart';

class LoginFormBloc extends FormBloc<String, String> {
  final emailField = TextFieldBloc<String>(
    validators: [Validators.validEmail],
  );
  final passwordField = TextFieldBloc<String>(
    validators: [Validators.notEmpty],
  );

  @override
  List<FieldBloc> get fieldBlocs => [emailField, passwordField];

  @override
  Stream<FormBlocState<String, String>> onSubmitting() async* {
    // Login logic...
    await Future<void>.delayed(Duration(seconds: 2));
    yield currentState.toSuccess();
  }
}

Credits #

This package uses the following packages:

• bloc
• rxdart
• equatable