Flutter Bloc - Simple Cubits and Bloc Tutorial #6 | Login page using Flutter Bloc

[Music] hey everyone welcome back again to another flutter tutorial and in this session we will discuss about how to create a simple login page with the help of flatter block in the previous video series regarding flutter block we were discussing about how to handle simple qubits and finally we just ended up with the conversion of qubits to block hope you all remember and in this video we will be migrating completely to flutterblock and with the help of flutterblock principle we'll be developing a basic login page what you see right over here and in this page we have two text form fields as you can see we have a username and password field and l button which takes us to the next page on a successful attempt okay so let me just run that and show you let me just give any value for the username and you can just type in the password and press the login button it have a loading state followed by which we have a loader state which takes us back to the dashboard page and if you click the back button it says access back to the login page itself okay or else if you try to click the login button without giving any values to the text form field that is if you leave the username or password field empty and try to click the login button it throws an error which is the error state in our case okay we have a simple snack bar stating us to enter the username or the password okay hope you got a better overview of what we are about to discuss in the series and with this idea let's move on to the coding part the first thing which we need to do is to add the following dependency in your passback which is the flatter block always check for the latest version as for the video recording date 8.0.1 is the latest version of this flutter block package and after doing that let's move on to the left folder and see the live folder uh we'll be just starting with the block itself i will just start explaining with the block therefore all the blocks for this login as well as the dashboard page is written down say this business logic folder if you click this you can see that you have two folders for handling the blog for the two separate pages first is the login page and if you want to create a blog for the page you can do that with the help of the feature which we have already discussed in the previous video you can right click on the destination folder or the place where you want the blog to be created and you can just click this and provide the name for the blog once it is done you can see three set of folders being created in the particular location one is the state or another for events another for the block itself okay for the login page we have these three files starting with the state and as usual we will be having four state one is the initial state that is the inside layout which we will be seeing as soon as the app is getting loaded for the first time and followed by the initial state you'll be making use of a loading state as you just saw overlay loading indicator that will be handled with this state followed by which we have a loaded state and for the load state we will be creating a final variable which is the username since it is a final variable we will be creating constructor for the same okay in the loader state is where we'll be navigating from the login to the dashboard page okay in that case we will be making use of this username okay so we have created a variable for that followed by which finally we have the error state just to check for the errors what we have seen already that is the simple snack bar okay these are the four states which will be having for the login page followed by the states we will be moving to the events here for this case we'll be having only one event as you might have guessed the login button event alone and therefore we'll be defining a single class that that will handle that event and we name that class as the login and the class will be making use of the username and password because we'll be making of a simple validation right over in the blog folder with the help of the username and password so we have created a separate variable for those two okay so this is all about the events what we have in the login page now let us move on to the block once those events and states are set we will be moving to the block and inside the block where we will be just um checking for the events and based upon the events we'll be mapping the corresponding states and in our case here we have only one event which is the login event itself therefore we'll be checking for that if the event is login then we need to check for two conditions whether the input field or the value from the input field is empty if it is so then we'll be emitting or will be yielding a error state or less if the input field do connect some values then at that time will be rendering or will be emitting a loading state followed by the duration of three seconds we will be emitting the load state which internally will take us to the dashboard page well this is all about the block for the login page now let's now let us discuss regarding the block what we have for the dashboard page just the same kind of three files for states events and block starting with the states here just like the same we need we'll be having an initial state that is the initial layout followed by which we have a loading state and another state which is the dashboard nav state which is going to take us to the inside login page upon the back button press okay so these are the three states which we'll be having for the dashboard screen and let's move on to the events in the dashboard page regarding the events in the dashboard page we have only one event just like what we have in the login page which is the navigate back event okay we have a back button in the dashboard page which will be taking us back to the login page so that is the only event we have in the dashboard page moving towards the block here we will be checking for that particular event if it is a navigate back event then you will be emitting that dashboard nav state which internally will take us to the login page itself well that's all about the blog what we have for the login as well as the dashboard page hope you got a clear overview of the block architecture what we will be having in this app with this idea let's move on to the screens all the ui part is written separately inside the presentation folder and moving to the screens we have two screens just like what we have discussed the first is the login screen in the login page the ui is very basic that is you have a simple image followed by which we have a input text form field for getting the username and another input field for getting the password followed by which we have a login button that is what do we have over here and two buttons just uh two containers instead okay this is all about the initial set of uis what we'll be rendering and upon the app is loaded for the first time which is wrap and say the build initial input function and followed by which we have a snack bar to display the error message okay so this is all about the uis what we have for the login page now let us just map the corresponding states with the corresponding ui components now inside the body we need to make use of the block consumer and the block consumer as you know will be taking the listeners and the builders the lizards will be having two states that is we'll be checking for two states one is the error state just like what we have discussed in the previous videos we'll be rendering the snack bar or else if it is a loaded state then we need to navigate to the dashboard page and therefore those things will be wrapped inside the listeners else if it is a loading state then it will go it will go inside the builder and we'll be rendering a loading widget in the else statement will be rendering the initial input okay which is the initial layout what you see right over here okay so this is all about the rendering process in the ui component with the help of block consumer okay now now we have defined the events and states as well as mapped the corresponding events to the corresponding states inside the block and also we have done the rendering part the only thing which is left is the triggering that is we haven't triggered the corresponding event upon the login button press that is the only thing which is left over now let us move on to that you need to mount to the on pressing of the button and the button is written down and say this file you see here say the on press event you need to make use of the add-on method and the only meth only event which is written down is the login event as you might have guessed that is the login event which holds the username and password therefore we need to make use of login event and pass in the username password which we get from the text form field that is this is how you will be triggering an even from the ui and and based upon these events the corresponding mapping will be done in the block and the corresponding states will be emitted as a response which in which is then mapped with the block consumer and rendered the with the which is mapped with the help of the block consumer and the corresponding ui components are rendered as it is okay so this is all about how you map events to state with the help of block consumer in the login page now let us move on to the dashboard page the principle is the basic one we have made use of the block consumer and inside the listeners will be checking for the dashboard now state that is whether we need to navigate to the previous page if it is so we'll be making some pop of context or else if it is the initial or the loading state will be correspondent or then we'll be returning the corresponding layouts in cl or the loading layout based upon the state which we get from the block okay well that's all about how you can make use of flutter block in order to create a simple login page for your flutter apps well that's it guys hope you guys enjoy this video if you do so consider subscribing and i will see you in the next one bye [Music] you

Channel: vijaycreations

Views: 10,025

Keywords: flutter, mobile, dart, UI, mobileapp, flutterapp, flutterapps, flutter web app, appdev, flutter web, flutter bloc, bloc, bloc pattern flutter, state management using flutter bloc, flutter bloc cubits, cubits, bloc and cubits in flutter, flutter app state management, bloc and cubits, flutter bloc pattern, cubits in flutter, cubits and flutter bloc, state management in flutter, flutter state managment using flutter bloc and cubits, cubits and counter app, counter app, cubits part1, app, apps

Id: BWfpyT1J8nk

Length: 10min 50sec (650 seconds)

Published: Sun Mar 20 2022