Login UI using BLoC with Flutter | Day 21 -
HTML-код
- Опубликовано: 3 июл 2024
- Kilo Loco shows you how to implement a Login UI using Flutter BLoC. This tutorial will cover validation with forms and managing state with BLoC
0:00 - Intro
0:50 - Build Out Login View
8:12 - Create Login Events
9:44 - Create Login State
15:05 - Create Login Bloc
20:07 - Connecting Everything
23:38 - Handling Validation
31:35 - Handling Failed Log In
35:31 - Outro
** Show Notes and Links **
Project Files:
github.com/Kilo-Loco/30DaysOf...
Kilo Loco on Social Media:
www.kiloloco.com
Discord - / discord
Twitter - / kilo_loco
Instagram - / kilo_loco
#flutter #dartlang #30DaysOfFlutter
I love your tutorials! You explain everything very clearly and it's really easy to follow! Thank you for making those videos!!
Such a great tutorial series. Great work dude 👍 and please don't stop at 30 days. Love to see more
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 :)
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!
extremely useful tutorial. Thank you Kilo Loco ❤
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
Your videos make magical things becomes real things but still magical, thank you
Yep nice clean, clear tutorial. I am going to re-design my login bloc based on this.
Awesome video Kilo Locuazo!
awesome man, great video, and great presentation, thank you
Thank you for the information, you explain things very nicely
You earned by subscription !!!
Nice tutorial
Thank you for this tutorial.
Nice done man 😊
Thanks a lot ,Really really very nice video.
Thank your for this video 👍
Thanks man!
you solve my problem.
will be waiting for the next stream
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 ?
had the same error, change the type of the argument to Object, instead of Exception :)
Damn BLOC pattern needs a lots of code for a small functionality
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?
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.
I missed Kilo in Swift but i found him in flutter again
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.😒😒😒
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.
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 ?
thanks hope u can update this video!
why are you using bloc instead of cubit for such a small use case? doesn't make bloc it more complex as needed?
great tutorial, but right now the validator is not working properly. but still thank you for excelent explanation of bloc
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
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)
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.
@@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.
A yielded value of type 'dynamic' must be assignable to 'LoginState'.
17:00, what is FormSubmitting()?
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 ?
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?
the BLoC is updated .. you need to watch a tutorial for the new updates
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?
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
@Jamir Coen instablaster ;)
@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.
@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 !
@Jamir Coen no problem =)
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'.
i was followed as you said but error occured
if someone has problems with the flutter_bloc, it has to be this version ^6.1.3
How could you add a button that hides or shows the password?
could you please anyone help to solve this Error?
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.
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));
}
});
}
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'
Thanks Friend, I was losing my mind. Really helped
Thanks man , It was very usefull
This comment should be pinned. Absolute GOAT.
why u always attack on first intro =D
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
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.
in my case, i just yield the InitialFormStatus after SubmissionSuccess or Failed