Plugin formz Helps Flutter Bloc Cubit to Make State

One of my projects using latest flutter bloc with cubit. And I follow tutorial from flutter bloc web. And First time I learned it, it made me confused why so many classes do we have to implement it. Like Event class, Bloc class and State class. And The view itself have two things ui page and form page. It's like we have five classes to cover bloc and flutter ui.

But After using it a little big long, I can see why we need to have many classes. First if your app is not big, it will make your code looks too much. Sorry I forget the word that can explain it better. But if your app is big and continue developing. It will be easir for you to maintain it.

So what I'm gonna share this month, about the one of the core flutter bloc plugin that I used for my app. That is formz. It's not just used for flutter bloc only, you can combine it with other state management. So what's the advantage using this plugin is you can simplify and clarify the input form page like making validation and loading state when submitting form.

So if you have form in your app, it must has input and button to submit, right ? So for one input, you need to define it in formz class. So in that class, you need to use @override method that is validator. I give you en example below. It uses many term like pure or dirty. To indicate the value inside FormzInput. This is for string value that is Name itself.

class Name extends FormzInput<String, NameValidationError> {

const Name.pure() : super.pure('');

const Name.dirty({String value = ''}) : super.dirty(value);

@override

NameValidationError validator(String value) {

return value?.isNotEmpty == true && value.length > 1

? null

: NameValidationError.invalid;

}

}

In validator you can do whatever you want to validate. Like password, it maybe different. You need to use regex maybe to validate the password value. For implmentation, I give you a little bit code. It's not hard to use with cubit. As long as you know the concept. Pure and Dirty. How to validate the formz.

    Name name;

Birth birth;

try {

// ignore: null_aware_in_logical_operator

if (user != null && user?.name != null && user?.name?.isNotEmpty) {

name = Name.dirty(value: user.name);

} else if (_authenticationRepository.currentUser.name.isNotEmpty) {

name = Name.dirty(value: _authenticationRepository.currentUser.name);

} else {

name = const Name.pure();

}

} catch (error) {

Get.printError(info: error.toString());

name = const Name.pure();

}

try {

birth = user != null && user.birthDate != null

? Birth.dirty(value: user.birthDate.toDate())

: const Birth.pure();

} catch (error) {

Get.printError(info: error.toString());

birth = const Birth.pure();

}

emit(state.copyWith(

name: name,

birth: birth,

status: Formz.validate(

<FormzInput<dynamic, dynamic>>[

name,

birth,

],

),

isReady: true,

));

Above code is one of way that I used with cubit, First we need to initialize the data with dirty() method. We do pure(), if we initilize it empty or data that we get is not found or null. Then we do validation about it using Formz.validate. We can do multiple formz validation, and you will get the result in FormzStatus object. And check it using is isValidated

You just need to practice it, and you will understand. That's how i did. I think this is it from me. If you have any question or something that want to ask. Just ask here in comment below. Thanks for visiting my simple blog. Hope you can learn a lot today and tommorow haha.