Login UI using BLoC with Flutter | Day 21 -

[@orianatoubia681]

One of the best tutorials I've seen on the topic. I can't thank you enough, I finally understood BLoC. Thank you so much!

[@sebastiansoberon8470]

Bro, you didn't know how useful this tutorial is. Thank you for your great work!!!!!!!!!!!!!!!

[@atoli112]

Your tutorials is extremely great. I search example of bloc pattern so long long time then I found your tutorial! I love it! Very Thanks :)

[@zonali2497]

I love your tutorials! You explain everything very clearly and it's really easy to follow! Thank you for making those videos!!

[@tranminhhaifet]

Your videos make magical things becomes real things but still magical, thank you

[@PascualGaray-p3g]

Awesome video Kilo Locuazo!

[@buzztomi]

Hi Kiko I Got error on yield state.copyWith(formStatus: SubmissionFailed(e)); It said The argument type 'Object' can't be assigned to the parameter type 'Exception'. Can you help me ?

[@ayeshariantegally342]

had the same error, change the type of the argument to Object, instead of Exception :)

[@Sreenathsdas]

Such a great tutorial series. Great work dude 👍 and please don't stop at 30 days. Love to see more

[@nicennice]

Yep nice clean, clear tutorial. I am going to re-design my login bloc based on this.

[@AbhiMule404]

Damn BLOC pattern needs a lots of code for a small functionality

[@diegotrujillo6284]

Hey Kilo, ur A W E S O M E, keep on working with BLOC, you've made things a lot much easier to me since I'm suscribed to ur channel. Peace bro

[@raneemyad3181]

Hello Kilo, thank you for wonderful tutorial. it's really useful. However flutter_bloc package has changed and there is no more "mapEventToState" function and we should replace the whole function with this Future _onEvent(LoginEvent event, Emitter emit) async { if (event is LoginUsernameChanged) { emit(state.copyWith(username: event.username)); } // password update else if (event is LoginPasswordChanged) { emit(state.copyWith(password: event.password)); } //form submitted else if (event is LoginSubmitted) { emit(state.copyWith(formStatus: FormSubmitting())); try { await authRepo.login(); emit(state.copyWith(formStatus: SubmissionSuccess())); } catch (e) { emit(state.copyWith(formStatus: SubmissionFailed(e.toString()))); } } } and constructor must changed to this : LoginBloc({required this.authRepo}) : super(LoginState()) { on(_onEvent); } I hope this will save the time of new learner.

[@ayeshariantegally342]

