Complete Flutter Web Course 2021 | Building a Flutter Web Dashboard

this video is sponsored by datacamp hello beautiful people welcome to the one and only flutter web course you will ever need to take i still remember when i was trying to learn flutter web myself and i couldn't find any good courses out there because the majority of the content is outdated or just not good enough but this course is different trust me on this course i will teach you flutter web as i build one of my clients projects so you're going to learn from a real life project and here we are going to build an admin panel we will start this course by discussing when and when not to use flutter web and then we will move to one of the most important topics in web design which is responsive design i will show you some tips and tricks on how to find the perfect breakpoints for your web apps you will learn about custom navigation or local navigation using flutter defaults navigator and you're going to mix that with a global navigation using the get x package and talking about get x you will learn or i will teach you how to manage the state of your web apps using get x and we are going to use get x to keep track of items being hovered active routes active items and so much more you will also learn about advanced url navigation in flutter web and how to handle undefined routes using four or four error pages or returning four or four pages every single time the user tries to access a route that it's not defined you will also have an introduction to firebase for flutter web you're going to learn how to integrate firebase authentication google sign-in google sign-up on your flatter website and these are just some of the topics that i cover on this course and what's even better is that this course is progressive that basically means that i will be adding more content over time and updating the content as the content gets outdated my goal here is to ensure that this will really be the one and only flutter web course you will ever need now who is this course for this course is for people that are already familiar with flutter we will not be covering basic concepts such as widgets what's the state columns rows and all of those basic concepts so prior to enrolling into this course make sure that you're already familiar with flutter you don't have to be an advanced developer in any ways but definitely you must be familiar with flutter and comfortable working with the technology if that's all right for you and you are excited see you guys inside before we start this course a small word from the sponsors of today's video data camp datacamp is an online learning platform that makes it easy to acquire data skills learn at your own pace with interactive courses and hands-on exercises no previous data skill is required to get you started datacamp has courses for all different skill levels i would recommend you to take this introduction to python course to get you started and to check the platform out with datacamp you'll learn directly from your browser because it doesn't require any extra software and you can take free assessments which gives you a personalized learning recommendation if you want to stand out from the crowd increase your chances of landing a job on this extremely hot field and learn from experts actually working on the field data camp is the way to go sign up using the link in the description and if you do so all first chapters of data camps courses will be free of charge and you'll be supporting the channel as well so thank you very much on this video i will just be giving you tips on how to make the most out of this course right first the very first advice or tip for you guys is code along as you watch the videos code along because that's the best way for you to learn right now how to get help and this is very important we have the project here flutter web dashboard on my github and now i will i will link this project right if you are facing uh problems you can just open an issue here me or other students can assist you here with your problems and i would highly recommend you guys to have your github repos and have your projects on your git repos so that when nobody is able to help you at least you can share the github link with me so that i can access and try to run it on my personal computer and help you guys troubleshoot like that because usually people send screenshots and it's very hard to troubleshoot a problem using screenshots it's even sometimes impossible right and uh the third way of getting help obviously is asking a question and on the q and a section uh another thing that i think it's very important for you guys to know is that as i told you this course is not for beginners in flutter so you must have some knowledge of flutter some kind of flatter experience right because some parts of the course where there is a lot of code repetition where we are just where we are just building widgets i increased the speed of the lesson right so so uh those were the tips that i thought would be very important for you guys to have before we start the course as uh has the majority of us already know flutter web is stable from the version 2.0 onwards flutter web comes included with the default flutter project and now you might be tempted to start using flutter web for every single project you build and i wouldn't really advise you to do that right now and remember that this will definitely change in the future but has for now june 2021 i still wouldn't use flower web for every single project so when to use flutter web the simple answer for me would be i would use flutter web for projects that do not have to score high to score a high seo if you don't know what a seo is this stands for search engine optimization right so uh for example if you go to google depending on where you are at the moment these results here may be different right so these websites are optimized to be shown first when people search for house rental right for example if you search if you search for facebook the very first link will be the official facebook website so if you're looking for websites let's say our e-commerce website at this moment that you would want to show every single time a user searches for shoes for example i wouldn't use flutter web on that example at the moment at the moment i wouldn't use it and i would use flutter web for projects like admin dashboards because admin dashboards don't even appear on google searches normally so it doesn't matter how the seo of the website is and uh every single type of website that it doesn't matter how it appears on google or in terms of the position i would use flutter web for that hello beautiful people welcome back on this video we will talk about responsive design right on very simple terms responsive design or saying that a website is responsive basically means that the website looks good on a variety of screen sizes it doesn't matter if it's as small as a mobile phone or as wide or large as a widescreen monitor right and this is extremely important for the user experience of the platform you don't want to have a large screen size website on a mobile device right uh usually when you are designing responsive websites there's this things called break points breakpoints are screen sizes where you define uh different looks i don't know if that was easy to understand but basically let's have this as an example here we have a large screen size we have medium have small right you can forget about custom at the moment but here for example you can set some logic that if the screen is large the window will look a certain way if it's a medium size the window will look a certain way if it's a small size screen the the window will look a different way right these numbers are not just random numbers there is a website the it's it's called stat counter and now on this website you can see the screen size the most popular screen sizes based on the date and the location this is a must-have asset right at the moment we have the 1920 resolution as being the most popular followed by the 1366 right so here you would define if if you intend to have your platform on large screens if you want them to for medium screen these are usually laptop resolutions and this are like large screens desktop resolution all right so this website is a must have if you want to design your website responsively to find the breakpoints and even if you're just designing let's say a tablet application you can use this website select the device and here you can have the most common uh breakpoints or resolution resolutions for tablet devices right so this was kind of a tip video something i wanted you guys to know and uh use this resource very very very much it's going to be extremely helpful for you guys now uh this was basically it in terms of the initial tips that i wanted to give you guys now we can start working on our project well on this video we are going to talk about flutter project structure and remember that this is not specific for flutter web any flutter project being it a mobile or web can use the same project structure right so if you create your flutter project if your flutter version is bigger than to flutter 2.0 you automatically will have the flutter web directory here so you have to do nothing you do not have to configure web because web comes with flutter if you are running on a previous version you'll have to run let me open the terminal you'll have to run this command here to enable flutter web flutter create so this is everything you need to do right so after we have that out of the way you already have flutter web enabled on your project let's talk product project structure right and this is the structure that i personally use for my projects right everything goes inside the lib folder actually not everything because outside the lib folder we will have the assets folder but that's not for now now for the moment every single thing it's going to go into our lib folder so let's start adding some directories here [Music] [Music] [Music] so this is the project structure i usually use i will just explain what what each of these directories will store first we have the constants and as the name suggests the constants directory will store constant files with constant values uh for example some global constant values and everything will go into here now we have the controllers again uh for this project we are going to use the get x architecture and when you are working with get x on with flutter you will need the controllers here and then we have the helpers and here we are going to store files with functions that that are useful um throughout the app for example the responsive widget it's going to be stored here and the the local navigator logic as well it's going to be stored here and then we have here the pages which are basically the website pages uh usually when i'm building mobile apps i call this directory screens and have a routing here uh this i do not have this in every single project i only use routing when i know that i will do some navigation manually that's why we have routing here and we have widgets which are global widgets that are going to be used in more than one screen in the project and then we have here our main where is um which is the first file where all of the magic starts right so a brief overview this is it this is the project structure that we are going to use for this project before you watch this video i would like to let you guys know that this is a chopped up version of this video that i have on my youtube channel if you want to fully understand how gdx works you can watch this video and you can read the documentation it's very easy to understand and easy to implement so you can use this resources before you proceed if you never worked with get x before so guys this is the default project you get when you create your flutter app and now we are going to integrate the get x ecosystem into the project the first thing to do here is to create a new folder call it controllers and i create another folder let's call it screens now use the link in the description to go to the getx package url copy the dependency or the package come back to your project open pubspec.yaml and we are going to add this dependency into our flutter project after doing that we are going to create a new file call it counter controller that's going to keep track of the counter and inside of the file we are going to define our class counter controller which extends get x controller in here we are going to have our int controller but since we want to know when the value of the the variable changes we are going to turn this variable into an observable it sounds difficult but it's very simple instead of having int here we'll have var counter is equal 0 dot obs obs makes the integer and observable right and in here we are going to write our method to increment our observable basically we have here increment counter plus plus again for every single variable or value that you want to keep track of its value you have to turn that into an observable now let's go back to our main.dart remove this widget here import get and we need to convert the material app into get material app basically we do this so that we can change screens without using the build context of the app we can change screen from anywhere inside of the code now let's create our home screen so it's home.dart and a second screen we are going to call other screen in this case and now for our home screen this is going to be a stateless widget so we need to import flutter material.dart and we need to import get dart as well call it on screen right here we want to return our scaffold and as the body of the scaffold we are going to have a column main axis alignment of the column is going to be center so that every single widget inside of the column will be centered now here we can have the children of our column which is a list of widgets obviously here let's have a text that displays the counter value so now we have to register our controller before we use it so we have here counter controller which has to be a final okay counter controller is going to be equal to get dot put and we use put to register our controllers and inside of put we have to pass our class controller now here in inside of our widget we can access the value of our counter by doing counter controller dot counter dot value now in here we can add a sized box to give it a bit of height and finally let's create a button that will allow us to change screens here the other screen is going to be a stateless widget as well and call it other screen again we are doing this so that i can uh show to you guys how the process of changing screens without using context works here we are going to return a scaffold as well and as the body of the scaffold we are going to have a column and the same story here we are going to have a text and then a button now the good thing is after you have registered your controller to access it you just have to do get dot find right and get x automatically will assign this variable to the controller your register you have registered as long as they have the same type and here we can simply do controller.counter.value let's make sure everything is centered and again we are going to create a button that will allow us to go back to our previous screen when we want so let's just copy this and paste it here size the widget and here to go back we just do get dot back this simple we do not need to expecify the context and this is only possible if you use get material app so don't forget to change material app with get material app now to go to that screen we have to do get to and here the screen name now change this here and the home is going to be home screen now if you run the app you are going to have something like this which is not exactly how i expected it to look no problem let's go back to our home screen and center the text and the button widgets and now let's add a float action button to actually increment the value of our counter now if you look at the app we have here our float action button but it doesn't update the ui so to fix that we have to remove the top level widget and here we are going to return a object from get x called obx and this takes a method that has to return a widget and the widget that we are going to return is the column right hopefully it wasn't very complicated to understand but basically you have to wrap everything inside of obx and now when you click the counter actually changes and if you click on open you can see that the value here on the other screen is updated as well so this is basically it and uh this is the basic example of using uh state management and route management using get x hello beautiful people welcome back to the class well this video is about how to get help doesn't matter how good i am at explaining eventually you will find some errors or things will not work the way you intend them to do and you will need some help and there's two ways of going about doing that one you can ask in the q a section but most likely i will need to see the code that you guys have so it's extremely important for you to use um any type of version control system usually people use github because it's the more or is the most popular right so uh when you create the project make sure you create a github or git repo so that every time you need me or someone else to help you you can just send the link something like this for example so let's imagine this one is is is your project doesn't matter okay you will have something similar to this so when you are facing an error you just have to push your code and you can share the link just copying the link here and every time i ask for the git link you can copy and paste unfortunately version control is not part of the class it's not the goal and i don't want to stretch this one very long but if you do not know how to use git uh make sure you watch some youtube videos they will teach you how to use git it's super simple you only need like five to ten minutes to learn how to use it and that's it so guys uh if we take some time to have a look at our final design we have something like this and from this design i think it's very easy to see how the site is structured right but if it's not i have something to assist us we have this section here the main section we have our side menu and we have our top navigation bar so this is the basic site layout right and this will change obviously if we go to smaller screens like mobile phone screen but that's that's for another video right now i can hide this and we can clearly see that this is the structure of our website right so uh we want to do this in flutter and make sure that this is going to be responsive right it doesn't matter if the user uses a laptop uses a very um huge monitor you should always follow this structure here now um again here is this is where we are going to have the actual pages and when we start working with page routing the only thing that we are going to change is this so we we do not want to reload the whole page that's why we are structuring the website like this because when for example the user clicks on drivers or clicks on one of the side menu items we do not want to reload all of these we only want to change the content here and that's the reasoning behind using this layout here now enough talking let's do this using flutter and the first step or the first thing that we will do is creating this section here and afterwards we are going to add our top navigation bar so let's start with this and now to start things off here in the project you will want to clear everything inside of the main file and now by doing so you are going to have this error here with with the test directory and the only thing to do here is just deleting this because we are not going to use it anyways so now uh the test directory is deleted and um the second thing we will we will want to do here is add some libraries here or dependencies right and i will add here all of the dependencies that we are going to use for this particular project and depending on when you watch this video you may need to update this dependencies to the latest latest version right so uh the first one is google fonts and this is super nice uh because it allows you to use custom fonts inside of the app custom google fonts right and um this is a very simple approach in changing fonts in flutter apps because if you don't want to do it like this you would have to download the fonts and then import the font files into the asset folder and then use that that way and that's a bit complicated or complex for some people so it's easier to just use this charts flatter and this will this this package here will allow us to um create charts inside of our dashboard get which is the get x basically dependency and data table 2 and this is everything that we need actually in terms of dependencies now just ctrl save this and everything will be done for you now uh coming back to our main.dart file i decided to clean everything and start from scratch so that you guys can see what's happening and understand here first of all we need to create our main full file our main function because it's where the code starts there the execution of the project starts here so well i believe that this is nothing new um to you guys so i'll just continue here creating our default stateless a widget and everything [Music] now the first thing that we're going to do differently differently here is that normally you would have material app here but since we are using the get x architecture we are going to use get material app so for the moment this still looks familiar other than changing the material app widget to get material nothing else is going to change now here uh we we are going to add some theme to our app first let's define a background color now uh when it comes to the text theme this project uses a custom font so that's when google fonts comes in handy because we can just do google fonts and call the font that we want to use [Music] [Music] [Music] so now we have some custom fonts into the project we are using the mullish font with the black color right and this is very nice to do like this because we will not have to be changing this frequently inside of our code now the second thing that we we want to do here is to change the default transactions page transactions [Music] [Music] [Music] and finally we are going to change our primary color well now that you guys understood the layout of the website let's actually start building this in flutter first of all let's create a new file called site layout so we have here layout.dart so what happened here is we created our site layout and now we have here define our site layout as the home of our get material widget now let's work with our site layout so here we have our site layout we have the default app bar which is going to be the top navigation bar and now we have a row if we go back to our design we can see that basically this is what we have here we have a row here and we have our top navigation bar here uh there's something i want you guys to notice which is uh this row or the body of our scaffold is divided into six sections with a equal size right so the side menu will take only one of those columns and the rest the body is going to take the five remaining columns now in terms of code this is how you would do that [Music] [Music] [Music] so uh this is basically the same as this we are saying that this section of the code will take five columns and this will take one column and the default value is one right now what we are going to do is actually running this code to see how it looks on our web browser here we have the app on the browser and this is the layout this layout is the same as this one so this is what we wanted right but there is a small problem for example now if we reduce the size of this you'll see that the website is not responsive i mean it is responsive because the sizes do adjust but this is not a normal this is the mobile size more or less but this is not how this is supposed to look on the mobile so we can see that this row here is only suitable for large screens but when we are dealing with small screens this is not suitable this doesn't look good so what we have to do now is actually creating two widgets one that is going to be displayed here on large screens large and medium screens and the second one for the small screens so in terms of code what that means is that we are going to get rid of this or we are going to make this a different widget called a large screen and we are going to create another widget called small screen as well [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] if you have a look at our website here we still have the same things that we had and if we reduce the size nothing changes if you come back to the layout and instead of large screen you have here small screen you will notice that the layout of the website changed which is good but the problem is uh even when the screen is large the layout still remains for the small screen delete still we still have the same layout as the small screens which is not what we want to do here right now what we need is to have a way of automatically changing the screens from large to small depending on the size of the window on the browser so this is what we are going to do on our next video which is building the responsive widget to deal with the responsiveness of our website on this lesson we are going to build our responsive widget basically which is a base widget that then we can wrap other widgets inside of it to make them responsive right and that widget will be present inside of the helpers but you could just put that inside of the widgets as well doesn't matter so here we have our file called responsiveness.dart let me call close the other ones and what's different about this is that this is in fact a widget it's not a method we are going to use a widget but inside of this widget we are going to have different methods that we will access from other widgets as well right but what i usually do here at the top we are going to create constant constant values with the most common breakpoints right or the breakpoints for a particular project on this case we have one breakpoint for large screens we have one breakpoint for medium screen small screen and a custom size which is specific for this particular project [Music] now here we have our values and these values are not just made up you have to google for command screens breakpoint but i showed you how to do that on a previous video and the the 13 and 66 value usually this are laptops and everything from this point and every single value that's greater than this one we are going to consider that a large screen right and the the custom screen size this is not needed for every single project you're going to build but for this particular particular project we are going to use this value here now what we want to do here inside of our widget we want to declare some class properties [Music] and here we have our constructor again for this project to be honest we are only going to use the large screen and the small screen but i decided to add everything so that you can use this widget on future flutter web projects the only value that it's required when we call this widget is the large screen and don't mistake large screen with large screen size large screen size is the size of the screen but large screen or medium screen or small is a widget right now what we want to do next is we need to create static methods right that will tell us if the view the window size on the browser is small is medium is large or is custom and this is how we do that [Music] and here we have our static methods the return booleans the first one basically is checking that if this the screen width is smaller than the screen than the defined screen size then it's a small screen for medium screens if it's greater or equal to the medium screen size but it's smaller than the large screen it's a medium screen if it's larger or equal to the large screen it's a large screen and custom size everything and anything in between the medium screen size and the custom screen size now after having our methods let's create our build function [Music] our build method here is super straightforward we are going to return a layout builder and our layout builder has this builder function that takes a context and constraints right and we are going to use those constraints to decide which type of screen we are going to return if the maximum width of this layout builder is equal or greater than the large screen we're turning a large screen if it's smaller if it's smaller than the large screen but it's equal or greater to the medium screen we're going to return the medium screen if the medium screen is null we're going to return the large screen and else we return a small screen if it's now will return the large screen this will basically make sure that we will return something every single time and again we do not need to have this here you can just carry it off this don't use it anyways yeah so this was basically it for this video this was the responsive widget and on the next lesson we are going to implement this now as a matter of fact we are going to implement this right now let's wrap it um and the way we would go about doing this it's not hard let's go to our site layout right here we are going to return responsive widget and the large screen is going to be equal to the large screen widget the small screen will be equal to the small screen widget now let's run the code and see what happens so here we have our website right and this is a medium screen and even if we extend the window the layout doesn't change let's see what happens if we shrink it okay we have an error let's see what's the problem the type int i think i know what's happening okay we're supposed to return small screen not small screen size and make sure when you're returning the small screen you return the small screen variable so this small screen is this variable here but not the original small screen widget so for both the small screen and the large screen make sure the both start with a lowercase character right let's test that again and here you have it you see how our app changes automatically and this is the magic of responsiveness it worked right on our next video we are going to build our top navigation bar here we are going to create our top navigation bar see you guys on the next one so guys on this video we are going to build our top navigation bar and if you have a look this is how it looks and it's responsive so if we shrink the screen you will see in a minute what happens you see it changes here now we have this menu thing and this is how it works basically so our goal for this video is to recreate this logic here so the process here will be super straightforward now to make our structure cleaner we are going to remove the app bar from here and create a separate file for that so we are going to call the file topnav and here instead of returning a stateless widget as we normally do here we will have to return we'll have to define a method that returns an up bar [Music] so this is our method right it takes a build context and it takes a key scaffold key all right and this is going to be used when we want to do things such as opening the drawer or opening that side menu that's when we are going to use our scaffold key here and the context obviously is to know where on which widget we are going to build this app bar if we pay attention to our design here we can notice that we are using some custom colors here these are not default material colors and if i open here here we have the colors right so what we are going to do actually is using this custom colors inside of our project and to do that back to our project but before let us just call the top navigation bar here and here we have defined our scaffold key and this is what we are going to pass to our method right good now let's create some custom colors well i think i might have deleted some files here but no problem we are going to create so here instead inside of style.dart we are going to define our custom colors and anything and everything related to the style of our project right let's start with this color here i know it looks like white but this is not really white and we are going to call this color and now you may be asking how are we going to get the values for the color and we just have to copy the x code here this is the color code just copy the color code and paste it here just remember that before you paste the color code you have to insert 0x then capital ff and then you can just paste the color code i'm going to do the same thing follow the same process for the remaining [Music] colors [Music] so here we have the custom colors you can pause the video if you want to copy the code you can pause the video and copy this code here or you can just copy directly from the repo on github now we can go back to our app bar and start styling this but even before the last thing we need to do is i actually already have this new folder called assets right and this is the folder the assets folder it only contains one file called icons and inside of icons we have this logo of the app this is the logo and the link to download this will be down below right or if you don't if you do not want to download the assets file you can just go to the github and download the image from there as well but i will add the link to the logo after you have downloaded the only thing you have to do is basically just copy and paste that into your project right just copy and paste that into your project and you're going to have something like this make sure you copy this to the top level and sometimes when you try to copy and paste using vs code you face some issues so i would recommend you to go to the original file path or the the directory of your project and right here at the top level you would paste the file and here you have it perfect after you have all of this in place the only thing you have to do is go to your pub spec again and add this line assets assets icons so this is important obviously if you want to use the image don't forget to add this line here good after all of this is done you are basically ready to go now the first thing that we want to do is remember that when we are on a large screen the first thing we display on our top navigation bar is the logo but when it's a small screen we display the menu icon and to make that possible we are going to do this [Music] so basically what's happening here we are seeing that if this is a small screen we want to display the the menu icon the icon button and if it's a large screen we will want to display the logo now let's run this code now let's try and it didn't work can someone guess why actually it didn't work because of my mistake a small screen is not a screen that it's smaller than the small screen size but it's small it has to be smaller than the medium screen size if it's smaller than the small screen size is it's a extra sim extra small screen and now it works perfectly fine but if you click on this nothing happens and that's because we do not have a drawer yet so let's create one and now that we have the drawer this is basically everything that we had to do uh let's finish creating our top navigation bar [Music] now if you pay attention here i'm trying to use a custom text widget but this is not a default widget so we will have to create this widget before we use it [Music] so this is basically it here we have our custom text and now we can start using that here [Music] so uh that was long but the widget is done now we are running the app to see what happened and i know that maybe it was too much for some of you guys to take but in case of any types of questions feel free to ask me after after you have created the widget you are going to have something more or less like this hopefully you have something exactly like this and as you can see this is flexible and it works perfectly fine now our drawer still doesn't work but that that's because um our drawer widget has no child and that's something that we are going to fix in a bit so actually it didn't work not because the drawer didn't have have a child but because we didn't assign this key to this specific scaffold so we didn't know which scaffold which scaffold is the owner of this particular key so now that we have this key assigned to this scaffold and we are passing this key to our top navigation function now we can access our drawer just like this hello beautiful people welcome back on this lesson we are going to build a menu controller and the menu controller will keep will help us keep track of the items that are that are active inside of our side menu and as well as checking the items that are being hovered by the mouse pointer right another thing that the menu controller will do is assigning this icons depending is returning actually returning this icons depending on the side menu name for example for the drivers it's going to return this car for the clients it's going to return this image here of people and so on right if it's a bit complicated to understand don't worry about it you will understand as we write the code let's code good to make this possible the first thing you'll want to do is to actually create what we call routes again on this project we are going to use two types of navigation a global navigation using get x and local navigation using a local navigator and we are going to use named navigation the first thing you will want to do is to create the routing directory you probably already have this so here inside of our routing directory we have the routes and here i will list all of the routes that we are going to [Music] need [Music] now we have here the list of the routes that we we are going to use on our project and depending on the project these values may change and the even the name of the constants may change depending on the project now we are going to create a list and this list will contain all of the items that we will have inside of the side menu [Music] so here we have the list of site menu item names if you have a look here at our site menu items exactly the names that we have here for our site menu items are the same as the routes right apart from the authentication but um we are going to see how this changed from authentication to logout in a minute but for now this is everything that you want here a list of the routes that we are going to use and now we can actually start working on our menu controller foreign so here we have our menu controller first we are going to create an instance that will allow us to access the value of the menu controller from anywhere inside of our code now here we are going to create two variables or two class properties for the item the act active item and the item that is being harvard again if you are not understanding this section that means that you don't really understand get x you should go back to my previous video and uh watch watch the overview the get x overview lesson that would be super important for you to understand from this point onwards so the default active item is going to be equal to overview page so at the beginning the overview page will be the active page right now we want a method that will allow us to change the active uh the active page [Music] well to be honest this doesn't change the active page but this variable here keeps track of the active route name right for example if the active page is the overview page here we are going to have the name of the page here so every single time we change the page we are going to change the active item name now let's create another method and this method now it's going to allow us to change the name of the item that is being [Music] harvard [Music] so basically what's happening here we are saying that the name of the item that is being offered is going to be equal to the item name that we passed through this function but first of all we want to make sure that that item is not active let's in let's just let's define this method here [Music] so now we have these two methods and what this methods will do is basically here we are going to check if the item name that we provide to this method is the active item and here we are going to check if the item name provided through this method is the item that is being hovered over now let's create a function that is going to return a widget based on the item name a method actually [Music] now we have here these two methods the return item 4 item name and here we have custom icon why do we have this private method it's very simple first when an item is active when let me open here you can see that this icon here is slightly bigger than the other because of the type of the icon probably it's hard to see but this icon is slightly bigger than the others because this is active right and now when the user hovers on this sub sub menu items the item color is supposed to change so this is what this method does actually first we are checking if the item is active if it is active we are going to return a widget that is slightly bigger than the others and the color of the widget will be dark now if the widget is the item is not active we are going to return this item and when we hover over this icon the color should change too dark and when we are not hovering over it the color should remain light gray right but this is not all because now we we still need to call this method from somewhere and we call it from here [Music] now here we have our return icon for method and it sounds a bit complex it looks a bit complex but it's super simple we have a switch statement that takes the item name and depending on the item name uh we are going to return a custom icon right the item name will always always be one of the items one of these items that we defined here inside of side menu items so the item name will always be one of this if it's overview we will return a trending up icon if it's the driver we're going to return the drive eta if this client people and authentication and the default icon it's going to be this one right and if you want to visualize these icons you can just hover over them and this is what's going to be returned right almost there almost there now we just have to do two things here inside of the constants create one file called controllers and here is where we actually define the controller instances by doing so we will always be able to get the instance of this controller from anywhere inside of our app now what we have to do is to register this controller by using get put [Music] so this is everything that we had to do for this lesson and i i i know that we did too much and probably it was a bit hard to understand or to follow but watch this lesson again if you need to understand ask me any questions if you need and there's nothing we can do here even if we run the app nothing is going to change yet and we are going to make sure that we will visualize all of these changes on our next video hello guys so on this video we are going to be building the side menu and this is how it works basically we have the hover effect here and we've been working on this on our last video and the side menu is responsive as well let me just expand this and you'll see if you see the icons here they can change you have a vertically placed icons and the item the site menu name if you extend it further you have everything horizontally placed and of course if you retract this to a mobile size screen everything disappears and you can use this to access the site menu items so this is what we are going to be building on this video hopefully you guys are excited well now to build the side menu there there are a couple things that we have to do before and one obvious step is to build the side menu items the site menu items are going to change depending on the screen size so the placement of the site menu items will be horizontally placed where we have the icon and the item name horizontally and vertically placed where we have the icon and the item name vertically aligned so let's create those files as well [Music] here we have it let's start with the horizontal menu items [Music] so guys basically this this is it right i know it's probably uh too much but i will try to explain this briefly here we have the inkwell widget and the good thing about the inkwell widget is that we can have the on hover property and if the hover value is true we want to change the item that is being hovered so we are going to change the item is b that is being harvard to the item name if it's not being hovered we just set the value to not hovering right for the child here we wrap this inside of obx uh because again this is an observable and the value may change and when the value does change we want to keep track of that that's why we have everything wrapped inside of obs and here we have the color of the container containing the sub menu item if the item is being hovered over we are going to change the background color to a very light gray if it's not it's going to be transparent right perfect now here we have the we have a widget which is a container which is a small bar at the edge of the screen that's going to be displayed when we're hovering on the item we want to maintain the size the animation and the state of this widget that's why we have this here right the return icon for item name we already defined this on our previous video but basically we are going to return different items based on the item name and now finally here for the name the custom text of the widget if the widget is is is not active if it's not an active item when we hover over it it's going to change from this light grey to dark right if it is an active widget we do not want to change it it's just going to be a dark color hopefully you guys understood that now let's create our vertical item the vertical item will be very similar to the horizontal one so we will just copy and paste stuff [Music] around [Music] ideally what you you would do for the majority of this widget is that you would separate them into different widgets but that would be extra time for this particular crash course that's why i'm just copying and pasting items like that [Music] so this is it we already have the vertical side menu item and the only difference here really is that here we are using this column here instead of having all of the items inside of a row so that's basically it right now that we have this it's time to create our side menu item and what happens the side menu item is going to return a the horizontal menu item or the vertical menu item depending on the screen size and this is the logic that we're going to have here [Music] so this is basically it for the side menu item if the screen size is equal to custom screen size we are going to return the vertical menu item otherwise we are going to return the horizontal menu item now let's build the actually side menu [Music] so basically after everything here is where we land right we actually have this actual side menu here right and all of this is just the design so i'm not going to explain but this part here is important because this is where we actually populate our side menu with the side menu items if you pay close attention we are using the side menu items we defined this list inside of routes right so every single side menu item that it's here it's going to be automatically populated to our side menu so let's say we want to add a new item to our site menu item so the only thing we would have to do it's coming here and adding the new item name and automatically it's going to be displayed on our site menu let's actually test all of this now now um if you test this this is going to happen actually it looks like it doesn't work but if you shrink the screen size to a small screen size it works perfectly and this is a very simple problem to solve and the problem is here inside of our side menu have this if statement right which is cool and all but some stuff here are not supposed to be inside of this widget so let's remove this column this divider and this and place everything outside of the main column and just like that voila it works it works perfectly fine maybe get rid of this and it does work the last thing to do here would be to change the color of our app bar if you come to layout remember that i told you guys that we would come back to this to the top navigation bar and change the default background color from white to light and just like that this action is working perfectly let's try to gradually reduce the size of the screen to see if it's going to affect our side menu items and it does just like that perfectly fine hopefully you guys understood everything on this video and on our next video we are starting to work on the local navigation well on this video we are going to build the local navigation and basically what we want to do here we are going to have our custom navigator that will make sure that when we change from one page let's say from the overview page to the drivers or clients or any other page would not reload the whole website but just the portion that we intend to change right and uh to do this there will be a couple steps but nothing very difficult and the step number one will be the creation of a navigation controller [Music] so here we have our navigation controller and we have the navigation controller instance right now to use our local navigator we will need to have a key that we are going to assign to that particular navigator so that the app will know which navigator we want to change the screens for example when we try to change screens we want to know exactly from which navigator we are going to change [Music] now that we have that done we need two methods one that will allow us to actually change uh screens and the other one that will allow us to go back [Music] so in terms of controllers this is everything we had to do now let's just let's just add one constant with the controller instance and then add this to our main [Music] function [Music] so this is it in terms of our navigation controller this is everything that we had to do now let's actually add our navigator [Music] so here we have our file called local navigator and it's inside helpers now here we have a method that returns a navigator there are three things we are going to need here which are the key the initial route and on generate route method let's start with the key which is super simple and the initial route on this case is going to be the overview page now let's start um creating some extra pages here so that we can actu actually see the difference you probably already have the pages folder but if you don't just create it [Music] now if you have a look here i have created all of the pages that we are going to use on the project right we may add some extra pages in the future but for the moment this is everything we need and if you take a look at the structure we usually have a folder with the page name and a file that represents the page right you are going to understand as we progress with the course why we structured this stuff like this but what we have to do now it's basically creating the widgets [Music] so as you guys can see we already have the widgets here for the pages let me just save everything now the final thing to do here is to create our is to create the on route generate function and to do that we are going to create a file inside of the routing folder and we are going to call this file router [Music] so basically here we have two functions uh one called generate route that takes a route settings and from that it's going to return a page route right and we have here another function called get page route that returns a page route it sounds complicated but let me just continue and you guys will understand in a minute [Music] so here we have the method and again the generator out it's going to take the route settings and from the settings we are going to get the route name right and if it's the overview page route we are going to return the overview page and we are going to use material page route to do that right so this is basically what this function is going to do now we just have to [Music] so this is basically everything we had to do here right we have our we have the key for the navigator we have the initial route and we have the on generate method now how do we display this on the app is very simple [Music] we go back to the layout of the app and for the large screen instead of just having this container here we return we return the local navigator widget by calling this method and for the small screen instead of having the container we are returning local navigation local navigator so this is everything that we had to do now let's try to to run this code and if you have a look here we have changes already because here we have overview but the problem here is that if we click on this nothing is going to change here we still have overview we just go to the side menu we are going to change this and just like this now we can test it as you can see we are only reloading this section of the website for the logout the process is different because when we do click on the logout item we do not want to change the things here but we want to actually reload the whole page and lock the user out that's why we have nothing here hopefully you guys understood this one see you guys on the next one hello guys on this video we are going to build the card overview section which is this section here if you pay attention to this you will notice that it's responsive as well and it changes for example when we have small screens the widgets will change if we expand it to a medium screen now we have the layout of the cards changed and if we expand this to a large screen it changes again so this is what we are going to do on this video i am at the overview page already overview file and the very first thing that we are going to do here is that as we notice for the overview cards the widgets will change depending on the size of the screen so let's create another folder inside of the overview folder and call that widgets and the difference here between this widgets folder and this is that this only contains local widgets which are going to be used only on the overview screen now here we are going to create uh three files for large screens medium screens and small screens [Music] so here we have the overview cards for small large and medium screens let's start with the large screen actually let's start with the overview screen and let's change a bit i say screen all the time but i mean page i'm just used to building screens for mobile apps let's start here [Music] now we have our first session here section here of our of of the overview page and basically what's going to happen here as a matter of fact let me just run the code and what's happening here this is the active item overview if we go to the other screens um well things are going to change a bit but this is usually this is what we want to have now let's continue working as you can see this is super down here and we wanted it to be here to make the possible is super simple had to go to the scaffold widget and here we have a property called extend body behind a bar and set this to true and what's going to happen here we still have some improving to do it vanished but that's a very easy fix here instead of a white light color we're going to set this to colors and if we ctrl save it we can see that we have the overview section here here now where we have team the theme scaffold background color we have set this to white but actually this is not supposed to be white but it's supposed to be light and if we do that this is going to happen and you can see that our project is starting to take shape let's copy the build method and paste that to the other screens and what's going to happen now is that we will get the page name automatically by using this code here as you guys can see this is working perfectly fine now let's actually start working with the cards so now here before we work before we build the card section we have to build the individual cards since this cards are very similar we don't want to repeat this so we are going to build widgets that we are going to use over and over again [Music] well uh this is everything you will need to do and here we have our we have the widget uh i don't really think there's much explaining to do here but in case you have any doubts you can ask me but this was just styling the widget now we are going to build a second one a widget the card widget that is going to be displayed on small screens [Music] so now we have both the normal size card and the cards that we are going that we are going to use on small screens now let's build our overview section for the large screen and run the app to see what happens [Music] so here we have uh the overview card the large screen for the overview card now let's see how things look like because we've been writing code for a while now the only thing to do here really is to call that widget from here but everything will have to be inside of an expanded widget [Music] and now i will run the code to see what happens here we have an error it says something about the boolean expression being now and that's a very easy thing to fix we just have to uh add a define a default value for the is active variable and here we have it if we do this now we have a problem so we have to make sure that this cards are able to adjust and let's do that now items are not centered as well to fix that just remove this here we have it now let's make sure that this can adjust to medium screen sizes and small screen [Music] sizes [Music] now this is going to be very similar to what we had what we previously had so we will copy and paste some stuff here [Music] now if you pay attention we just copied the row the main widget from the large screen to the medium screen because it's basically the same thing the only difference is that on the median medium screen for each row we only have two items so here i will get rid of two items and separate the rows now for the medium screen this is everything that we need to do let's wrap everything up by building the overview cards for small screens [Music] now here we have the overview cards for small displays and uh now we have for every single type of display the only thing we we have to do here is to have the logic on our overview screen on our overview on the overview page so that these widgets can automatically change depending on the size of the window so here instead of having overview cards large screen by default we are going to have some bit of logic [Music] here [Music] so here we have the logic it looks a bit complex but it's super simple first we're going to check if it's a large or medium screen because the funny thing about this project is that the overview for medium screens is being starts to be displayed from the custom size that's why i said that the custom size is specific to this project so from the custom size we start displaying the overview for medium screen devices else we are going to display for large screen devices and if it's not a large or a medium screen means that it's a small screen we are going to to display the overview cards for small screens and the name of this widget doesn't really look like the other one so let's change this and now we have uniformity which is good let's run the app and see if this works and if you have a look here it works perfectly fine we still have some problem here here on the small card the problem is that here we're displaying the title but here should be the value and the last thing that we want to fix here is on large screens not just large screens really but here we want to add some padding [Music] and now we are going to do the same thing for small screens [Music] now let's save everything and test it again here we have some padding same thing here and here so everything works perfectly fine on our next video we are going to build the revenue section here uh the good thing is you are going to learn how to add charts to your flutter web projects so see you guys on the next one hello beautiful people welcome back on this video we are going to build this section here the revenue section of our admin dashboard and uh it's responsive so we have to make sure we build the two versions for large screens and small screens as well as you can see the orientation of the section changes when the size of the screen changes as well to display the chart is called charts flatter you already have this if you don't you just have to add this to your pub spec file if you click on the online gallery you can see that here they have a variety of charts to choose from but on this particular course on this particular project we are going to go with the simplest one which is this one and to get the example the example code is very simple you just have to copy all of this now back to the project inside of the overview page we are going to create a new widget and call it bar chart now everything is as easy as pasting everything here uh surprisingly or not this is everything you need to do to have your chart here and we're not going to go very in-depth on how this chart works but i'll just show you how can you change the values displayed and here is where you do that [Music] so basically everything that goes into the y axis are the values these values here and the x-axis data is here so if we run this code we are going to have something like this the data on the y-axis will go here and on on the x-axis we'll go here and on the y-axis will go right over here good this is everything you had to do in terms of the chart and let's continue now besides the chart we have some data some revenue data right and let's create widgets that we are going to reuse to display the revenue data [Music] so here we have the revenue information widget now let's actually build the section the revenue section for large screens and the one for medium and small screens [Music] so basically uh this is what we need to have for the section on large screens let's run the code and see how this thing looks like even before we i mean even before we run the code there's something i have to fix here this is supposed to go inside of the list view and not outside just like that and let's run it now uh this is what you have which is not looking super good so let's fix this first of all this chart here looks strange so let's just add some random values [Music] done and one last thing to do is here on the revenue info [Music] aligning our text to the center and changing the values of our chart should do the job and perfect this is what we wanted now if we decrease the size of the screen i mean it's kind of responsive right kind of responsive but still not good enough because when the screen size shrinks very much for example for mobile devices screen size if you have a look here this is unreadable so let's change this now since the revenue for small screens and the large screen are super similar widgets the only difference really is the orientation we are going to copy the code from the over from the revenue section for the large screens [Music] but the the rule here is that if you are repeating the widget if you have to copy and paste just create another file and make that widget a different widget and call it every single time you need it now here we just have to add the logic that is going to change the widgets automatically [Music] and this is it basically we are saying here if it's not a small screen we want to display this big um this large section if it is a small screen we want to display the revenue but the small section widget let's run the code and voila here we have it if we extend this it changes so uh this was it hopefully you guys understood everything on our next video we are going to build data tables see you guys on the next one hello beautiful people welcome back on this video we are going to build this data table here using a flatter package hopefully you guys are excited for this because as you guys can see our overview section will be done after we do this so yeah on this video we are going to use this package here called data table 2 super simple to use and straight forward again you have to add this package to your pubspec file i already have that and probably you do as well but if you go to your pubspec file you'll see that we have here the data table too after that you just have to copy this code here and we're going to create a a a new file and it's a widget that's going to be present on the widget folder widgets folder that is that's inside the overview folder so let's call this available drivers because the idea of this table is to display only the drivers that are available for a ride now you just need to copy and paste the everything to be honest and if you try to run this code it's going to work we can test it out uh this is what you're going to get with the sample code from the example nowhere near where we are trying to go but already good enough so what we need to do now is just modifying the columns and the rows of this table and wrap this inside of a container just like the other elements [Music] now um for this widget i really feel like there's some explaining to do because it looks like too much going on but it's super simple here we have um the normal the creation we use for the we used for the other containers nothing special and then the child of this container is a column that has a text that says available drivers basically identifying what data is this table displaying right now here on the table on the data table right we have our columns which are name location rating and action and this you can change this depending on the data that you want to display but since this is the data we want to display on the columns this is what we have and now here we have data cell each data each data cell here will correspond will correspond to a column sorry so here we have uh the first data cell is for the first column the second for the second so the number of uh columns is the same as the number of data cells again this is the data that we are going to be generating automatically and this is a data row a data row is composed of different data cells which are members of the columns we have here the name the location this widget is going to be a star widget followed by by followed by a rating of the driver and finally we have a custom button i just uh made this but to make everything easier to understand let me just run the code and show you guys what what we have now here we have the table right and as you can see these are the columns we defined the name the location rating and the action and uh the number of rows will be seven because we have this line here that says generate this is basically the number of data rows that we want to generate which are seven rows and now uh here are the data cells right exactly like this right so this was everything for this video to be honest and uh the overview section is complete if you do something like this and let's shrink this to a mobile size screen you'll notice that the table is responsive by default right and here's the other data maybe we could improve this but that's not a major problem but here we have it now on the next video we are going to display tables on the driver and the clients uh pages as well we are just going to copy paste to be honest since this is just some simple data it doesn't have to be accurate right so after that we are going to build our login screen and uh in terms of the ui i think that that will be it hello beautiful people welcome back well on this video we are going to build the drivers and clients page now this this is going to be a very short one because this is a very simple this will be a very simple thing to do so now i've created the custom tables for the driver and the client and they are both inside of the widgets folder for those respective pages now the structure of the pages is extremely similar so um i just went ahead and copied the available drivers table we rename that to driver table and we can remove the column and place and just have here the data table now the only thing to do really is to call this widget from the drivers page and we are going to do the same thing for the clients page [Music] now uh let's create the clients table and rename this one because this is not the table we are going to use even though they are very similar okay let's save everything and see what happens maybe we can change the names here of the buttons [Music] okay this is everything that we had to do here and we are basically done the only thing left to do really is to create the authentication screen and you have block driver block client so that we can actually see that there's a different tables and this is it let's create the authentication screen now people welcome back to the class uh on this video we are going to build the authentication page and make it the default page of the project it's going to be super simple to be honest nothing crazy here we are just going to build the ui to be honest so this video is kind of optional because you're not going to learn much new to be honest but anyways if you enjoy watching it just follow along and let's go [Music] so um this is everything you need for the authentication screen and i know it's it looks hard or like too much but it really isn't now what's left to do is to make this our default screen and make sure we can access this from the overview screen and to make that our default screen as you guys may already know it's as simple as changing the home here to authentication page now uh the last thing to do is to go to our side menu and right here and this is basically it as you guys can see here we have the perfect example of the local navigation down here and a global navigation up here let's save everything and see if it works we have a problem looks like we have a problem let's wrap this and run the app again problem solved and the last thing here is with the button problem solved and this is our authentication screen all of this code translates to this and if we click on login we can [Music] come here and let's try log out just like that it works perfectly fine if you made it this far i believe that you are already more than ready to build your flutter web applications uh the next sections will be extra classes right on um advanced navigation and introduction to firebase welcome back on this video we are going to have an introduction to url navigation using getx if you can see now we can have the route of the page here and if we go to our main page here the route is going to be empty because it's the main page if for example i enter something that doesn't exist here we're going to have the 404 page not found and let's say we want to go back to the off page you could do it just like this off so this is what we are going to build on this video okay let's do that and you guys will understand in a minute here we have uh the routes file and let's modify this [Music] so here we have it we divided each route or menu item into the display name and the actual route that is going to be displayed on the browser [Music] and here we have the class representing each menu that will represent each menu item now here where we have side menu items instead of having a list of strings we are going to have a list of menu items [Music] and this is everything that we had to do for our for the routes and now we have this error on the side menu which is natural now let's save this and fix the issue on the side menu file here we have opened the site menu file and this are the box let's fix this the good thing here is that there's no long we do not have the need to have the logic here now just call the item name and everything that's sorted uh the other difference here is that we are no longer working with the normal get right we are working with named routing that's why we changed the previous logic here to of all named and here we are uh inserting the authentication page route we are passing that as a parameter to the off all named method so first we place the we change the name of the active item to the overview display name right and this is done because after we log out if we log in again if we do not change here the name that's going to be displayed on the overview screen or section is log out right it's kind of a bug that i find out when i was building the project so this will fix the issue you don't you don't even have to see what's the problem this is the solution fine uh you just have to change item dot you just have to replace where you had item name like this with item item dot name right and now in here is the same thing we want to navigate to a route that's why we have here item.route the final thing to be changed is with the menu controller so here where we have overview page route we want to change this to display name and do the same for the reminding for the remaining values now we have this we are ready to test the code let's see what happens save it and run it so here we have the code but again nothing happened here if we click on login we have another problem this problem here now it's solved okay we still have some issues to fix and if you do something like off for the authentication page nothing is going to happen let's fix the first problem so we are we are changing the the active item from the route to the display name as well and this should fix the problem now we want to make sure we are able to navigate using the names using the routes here right but before that let us build the error page so that when a user inserts a route that doesn't exist it takes it takes the user to the 404 page now to make that possible we will need to add the file the link of the file will be in the description of this video somewhere in the lesson probably down below we have created a new folder and we have that on our spec file now this is the file that we are going to display on the 404 page again i have linked this to the lesson i'll just drag and drop it and that's everything you need to do now we are going to create a new page so here is the page called error page 404 is the error [Music] so here we have the page very simple we just have the image here and text same page not found the final modification that we will do is here on the main.dart file [Music] since we are going to use named routing here we have to define the initial route and we can remove the home property the initial route is going to be the authentication screen for our case the unknown unknown route property will be responsible for displaying the page not found if the user inserts an announced route [Music] so again here we have defined the initial route the unknown route and uh what's good about get x is because it has a lot of features built into it for the get page you can define a property called transaction transition sorry transition and here the transition is fading but you can have a multitude of transitions here and for the get pages basically what you're doing here you are assigning a widget for a route for every single route the user inserts on the browser so what we are saying is if the route is the root route we want to display the site layout but if the route is the authentication page route we want to return the authentication page widget very simple super straightforward save everything run and see what happens right off the bat you can notice that now we have the route name here okay the rod didn't change which is a problem but i imagine what happened if you face this kind of issues where you change the rod but it doesn't update on the browser most likely the problem is this and i'll show you in a minute this only works when you are working with the name named navigation or named routing so every single time this is what you have to do when you change screens you have to use named routing and this changed something happens here if you change here nothing changes here but this is because the site layout didn't change we are changing the widgets inside of the site layout that's why the route here is not being updated if we log out we go back to this one let's try to create a route that doesn't exist and if you do that this is what you'll see page not found right so this was basically it for this video an introduction to url navigation on flutter web and i will follow this up with more advanced videos but this should be good enough for now now let's learn about firebase and deploying the website and guys here we have it we can just click on sign in with google insert our email insert our password and voila we are in this video comes with a written tutorial you can go to medium and read the article alongside with the video link in the description section so guys to start our project off you are going to type the following command into the comment prompt or terminal from linux flutter channel beta and what this is going to do is change your flutter main channel to the beta channel and then after having that done you're going to type here flutter upgrade to get the latest version of flutter and finally you're going to type flutter config hyphen hyphen enable hyphen web to enable flutter web into your system to make sure that everything works you'll need to type flutter devices and here has the results you should be able to see chrome here meaning that flutter web is enabled good after having this out of the way you are going to android studio or visual studio and create your flutter project as you usually do and after having your flutter project created here you'll notice that you have this new folder called web basically this is because flutter web is now enabled and to run this you'll have your flutter run hyphen d chrome and just like that here you have your flutter web but since we are trying to save some time i went ahead and created this flutter web simple ui and we are going to start our project from here to get this is very simple you just have to go to my github repo here on branches select branch and select the starting template branch or just use the link in the description section after you have downloaded the project you're going to see something similar to this and no need to worry there's no backend code here only the ui now open firebase and create your firebase project disable analytics because we are not going to use that for this project go to authentication and enable google authentication here after that we want to enable cloud file store using our test mode then let's add our web app here by setting a name for our web app and then we just need to copy this html code into our project open up the web folder and index.html and copy it here now to complete the firebase integration copy these two tags to the bottom of your html file here copy this tag to the head section of the file to enable google sign-in on our website here we will need the client id to enable sign-in so let's get the client id go to the google cloud services website and select the firebase project that you are currently working on go to credentials and where it says off 2.0 client ids you can go and just copy the client id come back to the index.html file and replace the client id with the actual client id you just got from google cloud services go to pubspec.yaml file and add the following packages provider shared preferences firebase core firebase off cloud firestore and google sign-in inside the lib folder create another folder called helper and inside of helper create a file called constants.dart and inside of this file we are going to store constant values throughout our app values that are not going to change and that we are going to need in different files let's start off by importing some packages that we are going to use here define a variable called initialization to initialize firebase app firebase firestore to have an instance of firestore and off to have an instance of firebase authentication let's create a folder inside of lib called models and inside of models define a file called user.dart inside of this file we are going first of all to import the packages that we need and we are going to call the class user model then start defining some constant values that are going to be the same as the fields on our firebase collection we have here our private properties and we're going to access these ones using a getter and we're going to initialize the values of our properties using this named constructor now create another folder inside of lib called services and inside of services we'll define a file called user.dart inside of this file we will start by importing some packages first of all we have the constants we just created this file the user from the user models and finally cloud file store and then we'll define our class called user services with collection being the variable called users basically this is the name of the collection that we are going to access on firebase and the first thing we want our users to be able to do is to create an account so we'll create a method called create user as you can see this method takes three arguments the id of the user name and photo of the user now we will use this code to create our collection on firebase or insert a document into our collection if the user's collection is already created since we will need to retrieve the user from our firebase collection we are going to create this method which is going to get the user by the specific id this piece of code will return our user inside of our collection using the document id but this is going to return a document snapshot and the get user by id method is a feature that returns user model so we'll have to convert our document snapshot to a user model we already have that code and we are going to do that by writing here user model dot from snapshot and we are going to pass the document snapshot has an argument here now we need the method that's going to check if the user does exist and if the user exists returns a boolean and our final method will just get all of the users from our firebase firestore collection but again this method will return a list of document snapshots and what we need is a list of user models because our get all method will return a future list of user model so to make that possible here inside of our then we will create a list of users and then we will create a for loop that is going to iterate through our result which is a list of documents and we will convert all of those documents into user models and add them into our users list and finally we will return our users list now inside of the lib folder let's create another folder called providers and inside of our providers folder create a file called off dot dart again we will need to import packages here into our file and these packages are going to be used inside of our class now here we declare an enum and what this enum is going to do basically is to have the different status on which the user can be in basically our user can be uninitialized and authenticated authenticated or authenticating here we have our provider which is a mixing of the change notifier class and now we will define some private variables that we are going to use here inside of the off provider and the corresponding getters so that we can access those private variables outside of our provider here we have our named constructor and our named constructor is going to be called as soon as we create our provider and inside of our named constructor we have this method called firesetup which is going to keep track of the authentication status of the user inside of firebase and here we have the definition of our fire setup method inside of it we are calling initialization and then inside of the initialization we are quite we are calling off dot of changes dot listen basically we are listening to changes inside of firebase in terms of the user authentication and inside of our listen we are passing a method which is called on state changed and what's going to happen here is that when the user state changes on firebase something must be performed that's why we are calling this method here and again the method is not defined yet that's why we are having this error but no problem we will define this method in a second and now we have this method here signing with google and it does just that signs the user in using google the first thing we have here is a try and catch statements and inside of our try we are going to define a variable of the type google sign in account call it google user and it's going to take an instance of google sign-in and underneath that we have here google in authentication we are going to call that variable google off and it's going to take an instance of google user dot authentication now we define a variable of the type of credential and assign that the value of google of provider dot credential this method takes parameters access token which is equal to google off dot access token and id token which is equal to google off dot id token and now we are going to call sign in with credential from off firebase off this takes the credential variable here as a parameter and it's going to return a user credential in here we are going to assign our user which is our firebase user to the user credentials.user and then we are going to set our shared preference key id being equal to the user id and then we want to check if the user does exist already if he doesn't exist what we are going to do is calling user services create user which is going to create our user inside of our collection and if it does exist we'll just initialize our user model and then we will return a map containing two key value pairs which is a success status and a message here we define our initialize user model method by setting a variable called user id which is going to get the value from our shared preference id and then we are going to do user model is going to be equal to await user services dot get user by id after that we want to notify listeners of the changes made and check if the user model is null or not if it is null return false if it's not now returned true down here we have our method that's going to be responsible for signing the users out which is just calling off dot sign out and change the status of the user to unauthenticated and notify listeners and return a few you don't need to return the future here you can just not return nothing i just did it for the sake of doing it our final method here is on state changed which is going to take firebase user as a parameter and here we are going to check if the firebase user is now if it is now we are going to set the status to unauthenticated and notify listeners if it's not now we are going to assign our variable user to firebase user initialize the user model wait for two seconds and set the user status has authenticated inside of the provider package we are going to have another file called app.dart and basically this will keep track of the app status for example if we have something loading inside of our app this provider will notify all of the files of the app that something is loading uh inside of the provider we are going to import material.dart and we have here app provider has the name of the provider it only has one variable called is loading and one method called change loading meaning that if the app is loading and we call this method the app will stop loading and if it's not loading it will start loading now opening our authentication screen we are going to import these packages here and then we are going to declare app provider variable here and off provider as well now the logic actually is going to be here inside of our gesture detector where we are going to call app provider dodge on change loading to make sure something is loading and then for our map result we are going to assign it with the value of the sign-in sign-in of google result and take the result which is a map and assign its values to two variables one boolean called success and another one called message which is a string on our if statement we are going to check if signing in with google is not successful we are going to display a snack bar into the app and if it is successful we'll just stop loading and change to the home screen now the last step here is to open up dart dot main file and clear everything that it's inside of the file and again we will start by importing the packages that we are going to use here as always and then we will define our main method inside of our main method which has to be asynchronous make sure that we are calling initialization and uh this is for firebase app initialization and inside of run app we want multi-provider so that we can register all providers at the highest level of the app right and now as a child here we want material app and the title of our app is going to be chatroom we have here the theme data and a new widget called app screen controller and this is how we are going to control which widget is going to be returned based on the user status and it's all done inside of this switch statement believe me or not the only thing left to do here is to run the app just open up terminal here and write flutter run hyphen d chrome hyphen hyphen web hyphen port 5000 and you have to do this to make sure the app is going to run on the correct correct port and everything is going to work and guys here we have it we can just click on sign in with google insert our email insert our password and voila we are in

Channel: Santos Enoque

Views: 86,987

Rating: 4.9620781 out of 5

Keywords: flutter web, flutter web development course, flutter web crash course, flutter crash course, flutter course, flutter tutorial, flutter tutorial for beginners, flutter responsive ui, web development, flutter ui

Id: i6gFRSnE6Ro

Length: 191min 52sec (11512 seconds)

Published: Wed Jun 23 2021