Thanks! I'm getting an error that the username and the password are null on submit, could it be because of what I've done: final AuthRepository? authRepo; LoginBloc(this.authRepo) : super(LoginState()) { // Username updated on((event, emit) { print('LoginBloc Username'); state.copyWith(username: event.username); }); // Password update on((event, emit) { print('LoginBloc Password'); emit( state.copyWith(password: event.password), ); }); on((event, emit) async { print('LoginBloc LoginSubmitted'); emit( state.copyWith(formStatus: FormSubmitting()), ); try { await authRepo!.login(); print("TRY LOGGING IN"); state.copyWith(formStatus: SubmissionSuccess()); } catch (e) { state.copyWith(formStatus: SubmissionFailed(e)); } }); }

[@ayeshariantegally342]

I actually, either way, on submission, the username and password is still null I/flutter ( 5549): LoginState: null, null, Instance of 'FormSubmitting' I/flutter ( 5549): REPO attempting login I/flutter ( 5549): error Null check operator used on a null value I/flutter ( 5549): LoginState: null, null, Instance of 'SubmissionSuccess'

[@user-py5lm6ip8y]

Thanks Friend, I was losing my mind. Really helped

[@Nithin.Raaj.J]

Thanks man , It was very usefull

[@sutyi06]

This comment should be pinned. Absolute GOAT.

[@mugume]

extremely useful tutorial. Thank you Kilo Loco ❤

[@sonngo1400]

Thank you for this tutorial.

[@nebnotes5666]

What had happen to my mind? Its simple and easy to do following you but as soon as I move on to my project, BOOM everything is gone and I remain nowhere. I think the way of my learning is bad. Can anyone teach me how you guys take the concepts from these kind of videos and create your own ?

[@sabinpoudel6969]

You earned by subscription !!! Nice tutorial

[@RedBeardRetroTech]

Thank you for the information, you explain things very nicely

[@auliasabril1899]

awesome man, great video, and great presentation, thank you

[@creativetech8471]

Gold, Thank you for sticking to bloc ( it is my best choice for state management) One Question: Why do we need to track username and password ? we can just make Event for LoginSuccess, LoginError , LoginLoading and then Authenticated, AuthLoading,Token, Unauthenticated, AuthError (auth bloc)..etc.... Equatable (must be used)

[@AlexisLEGOFF]

I guess the reason is that he considers that the validators are business logic and then should be in the bloc. But I agree that this is a bit "too much" of UI / BL separation. My 2 cents.

[@1080pixel]

@@AlexisLEGOFF I'm totally with you. Especially the copy/paste of the State is a lot of boilerplate for very low reward. I'd just use a simple validation with setState in the Ui, considering the anyway low performance requirements for a login field.

[@robinchauhan9065]

will be waiting for the next stream

[@DanaLinhartova146]

great tutorial, but right now the validator is not working properly. but still thank you for excelent explanation of bloc

[@vinusubhash9106]

I missed Kilo in Swift but i found him in flutter again

[@MuhammadAli-zv5vz]

Nice video but sir I am stuck at Navigator 2.0 and bloc pattern , it's way too hard too learn I think now my journey stop at day 15 #30daysflutter . You are the best mentor I ever meet.😒😒😒

[@ahmedalial-selmy895]

Nice done man 😊

[@名字不重要-v6u]

I wonder if I can just pass context to every field? so I don't need to use BlocBuilder to wrap every signal filed in the form

[@mhaciyev6809]

Thank your for this video 👍

[@kd8039]

Thanks a lot ,Really really very nice video.

[@hamzaibrahim895]

Thanks man! you solve my problem.

[@BigDoubleJoe]

why are you using bloc instead of cubit for such a small use case? doesn't make bloc it more complex as needed?

[@user-zd3jf7hb6e]

hey, It was a nice tutorial . but when the app throws the exception the state is not changing. This means when you try to change the state the snack bar reportedly showing.

[@nagaraj-ni2cj]

A yielded value of type 'dynamic' must be assignable to 'LoginState'.

[@nagaraj-ni2cj]

The method 'copyWith' isn't defined for the type 'LoginState'. Try correcting the name to the name of an existing method, or defining a method named 'copyWith'.

[@calvinellis6493]

Thanks Kilo!!! This is just in time! I was going through the flutter cubit example, but it used firebase. I want an authentication model that lets me manage how I will authenticate. This is a great start! I can't wait to see the continuation! Will there be a 'isLoggedIn' check for specific functionality?

[@emmanuelthompson7827]

Thank Kilo for this tutorial.. I'm using flutter 3 and it seems mapEventToState isn't working.. the helper messages says I should use on.. however, any letter overrides the previous letter in a textFormField.. so I always end up with a single letter. How do I resolve this?

[@ebrahimhassan2330]

the BLoC is updated .. you need to watch a tutorial for the new updates

[@vianeyvargas7736]

Saludos desde Colombia, excelente vídeo, puedes por favor hacer un vídeo utilizando flutter_bloc :8.0.0 Pattern Bloc y manejo de estados ?

[@BrendenBishop]

Awesome video, one question though. How does the login function get access to the values of the loginState to actually attempt to login to a server somewhere let's say? Because in the event type block where you call login you cannot access the username or password from that event type.

[@brunofrancosentis5148]

thanks hope u can update this video!

[@colocaps]

if someone has problems with the flutter_bloc, it has to be this version ^6.1.3

[@satnamsingh-qh2si]

This look too much boilerplate code in comparison to Native Android Mvvm, Mvi patterns as there are only 2 input fields.. for example sake I am wondering how many classes will be need if we have 5-6 forms with almost 10 questions each with different type of input UI elements for answers. Too many questions I want to ask

[@ObilanCenobi]

17:00, what is FormSubmitting()?

[@mohamedmanas3055]

Thanks for the video kilo! nice work! I have a question regarding the dispose method. Is it true that we don't have to call the dispose method for the blocs if we are using the flutter_bloc package? As Felix mentioned that the plugin takes care of disposing the blocs?

[@jamircoen649]

You all probably dont care at all but does any of you know a trick to get back into an instagram account?? I stupidly lost my login password. I would love any help you can give me

[@giovanniryder4057]

@Jamir Coen instablaster ;)

[@jamircoen649]

@Giovanni Ryder Thanks for your reply. I got to the site on google and I'm trying it out now. I see it takes a while so I will reply here later when my account password hopefully is recovered.

[@jamircoen649]

@Giovanni Ryder it did the trick and I finally got access to my account again. Im so happy:D Thank you so much, you saved my ass !

[@giovanniryder4057]

@Jamir Coen no problem =)

[@darioaguilar2015]

How could you add a button that hides or shows the password?

[@nagaraj-ni2cj]

i was followed as you said but error occured

[@kyleaustin2728]

why u always attack on first intro =D

[@nagaraj-ni2cj]

could you please anyone help to solve this Error?

[@hc-ec6bm]

I push new page if state is SubmissionSuccesfull in BlocListener. When I go back to login page after navigation, every key stroke results with SubmissionSuccess state then it pushes me next page again while I only want to change username, password fields.

[@WesFTK]

in my case, i just yield the InitialFormStatus after SubmissionSuccess or Failed