From Beginner to Advanced: Master Flutter Firebase CRUD with This Ultimate Guide#Malayalam #Flutter

[Music] hi I'm going to explain all the concepts of Firebase especially the cred operations and uh I'll talk about the Firebase rules okay so welcome to the video and this video is for absolute beginners uh beginner Ser okay so we are not going to build anything complex we just building a to-do app okay so uh let's move into uh some coding okay okay uh before starting the video uh I'll give you an introduction about what is Firebase so you all know Firebase is a platform for uh app development like uh you can go to go into Firebase okay now you can see Firebase is an app development platform that helps you to build and grow apps and games users love okay so uh simply fibus offers a lot of services uh for uh for your [Music] like can even website on hosting different analytic machine learning okay and as you know okay already go to console and you can go into the console and this is your Firebase console I have already lot of projects here okay so I'm going to create a new project here you can give any name here I'm going to have to app and you can click continue then uh if you want you can go with this crash l or analytics then then off you do then click the create project button okay uh it will say take a bit of time uh depending on your internet speed okay so uh it's creating uh once it uh gets completed you'll get a continue button there then you'll uh be redirected to your actual uh uh console that means the project uh dashboard then you can click on the continue button now you are redirected to the project dashboard and this is the uh dashboard and here uh you can see different uh options you can add an IOS app Android app and you can have web app then uh Unity is there then flutter is there and either project okay then offering the different Services right now you are in is free absolutely daily read operations based authentication email password based authentication different it will get reset can cck on the upgade but spark plan okay and right now we are going with the spark plan okay okay now and we later take the terminal and you have to click here uh and type Firebase login okay and uh already Lo and take the command I have some issue with the power okay Firebase Firebase login okay now already L you can give the permissions then Lo and they're asking me to upgrade this I'm not going to upgrade right now okay okay if you are connecting for the first [Music] time uh steps I have already done a video on how to connect firep using CLI if you have any doubts you can go and watch that okay that's a simple video half one hour video okay that will be worth watching okay if you are a absolute beginner so click the uh write the command flat fire configure then prer okay currently l you can use up arrow down arrow to navigate through the list of projects okay I want to connect to this to-do app then press sender now they'll ask you uh which all apps you have to uh you want to register Android iOS okay and Mac arrow down arrow if you want if you do not want a particular app you can click this space bar okay and after that I'm going to connect everything then click uh press enter okay now they are registering your app okay [Music] goic now it is very easy to connect to Firebase okay initial set okay and if everything is completed okay this is what they have done web connected Android connected iOS connected and they provided the IDS okay [Music] and you have some files okay and let's check the files app let's try for this Google services. Json it's not come here let me close this project and take once again and Android Studio then take file open then I need to go to my studio projects folder go to Studio Projects okay and and take the to-do app okay this is the project and click okay open in new window now you have Google services. jsn is there then come down inside your Li they have added a folder no it's a file fire options okay now we need to depend upon some packages service P boree page you can add that flutter Pub add fire basore core and fire authentication fire bore and we need to use and you need fire Cloud fire store Cloud uncore fire store and these are the packages we are currently going to utilize okay and click end and never forget to leave the space after every package then press enter okay and now they'll fetch that package and added it to your pop spec you can manually do this come here po dependency under let me clear all these things uh for more readability okay uh I don't need all these Comm okay then add the dependencies dependen automatically okay thisn it will take some time network connection success or so that that is an asynchronous operation make your main function async function then after that come here uh write this uh flutter widgets binding I'm not getting my intelligence let me reformat this thing time p widgets flutter binding. ensure initialized okay now you have to import this configuration to this uh main function that configuration is uh here in fire base options these are uh this class contains your platform dependent uh Firebase configurations so you have to write uh write something uh in your main function and if you uh don't know exactly what to write you can come here and flutter to Firebase okay then go to uh go to the official documentation there you'll get everything you need okay now my search engine is changed to yeah okay f p okay then uh in this documentation you'll get uh what are the what are the different steps to connect your Firebase then uh you need to add this thing okay then initialize your app a wait Firebase do initialize app then uh options default Firebase options current platform click on the fire and this Firebase class is coming from the core package Firebase core import now that image is vanished then this default Firebase options okay that's it I'm sure that you are going to get an error but okay so let me take my ulator okay then start the emulator then ulator okay you can run it okay let's wait for it to be launched on your emulator or most probably you're going to get an error here [Music] okay that means build tool there are different build tools like grad is there MAV is there different build tools man okay and this is purely Android probably get okay we have to change some configuration changes in your Android uh number of methods in the size it if it exceeds 64k you should ensure that multiex is enabled okay and where do you uh enable uh that go to your Android folder then take the app folder you'll get a build. grad this is called app level build. grad and build you have a build app level build and come down defa uh you have to type this thing multi M small letter multi D Capital Dex enabled okay and make it true then uh Firebase function minim I'm going to have this 21 okay I think SDK version latest Android SDK 34 and and [Music] 21y be that me support make sure that you are you have uh minimum SDK 21 then the target SDK version you can make it 34 Target SDK version 34 because we need to install this app on the [Music] latest okay that's it then on top of this build you have a compiled SDK version and you have 34 and name this is actually your package name I haven't changed that manif function manifest and this is the heart and soul of a uh Android app every time and uh when your app runs the Android engine is going to check this thing which one is the main activity initial then this is a label you can change this label you can do this to you can make this to to do uh to do app like this okay then icon home resource go to MIP map MIP map is actually residing inside your resource folder resource you have an IC launcher.png and no need to write PNG here and this that mapping will automatically handle hand and you can see and if you want to change that you have to change screens normal LCD screen T screens screens that should be more clear image pix can all these files you can change the icons okay and okay let's wait okay inst okay there is no errors here uh as usual okay and and now this app is connected and go to your fire console refresh this page you can see three apps are connected uh I'm going to implement a too app just email password Okay click on this email password and enable this after this save this okay that's it authentication then this is right now no datab inst and database especially datab different data datab model Network model relational model object model and [Music] documentation and this is where it is applied no SQL database docent model now you are going to create a fire store instance now the location is United States if you want you can change the location make sure that you selected the proper location then click next okay now you have two modes one is production mode and another one is test mode production mode client can read write access will only be granted as specified by user security rules you can have write the security rules then production mode uh your data is open by default special security rle I'll talk about this rules very shortly what are this rules right now I'm going with this production mode then click enable you are going to create a Firebase fire store instance no SQL database inst so uh it is setting up your security rules and security rules relational database model management normalization concept normaliz first normal form second normal form third normal formal are some other rules it depends both both of them have its own advantages and disadvantages sometimes you can go with thatb and if you want a cloud fire store noq Bas you can go with that okay datab see I'm going to create a collection then click next inside the collection you can have documents then automatically collection is actually a container for different documents any number of documents are every document has got a unique ID so I just generated a Auto ID then docent key value dat for example I'm going to store the name then uh the type of that uh field at is string and you will get the drop down here different type of right now I'm going to give my name okay my name is Jin okay okay then add field then I can have my age here age I need it as integer so I'm going to pick number integer floting Point numbers decimal numbers FL number double numbers see I'm going to have my age here see I'm going to have my age okay then add field then uh one more field C field and that should be uh okay then save it this is actually a map you're actually fetching key value p you have another document you can't have the same ID and then I'm going to have a name Ajit then uh the AG is give an age and Ag and the course again that should be some other course okay what isor here Ag and number number save it now you have second document some people ask me okay how will you achieve this normalization normaliz keys are repeating this is entirely a different different domain you can even start a sub collection inside this [Music] thing straight forward you have to study this thoroughly especially this let's talk about the rules rules and you'll get a rules playground here if you want to open this make this true true then publish that okay it's most important thing simply I just opened it always okay then authentication Firebase uh that fire store enable Okay and uh I think you got an idea about what is uh this fire en straight forward St bucket means a space storage first I'm going to change the rule make it true okay then publish it okay and I told you you can write your own rules here then go back to project so let's create I don't need all these classes let me remove this and let's create a login log view okay and we have haven't created this class and come here let's create a new directory called screens and this is a basic tutorial then I'm going to have a folder called models models then come here a new folder again that is called Services okay then uh these are the folders and if you want addition folders create I want AET folder here for utilities folders then inside the screens I'm going to have a new DOT file that is called loginor page okay and import material and this is a state widget create let's create a login view this is a class name class name l view okay let's import that class here login view okay then uh I'm going to reboot this and you'll get a placeholder so I don't need this comment then come here and this is going to return isold okay then save it and I don't want that uh debug Banner debug show check mode Banner that is false okay then let's write scaffold background color that should be color okay let's take a color let's take one color color means uh let's copy some colors okay I need to create a uh login page here so come here and inside the body I want a container then give the height as infinite height the width is infinite okay and the child should be a column and if you are not comfortable with uh the UI and please watch uh my basic UI videos okay column list View see initially I need a text here text should be uh log to just uh log in to your account okay then uh save this now you have that login to your account inside your inside your uh here inside your scaffold and let me style this thing let me write a style here I'm going to have a text theme that should be coming from text theme okay and I need different text display medium the text style the color should be white and the font size should be 18 okay then come here I need to apply that style here so let's access that here final theme data equal to theme do off context okay and Here style theme data do text theme do display medium save it now you have here log to your account and I need it to set cender column main axis vertical mainis alignment cender and the cross AIS alignment is also sender now uh at the middle of your page you have log to your account and after this I need a text form field so I'm going to have text form field okay text field text form field text form Field Val Val okay let's write uh the decoration that should be input decoration okay in hint text enter or simply email enter email save this now you have a box and it won't uh look like text that is also coming from theme data. text theme do display medium okay that's a bigger one if you want to reduce the size you can come here and write display small here need a 14 size and the color should be uh White is it's not fully white but save this have Edge inser do all I'm going to give a 20 padding now you have a smaller box and if you want a space between these two thing add a size box here height of 20 okay save this next you have a space here and different state now it is enabled State Ena I need outline input border okay and you have the Border Side that is coming from Border Side the color should be uh White okay then you have border radius I think uh White then outline input border border radius and that should be circular circular of I need a 10 radius now it's not coming from radius circular border radius border radius circular now you have a box here and I have already done a video on text text fi you can just copy this and place it here and is going to be focused border focused border okay you have the curs inside this thing but FOC and you can have that cursor color that should be colors dot I'm going to have a color called have let me Zoom this a bit okay now you can see okay controllers let me create the controllers here on top of this page I'm going to have text editing controller text editing controller underscore see I'm going to give this as email controller and always try to append meaningful variable names or instance names this is for a controller email story controller email controller that is a private thing that's why I started it with an underscore then uh that will be email text editing controller okay now I need one more container and if you want to copy this thing just press control D and if you are in vs code control shift alt down arrow it's not control shift alt down arrow okay then this should be password okay then uh actually we need a key so final underscore login key equal to key Global key and it is going to have the form State okay then pause that key here wrap it with a form I'm going to wrap this with a form a widget called form then uh it's form okay then pass the key here key underscore login key and I need a validator validator okay [Music] valid value dot is Val is so right like write like this you need to return enter and email ID I need one more thing here and let me copy this thing Cy and make some changes controller password controller and value enter a valid password enter a password enter or password is mandatory password is mandatory okay then enter this should be enter password okay then save this you have two boxes here and I need a sized box in between them so click add size box here save this now you have a smaller Gap and so I'm going to have a container here 4 which should be 250 width the decoration box decoration and I need a color colors dot give a color background color teal then save this now you have a box there then I need a border radi of circular 12 10 okay now you have a box then I need also a gap here come here paste it here now you have a gap child should be a center widget that should be a text okay and inside that text I need login and the style should be uh theme data text theme do display medium now you have a login here login button that's make it true you can have a style here it should be theme data te data te data text them do display small I think uh this should be display small and okay typ color save this you can try that okay so I need a row here row children uh I need a text text uh don't have an account need a size 10 and give a text here again text and that should be create now okay save this you can have a style here text theme data. text them do display small now you have don't have an account there then after this I need uh style text theme do display large I think that should be display media okay now you have create one I need it to be in cender so this is a row you can have main axis alignment center now it is in Center I need a gap here so make a gap save it okay and if you want more Gap you can give 50 no it's a bit lower okay and you can build beautiful [Music] okay so let's create a page for registration click here new. file register page okay I'm going to copy the entire thing from here name refactor rename that should be register I'm this thing also be okay now create an account so create an account okay then enter email ID that's it okay email ID and password okay then confirm password conf password I need one more field here and after this after this box I need this thing cut this out and create one more fi should be name controller name controller and enter your name okay Enter name okay I'm going to write Main have r a key value okay that should be context and the second one is slash register register that should be uh like this context register view [Music] okay with the widget I'm going to use inl inal then uh after this put a semicolon save this now you have n check operator used on N value just reboot this thing create now now you have the register page create an account already already have an account then okay with Widget W with the widget again in use the in in then on okay navigate Navigator dot you can have pop context okay now save this and if you go back go back create go back you'll get this page and if you want back here AB bar AB bar abar okay now you have an back arrow there create account now you have a back arrow you can write abar theme abar theme the background color background color that should be exactly like this color okay and save this now you have a transparent I dat color should be white okay now you have your icon go back and this icon can be ionl okay that's it LO page home too homecore page okay and this is also a stateful widget stateful widget to do homepage okay and this is also going to return is scaold and body a container the child should be a column okay children and this is the basic scolding height infinity infinity which should be Infinity okay then uh give a padding padding Edge inser do all 20 okay and I need a row uh something like this okay I need to show something like this just for okay after this uh I need a floting action button here adding the have button then [Music] delete okay I need an I need a ra here okay the children just passing a text here jop in or one more thing and this should be hi and this should be Jobing okay and I want to see this thing create R here home that should be context to to home to do homepage okay and the initial route should be home okay let's reboot this thing and this should be inside initi and [Music] access the theme data how you can how it is possible to access this theme data here because material theme date off te off cont sty should be the theme data theme data dot text theme Dot and that should be display small now you have a text I think I have an error somewhere wait let's take the analysis tool then then let's reboot this thing again where is eror okay and that uned UT is okay now you have I need an abar here abar abar okay so that that is automatically inside should be high should be small and the style should be Tex theme display medium okay so I have job in here I need a space in between this thing so size box uh size to box width uh 10 okay and after this thing uh I need this thing to be in an entity and the child should be again a row you'll understand why I'm doing this thing children and inside this thing right side I need a circle over there okay now save this you have two things here and I need this to be a [Music] circle so let's have this to be also medium okay then save this both are same okay I need ating action button so create a floting action button floting action button scold property that should be floting action button fling action soting action button should be an icon then icons do add the color should be white white save this now you have a floting action button here and I need the color of this floting action button that should be a teal color save this now you have a floting action button just remove this break point okay add box with height height of 15 okay then I need a text here then that text should be uh your to and the style should be team datop team dat display Med okay and that import import is because it should be start and the cross axis alignment should be start now everything should be in the left side okay I need this to be in a list view. Builder okay if you are not comfortable with your if you don't know what is uh list view Builder and I have a dedicated video for list view Builder I I just explained everything about list view Builder that's an old video okay so this is going to put a here this is going to return and this is going to be a list tile okay list tile okay then you have to specify how many items how many times okay then I'll show you that text to do one the style should be style should be theme data dot Tex display okay now you have an error here this this is called render Flex that [Music] means it is like AUM full height full height this list builder needs full height this column can't Supply that much height because there are other child [Music] also with okay now you have your list tiles here okay or I think you can have string grap string WP true okay then let's try to remove this thing remove this widget and save it you have a leading icon leading I need something called uh Circle the child should be an icon then icons dot okay I need a circle icon outline Circle and the color should be white okay save this now you have a circle icon and the color should be color is white circle out background color should be transparent okay now you have a circle [Music] okay you need a subtitle also here subtitle that should be a text again let me copy this text text text and this is to do one data complete the assignment as assignment before 10 a.m. tomorrow okay then save this and you have that thing here let me Zoom this okay and you need a space if you need a space between these two to-dos and uh this title uh take a space size to box here then add that size to box here save this now you have a small amount of space okay then I need a trailing icon so add the trailing here trailing and that is also I need a row here because I need to add two icons children and this should be first one is icon I'm going to have an icon buttonit edit and save this you have because it with a container give it a constraint and this should be uh 100 width okay and this should be 20 okay 20 is not enough I need F50 okay and I need to add one more icon button save this and put a comma here save this now you have an error and this enough it is not enough width there is not not enough width so give it 100 it's not, 100 okay and now your list is ready need this to be a delete icon delete okay and the color should be color should be red okay and the color should be the teal okay now you have a delete icon I'm going to return this with a card the widget called card save this now you have something like this and the background color you can have have that scaffold theme scaffold background color access now you have that thing I need a with opacity 0.5 0.2 okay and 0.2 okay I have a small shade here then elevation just elevation so sorry this should be card elevation 5.0 now you have a small card like appearance you okay and if you don't need that shade and you can have a different shade now you have something like this okay this is more beautiful than the other thing okay and this is what uh we need I going to prepare a new screen okay then okay and I'm not going to apply any State Management if time permits State okay it's not okay okay add task underscore page okay then I'm going to import material package then State full widget on add task view okay then this is going to return again is cold okay let's have an app bar here appar appar okay so e button cck I'm going to create a new route here that should be add task and put a comma here then I need add task view okay okay then come to to-do homepage and find that floting action button and this is the floting action Buton Navigator push named that should be add task okay and make sure that uh this name and this name is exactly same okay and Save this click here now you are inside your add task page and you can go back from here okay now uh come to add task page and the body should be a container height is infinite height which should be Infinity the child should be a column okay then the children I need some text Fields so initially I'm going to have a text uh add task and this is going to be access the theme data theme data equal to theme do off context okay then we have to style this theme data no this should be theme data do text te do display media okay I think we have an unwanted input okay so take this theme do off context why we haven't final theme data equal to theme do off context take this from here it's actually here okay then save this now you have add task I need it to be in the left side so give a padding EDG insect. all of 20 the column alignment it should be start and the cross axis alignment is also start and save this okay and uh under this I need the form so have a size to box here height should be 20 then uh let's add a divider here uh make things beautiful divider height should be two and put a comma also here okay then the color should be uh that teal color okay then save this now you have an underline here then uh let's add a small size to box here size to box height of five okay and put a common also here then I don't need two commas okay now you have a uh small underline Okay small gap between these things and if you want more width uh you can increase the width okay then uh divider has got intent that means a small line and under that I need the fields text Fields text form Fields okay and I think I have two PS here okay then come here all the sized box are cons things so you can add a cons here uh for removing that yellow underlines okay see it is okay now padding is const okay then divider you have you have cons value okay then come here add the text form field okay you can copy that text form field because we already created a text form field in the login page and registration page and copy a text form field from here okay then paste it here and you have errors because uh this controllers we haven't defined it so come here Define that controllers text editing controller underscore the title of the task title controller equal to text editing controller okay then you need a description controller okay description controller then pass that controller here this should be underscore title controller then this is actually title is mandatory and I don't need that obscure property here and enter task title and save this now you have a box here I need a gap here and this should be a 20 cap okay save this okay now after this I need the description controller paste it here then add a size box also in between these things contrl c contrl v i don't need 20 and let's check what is the size box 10 Okay so so I need a 10 value here now you have two boxes and the second one it's for description so call that controller description controller and description is also mandatory mandatory and enter task description task description save this okay now these are the two Fields uh we have then I need a button and copy this button and you have a button here so copy this I box and the button then come here you can make these things uh reusable components and I have done a video on that how to create reusable components now you have the button and if you want this to be in cender make this wrap this with a cender widget now the button is in cender okay and I need more Gap here okay 20 okay so this is the uh this is your ad task page and uh of when you click here uh you have to add the task to the fire page okay okay so uh these are the different fields uh we need and we are going to utilize this also for the edit task and now this is add task and uh if you are editing task this title should be edit task okay and this should be uh this is not uh login this is add task and if you are editing this should be update task okay okay now let's play with the Firebase okay first we are going to create an account so take the registration page and I I told you I'm going to uh show you different ways uh the most primitive way and bit more advaned and this is a button and this is just a container this is not clickable so I'm going to wrap this with a wrap this with a widget called just a detector or inqu okay and come here write the ont okay and here I'm going to check whether all the fields are filled so user key do current state do validate validate validate if everything is okay that means this is going to return a bu value if every every validation logic is true uh you'll get into this block here I am going to see I'm going to save this and go to the registration page and if you want to show the registration page make the initial route as slash then save this and reboot the app now you'll get your initial page and click the registration uh create button and click here now you can see uh you got the error now click here I'm going to have the values uh jobin at G gmail.com okay the password is 1 2 3 4 5 6 7 8 and the name is drop okay then click here so the text see Tex and make and remember everything should be string text dot create user with email and password you have to pass the email email is coming from email controller. text and you can trim it unwanted SP accidentally typ un then this should beore password controller. text. trim creative let's try this okay I'm going to click this login button Lo but okay then uh go to your authentication collection then uh refresh this page let's check create I know no it's not created here why so let's save this thing then click the login button again okay then come here refresh this page now you have an entry here passw signed all this data is actually getting back that means it is called user credential user credential we need to await for this thing so that me now successfully notal that means you are successfully registered and signed in do instance do collection okay give a collection name inside codes col I need to have users then doc okay document we need to set the values user call Dot you got the uid user data do user dot you can access the uid okay map key value I need that uid I need to store that uid so you can access that user data do user. uid then I need to store the email and that should be successfully log user email okay then the name field name is actually uh the controller value that should be name controller. text and normally databas we have some values created at that should be date time time stamp time now okay and we need the status status is I'm going to have a integer value actually passord we need to either already we need to have a navigator call a navigator dot push and remove until or push named and remove semicolon to okay that's uh let's reformat this thing and this is what uh This Is A Primitive way let's try I'm going to remove this thing delete account delete okay then uh come here then click the login button actually this is register button it is created actually uh Firebase user data not equal to n uh users cre uid then SL home and check this thing uh main door that is SL home that is to-do homepage okay let's reboot this thing and once again delete this account then come here create account actually we need this to be create it is not log this is create account save this okay let's fill it again jumin at gmail.com gmail.com The password should be 1 2 3 4 5 6 7 78 and make sure 1 2 3 4 5 6 7 8 then the name should be jumping create now you successfully logged in authentication entry and go to firee fire store fire store and you have a user with ID then another user with another uid and this is uh 647 and this is 649 so delete okay you can delete that document okay now you have uh successfully logged in okay Circle I'm going to have a child that should be and icon icon button okay icon button and then on press on Anonymous function the child should be icon icon should be icon this should be icons Dot sign out I think this is log out log out okay now save this now you have a log Buton if it is Success we need to move into now we do push and remove until and we need to go to your log home and I think you need to have a semicolon here okay save this and click here now you just signed out sign out and if you want to check that you can access some something like this uh I'm going to have a final user equal to final user equal to fire base o do instance. current user okay and print [Music] user dot uid okay because it is wrap with wrap with a widget that should be ink well okay on tap then call the Firebase or. instance. create now you need to do sign in with email and password that is coming from email controller. textrim password password controller. textrim okay you are getting the data user credential user equal to this thing or user data equal to and this is all Al an as synchronous operation so await and so that this is a sync okay now you can check here uh successfully Lo if user data not equal to null then you can have uh you have to go to no I'm not going to Firebase firee now we get dot push and remove until then the route should be slash slash home okay slash home then put a semicolon here okay then let's try with that email ID jobin at gmail.com and the password is 1 2 3 4 5 6 7 8 then click the login again now you are inside this homepage and and this runer flux error is because uh I think you need to wrap this with login page no we'll check we will tackle that later okay now I'm going to put the log out here log out now you can see uh the current user sign out here event okay why take the homepage then Firebase or. instance. current user okay then let's have that email here email let's click again Jin at gmail.com 1 2 3 4 5 6 1 2 3 4 5 6 78 click here Okay now click here you got jobin at gmail.com actually I think uh sign then sign out okay then okay let's fix that so I'm going to access the current user here okay then let's sign out user dot you can delete user you can reload refresh token uh I think the initial way is correct okay the issue is like this is an asynchronous operation so actually we are printing this let me rewrite this thing method where okay this method I'm going to remove this thing and put a bracket here then curly brace then put a semicolon and let's try to print this thing okay save this let me log in it again J in at gmail 1 2 3 4 5 6 7 8 we're expecting a null here so click here and I think I'm log and click here now you got this thing also again okay so uh what is the issue here what is the issue log out five b all. instance. sign out okay then after that um we need to print testing let's try once more one more time actually it is signing out but we getting the email printed at gmail.com 1 2 3 4 5 6 7 8 login then click the log out still getting the email okay because I think this is because this is an asynchronous operation if it is Success then you are to print the email okay anyway uh actually we are signing out then uh let me login again jobin at gmail.com then this should be 1 2 3 4 5 6 7 8 okay you can write it as functions [Music] okay valid so let me write that if log Key current state validate current state is validate okay you can write it as a function okay so I'm going to cut this out and call the function login okay then Define that function here and it should be login okay paste it here and this is annous Operation and you have to call this function what is the function name put an underscore here because this is a private function login okay now you have you just call the login function now is a bit more cleaned you can create a user model okay so go to models create a DOT file that is user model okay this should be a class user model user properties user then string user password then user string and user name in property then you have date time that is created then user has an in status status these are the fields then create the Constructor user model okay and this dot email this dot name this dot comma this do password pin this do status this do created okay this is the Constructor then I'm going to write some Factory methods here you can write the methods like you can call the factory user model Dot from Json okay actually document snapshot data and and this is going to return a user model [Music] okay us data of email this is a email and if you want you can uh save this as string okay I'm not going to do that email and I'm not getting back the password so password I need an ID here so create a field string uid okay pass that inside your Constructor this Dot uid and uid means uid U okay then name name and make sure that these fields are exactly same as your fire Bas then uh I need to status data of status and created at data of created but okay we need to write a two M okay so that should be uh we are going to have create a map map map string Dynamic then JSM no to JSM okay then this is going to return a map okay the key is U ID that is U ID name name that should be name then Emil that should be email then the password password is actually password not it is password then status that is status status then created at that is created at okay so this is a model and we are going to utilize this model for adding something I'm going to have a new do file that is all service F and this is actually a class service class so class of service okay here we are going to have that [Music] references these are the two things and I need to save this data to save the data to uh okay okay let's define some uh five Bas references so I'm going to have final five p o that is underscore o equal to FAS instance instance collection reference that should be user collection okay that should be equal to fire firestore instance. collection The Collection name is users user okay now registry log so I'm going to have a future and future void register or create account register user and user cre okay all this thing okay I don't need this thing okay and user user dot okay we are not going to trim this user dot email okay dot to string and password user password we going to have this thing [Music] okay user data do user ID and this is not coming from the controller this is coming from user do name okay and create user us status on okay this is going to have going to be going to create a new user okay users collection auth okay I think I have an error somewhere let's have that check that extra bracket I think I forgot to close a bracket okay ACC regist okay the top I'm going to create the instance user user model underscore user model equal to user model okay then I need to call the user service user service no we call it as OD service OD servicecore OD service equal to OD service okay then we have to call that user service and user model and let me comment it out I'm going to comment this out okay let's F this and after this underscore user model to user model okay then emore Emil controller. text password uncope password controller. texter then any name underscore name controller. text then you have the status that is actually passing from here one cre dat time. now one okay then if everything is okay and U ID okay you [Music] service service dot register user you have to pass that user model here okay okay actually this is going to return a user credential okay return this is actually going to return this is actually going to return that user credential so return user data okay this is going to return a user data why might be completed normally and this should beable okay user data return you can store this in a final data or user data equal to wait and this is Inc user data notal you can save this or X registration page now get you com this put a semic Col here now reformat this thing okay and make sure that you haven't called that uh functions here okay so uh let's reboot the app reboot then create close this create a new account let's have a test test at gmail.com 1 2 3 4 5 6 7 8 and it should be test createe is bit more clean and way better registration processen you need to show something circular progress indicator I'll show you okay and watch it closely directly you have a form okay I'm going to wrap this with a column and replace this column with a stack okay first all I'm to a wiget called visibility visibility child child should be a center wiget and the child should be a circular progress indicator okay then sorry loading so go to the top of this page I'm going to Define a variable here and final loing I'm going to it's not final is loading it's a bu value uh because this is a PO value Po and underscore is loading equal to right now it is false and save this l a d i n ging and save this now you don't have that value I'm going to write a void method here voore register okay initially I'm to set state so I'm going to make underscore loing I'm going to make this true okay function so I'm going to take this user model from here fire I'm going to try something user service try this thing okay and make sure that this is single operation future future. delay duration seconds two seconds 3 seconds okay now user okay exception on you can call Firebase all the exception call yeah catch e then make it false then I'm going to have a scold messenger dot off context dot show snack snack bar that should be a text that e okay then you have to show that error here error okay err error list one okay then save this let's create job 1 2 3 4 5 6 7 8 okay let's create let's reboot this again Jin gmail.com password 2 3 4 5 6 7 8 and this is job in click here what is [Music] error nothing is happening why let's check the Firebase users okay authentication let me stop this again then run it again okay uh actually we forgot to call that thing underscore let's try create so let's use the same email okay then 1 2 3 4 5 6 7 8 and the name should be some name okay then exception click here now you have the circular progress indicator then if anything happens email ID is already taken I'm going to change this to one and Emil then click here and okay then create account now you have the circular progress indicator then Su okay now you have created a user new user Lo function that be future future I want to return document snapshot I'm going to call Lo L user okay then this is also an asynchronous operation user credential user credential equal toore all the sign in with email and password okay that model and you have to pass the model here model user model user okay then that is coming from user do email dot to string okay then password user password string okay and the error is this is an asynchronous operation so you need to avit okay document snapshot document snapshot snap equal to Firebase fire snapshot means just actually collection reference user collection user collection us collection find the do sucessfully user credential user do uid dot you need to have this thing user. get okay and this is also asynchronous so you need to AIT okay actually we need to store this data to share prence I need to have that [Music] page sh preference instance share preference uncore preference equal to share preferences. get instance and this is also an as synchronous [Music] operation I'm going to have a war or string string token equal to and await user credential user credential do user. get ID token you'll get a token okay we going to store that value a wait underscore preference dot set string the key is toen value is also toen okay and this is Nel okay then preference preference set string okay I need to show the name store the name and name is actually coming from your snap name okay should be email okay so sh preference I need to have I need to return that snap okay and you still have error SN see let me have this thing here document snapshot snap okay and this isable also notable now you have snap equal to okay now it is okay uh you should be a void future void log out okay as sync okay log out prer preference equal to a wait share preferences do get instance okay then uh AIT underscore preference underscore preference dot what uh you can clear clear okay then score or dot instance or do current user Dot actually sign out okay and this is also wa okay AOL is logged in is login is logged in okay then sh preference sh preferen preference okay I'm going to have that string string to equal to await underscore preference do you can have get string get string it's not list and the token key token okay then and what is the error of wa underscore token equal to AIT preference dot string can be assigned to the type string okay okay then come here that means there is false because function return return okay okay Lo I'm going to have that user model user model underscore user model equal to user model then call the OD service OD service UT or servicecore service equal to OD service okay and I forgot to tell you you have to dispose this I'm to have a vo lcore login okay now create a bu variable here and this should be bu underscore is loading is loading equal to initially that is false and make your UI ACC with a wrap this with a widget or column and make this stack uh stack okay and I don't need this thing underscore e loading equal to make it true okay then after this you need to try create a user model that means user model equal to user model okay that is email controller text password password controller. [Music] text final data equal to underscore uh OD service dot you have login user and I'm going to have that underscore user model okay and of eight of eight and this is an a sync function okay then put space here okay dat exactly same let me copy this all these things make this thing data okay I'm to H page and what is error here login page okay let's check the error concrete implementation I think I yes user data and this is data okay there is no login key wait copy the okay try block Lo us okay okay try try this thing and try this thing and you have a try already you have a try here sorry uh it's my mistake I need only this thing okay this thing try this on catch Okay [Music] so uncore you can call the all service or service DOT log direct class call property then click the log out button and save this thing service. logout do then let me reboot once again okay re here Lo let me log in this thing and jop in at gmail.com password 1 2 3 4 5 678 and click here okay L page preferen missing plugin implementation so stop this app run this again okay okay so I think as a absolute begin okay 1 2 3 4 5 6 7 8 Okay click the login button now the supplied all the credential is incorrect jobin gmail.com and I think my password is incorrect 1 2 3 4 5 6 78 okay some unsupported reflection accessing hidden method come down come down it's not going back so let's stop this then let's check what is the error Navigator dot push named push named and remove that should be home home navigate okay and save this click the button again now you just navigated to home anyway that's my mistake anyway then you can log again J gmail.com then 1 2 3 4 5 6 7 8 login now uh log back so okay's let's log with the test okay let me create a splash here splash page okay and this should be import uh material then State full widget Splash View and this is going to return a scaffold okay then and the body should be a center wdet child should be a text to app and okay then the style should be text style color white form size see I need 30 30 form size okay then go to main Ro dot I'm going to have that Splash slash Splash and this is context spash view spelling refactor rename Splash Spa s Splash okay so Main that should be Splash view okay and the root should be Splash okay then re [Music] this okay let's try that okay okay string name okay and I need to store the string email and also the uid okay I'm going to write a function get data okay Shar preference inst Shar preferences underscore preference equal to a wait Shar preferences. get instance okay preference do see I need to have that get tokeny Tok and you can make all these private if you want okay token and I'm going to store this inside this toen is actually token equal to a wait token is equal to await uncore preference. get token and token is nullable what is the error here object can be as in variable type string get it string get string okay then come okay this should be name and this is uid and make sure that you set the uid here we hav set the uid so this should be uid and here uid then and Story ID then this is for name name okay we need to call this thing so let me have a set State inside this thing okay then call the init State then here I'm going to call the get data okay get be fure future void check log status sh preference we already took the token if toen that me Navigator do push named we need to go to your home route that means login view then we need to go to slash home okay then call them check login status okay then reboot this thing I have an error here set state is called after dispose okay let's remove that set State from here again you have an error uh set State Mark need bu call during build okay check login status copy this thing REO it I still have an error let's fix that the error might indicate a memory leak if set state is being called because another object is retaining a reference to the state after it has been removed from the tree okay let's fix that okay let me add a delay here because I just added a delay and after that delay I'm going to call this thing because actually uh it's not getting the token here that may be the issue let me reboot okay so that's the issue I just added a small bit of delay and uh D future. delayed and these 5 Seconds now you have inside you and it should be a 2 second or 2 second delay let me reboot it okay then uh restart the app and after 2 second you'll be redirected to your login page because we haven't set any token jobin at gmail.com and the password is 1 23 3 4 5 6 7 8 and click the login button and you'll be redirected to your home loog homepage then reboot the app and right now we are expecting the homepage not the login page yes we have the uh login page and if you log out you'll be next uh if you log out uh you'll be asked to login again okay and this is how you uh handle the state of your app like I mean the login state okay so I told you this is not the cleanest way but uh this is for just for beginners uh okay and future if everything is okay uh I'll do a video on that okay and if you are uh getting something from the video please uh consider subscribing the video okay because I I'm lacking some subscribers and I have done almost 50 videos but the subscriber count is still falling okay so uh consider subscribing uh sharing commenting okay then okay let's do that Act okay that is not the way that is not preferable okay so let's create a task model uh I'm going to create a new file do file inside my models folder that is uh task underscore model okay this class this is a class okay then uh I'm going to call it as task model okay then uh we have to define the properties a task has got an ID okay then string title then string description or task you can call it as smaller thing string body then uh you need to have a status uh status then or you can have a Bo value or you can have date time that should be time stamp create create okay uh and inside my user model uh create Constructor task model optional parameter this do ID and this do title this do uh status this do body and this do created it okay these are the fields and I need uh one more thing I need to have that uh to Json and from Json function so I'm going to have a factory uh task model Dot from Json okay and this is going to accept a document snapshot that should be uh we can call this as Json whatever it is okay then this is going to return return a task model okay [Music] and come here and the ID of this task model is Json of ID okay and it is Json Jo okay Json and put a comma then the title is Json title then the B is body Json body then we need uh Creator JM created at then we need the status okay status is JSM status okay so this is what we uh have to convert that [Music] means okay you can write a uh to map method uh for saving that data okay so uh let's write that it's a map string Dynamic to map okay and this is going to return a map okay and inside that map ID is actually ID then title is actually title then body is body okay then uh status status then created it that is actually created it okay so these are the this is the method to uh convert or um to create a map okay actually we need to store this in Firebase okay so uh come to our service class and create a new service for task service create a new DOT file that is called task uncore service okay this is actually a class task service okay then I need to have some collection references here I I don't need any authentication I'm just using uh the Firebase fire store to store this data so final collection reference underscore task collection equal to Firebase firestore do instance Dot collection that is Task task okay put a semic okay this is a collection and we need to have the following methods like we need to create a task create get all task update a task update and we need to delete these are the cred operations okay first we have to create a task so I'm going to have future I need to return a task model okay and you you have to import that task model and the create method is create task and this is an asynchronous operation okay then uh import this task model we don't have that here so import that file and now we are going to create a Tas task okay and for creating a task this is going to accept task model task we have to pass a single task uh to this model okay so let's try try catch Firebase exception and catch it's not catch it's on Firebase exception on fire base exception catch that e okay let's print that e e do to stram okay then we have to write the logic here first you have to Firebase call the Firebase F store dot no we have already created a collection reference so underscore collection reference actually we are getting back some data so this should be final task equal to a wait we are we are not actually getting back some anything from here we just storing final uh await underscore task uh collection dot talk talk is actually task. ID task. ID do set okay so we need to have use that method final task map equal to what uh utilize the task model task model dot we have the two map method to map is going to accept it TOs and after this thing uh we have to pause that map to the set method task map okay then this is going to after this this is going to return this is going to return uh task okay so this is nullable okay now we WR the uh create task method let's try to create a task okay so uh when you click here you'll get a form here here we are going to enter the task title and description go to this page okay that is inside our screens folder then that is add task page and come down and we have a button here so add an inl or just a detector I'm going to add a just detector now and come here on tap okay now we have to validate this thing so let's uh check whether we added the keys so I'm going to wrap this with a widget that is called form okay let's create a key actually we haven't created any key here so final underscore task key equal to Global key and it is off type form State home state okay and pass that key here this should be underscore task sorry _ task key okay and come here uh write the logic for validating this thing and here uh on the on T I'm going to write if underscore task key dot current state do validate okay if everything is okay we'll execute the logic okay so for that I'm going to write a method add task okay and this isn't existing here so let me write that method here that should be and we wrote it as underscore private okay so underscore add task okay and inside this thing I'm going to create some instances so uh I need task model underscore task model equal to task model and the title of the task is underscore title controller dot text okay then put a comma and the description for body is actually underscore description controller DSC description controller. text okay and we need some more field I need an ID field actually uh we have to generate an ID okay so for creating an ID I'm going to utilize a package called uu ID so come here in the P spec you can add a package called uu ID okay then up get it then every time you click on this button uh I need to create an ID so War ID equal to UU ID do V1 okay now it will create automatically create a uh ID and store it inside the id id field ID variable then I'm going to have that ID here then uh I need the status right now uh this is actually status so should be one then put a comma then I need the creat it creat it is actually date time do now okay and so we just created the model okay now you have to pass this model to our service class so create an instance of that service class that is Task service underscore task [Music] service okay then you can call task service dot create task and you can pass that task that should be underscore task model okay and and this is actually going to talk service equal to task service okay this is how you create an instance then uh actually we have a uh it is going to return a task so final task equal to a weit so that this should be a sync okay so uh if you don't want to return the entire thing uh you can just return the ID of the created task whatever you want okay so uh I just returned everything then and after this I need to show a message if task not equal to null then you have to return isold ENT do off context do show snack bar snack bar I think you already know what is snack bar okay it's just like a toast text then task created okay so this is a method we want to uh have then let's try okay so we wrote the model we wrote the service and we uh have that logic inside my button click okay let me reboot this thing reboot then we have we already implemented the Lo uh maintain the log we maintaining the login State that's why we uh we just landed here so create a task then come here I'm going to have this should be task one and the description is this is the description of task one okay then click on the add button now let's check on the fire base let's take Google Chrome okay and let me take my Firebase console wait a second okay so this is my Firebase uh dashboard of this project then click on Firebase fire store okay then you have a task collection here and we just successfully added a task here okay uh I think you got the idea how to add a task okay and uh if everything is okay uh I didn't get the task here okay let me add one more task and this should be task two then add task okay so task created and now we have two task and I think we need to go back from this page so you can have and you are just showing is cold messenger and we are just popping from here Navigator dot pop context okay and let me dispose everything uh I'm going to dispose this controllers and come here and call the dispose method and you can dispose underscore title controller. dispose and underscore description controller. dispose okay then save this and let me click here and this is Task three and save this we just popped out and if you click again uh you are getting a fresh instance of the uh text Fields okay go back now uh my a is to show your show the task here okay so for showing the task go to homepage go to your homepage what is the hom page to do home okay and this is where we uh manually added all the task this is a list view that is actually uh creating this UI okay so uh actually I need to get the task from Firebase and show all the task here that is my my aim okay so uh there are two ways you can uh Access Data from Firebase like uh either you can use a future Builder or you can utilize a stream Builder okay and so what is the difference between that future Builder and stream Builder actually very simple uh imagine a scenario like this this is the back end of your uh or this is your fire base okay and this is where you reside okay I'm standing here or imagine uh this is a tank okay and full of water imagine like that okay so uh this contains water okay then this is full of water okay I need I need to have this water I'm just I just come here and [Music] okay then uh imagine something like this suppose you have a pipe connecting these two things and you can have pass uh something from Imagine like that future build you have a pipe then you have a continuous flow you can a stream Builder here stream Builder Okay stream Builder stre F fire St instance collection okay collection task okay do snapshot I'm taking snapshots or you have you established a stream between these two enti you are getting text and you have the snapshot okay then you need to return that snapshot. dat do dos. length okay right now let me refresh this [Music] thing only you got three tiles and you have an error let me show you that error okay see that error that is because future operon data do dogs. length equal to equal to or greater than one I need to return this thing dot connection State connection state equal to you can call the connection State connection state do waiting okay connection establish equal to I think this equal to equal to and this is going to return a center Widget the child should be a circular progress indicator okay now our future has error you have to return again A Center Widget the child should be a text widget some error code okay and the style should should be team data dot text team dot displayer small okay then error if snapshot has data you condition has data has data do DOS dot length equal toal actually you got something return a text widget and I think it's better to Cy this thing okay so rewrite okay and it should be no task added okay and if anything goes wrong this is going to return a center widget child should be a circular progress indicator something or you can have a text here some uh unknown code or like that okay so I just save this thing and let let me reboot this thing okay reboot okay let's try that now you can see an indicator there then uh after this after that uh particular uh let me delete all the task and I'm going to delete the documents from delete document okay and ask delete you and let me delete Del the other task delete this thing and come here and delete task okay so I don't have any task so you can see no task added here okay and uh this is how you work with what streams okay okay let me add a new task and this should be task one and this should be task one description okay and add this add okay it's not coming why uh let me reboot this thing what happened okay and you have a task here and this should be task one description and the problem let's check so connection State IND okay let's fix that come down come down this thing and let me write something something like this text hello I think this is what you are currently viewing this thing theme data Dot Tex team displ okay [Music] hello okay so let me modify this thing if snapshot has data this should be not equal to zero and save this now you have the task okay then let me add one more task this should be task two and this is Task two okay let me Zoom it a bit okay add task now you just added the second task okay now you have task one and task two and why both have the same task one and this is actually task two okay what you got task one task one okay no problem we are not fetching data from five we need to have that value so I'm going to have a final uh final task equal to this should be uh snapshot. data. talk IND that means this is actually of task model okay now you have an error and and I think you can utilize that uh task model instance here task model underscore task model equal to task model okay I just created an instance of the task model then you can have that underscore task model task model dot can access that task model dot created at okay task model so you can have have final underscore task equal to we can use utilize the task model Dot from Json and you can pass that snapshot. dat. dos of index argument type string can be and not in codes okay I just pass that value and if you want you can print that task here task underscore task dot you have all the fields okay then uh I don't need this thing because we are directly accessing this okay so should [Music] beore task title okay that should be underscore task dot body let me save this and I think you need to have this in or you can have convert that to to string okay save this and time stamp is not a sub type of type date time okay so uh this the issue uh time [Music] stamp mod task model is actually time stamp we are converting this to day time okay how can you uh convert the time stamp to day time maybe time stamp equal to Json of Jon of create then we need to convert this time stamp to date and come here call the time stamp dot to date okay then uh put a comma here and this make sure that this isable okay so let Meo this thing now you can see you have the data and what happened if it is future Builder see let me make this a future Builder this should be a future Builder and future Builder future stream so future now future snap continuously it is not taking snapshots it is actually getting something then there is no change everything is perfect and I'm going to add a new task here task three here and uh task three and this should be task three description and let me add the task okay now you can see you need to uh run that future again future build stream build I'm going to have a future future list of task model L that should be task model okay and I'm going to have get all task and this is an asynchronous method then we going to try try okay and we have to on Firebase exception on Firebase fire base exception catch that error okay and this is just printing that error E okay then we going to AIT so actually I'm going to have final this should be document document snapshot data or you can call it as tasks equal to wait Firebase actually we have task collection dot snapshot okay and see here uh we're actually taking that snapnap this is actually stream so we have to uh store that uh we have to have store this in a in something else okay let's uh check what is that final document snapshot on task actually we need a stream so we going to rewrite this function like let me rewrite this thing uh this should be a stream okay this is going to return a stream and the generic type is actually uh a list of task models okay then uh get all task get all task okay and let's try this then uh we have to try and catch the errors and actually this is on Firebase exception catch e then you can print that e here print e okay then inside the tri block and put a semicolon here okay inside the tri block I want to return under scope task collection do snapshots okay then uh this will give you snapshot then we need to take that snapshot and convert that into a map I'm going to have a map then inside that map we are having a Cory snapshot Cory snapshot snapshot okay then you're actually convert every document into our uh our model type and this is going to return snapshot dot dogs do map then here I need to pause the document snapshot document snapshot talk then after taking a single document I need to convert that into a model so this is going to return again a return I just clubbed a lot of returns here so task model do from Json and you can pause that your method then finally you have to convert this to a list okay put a semicolon here not inside this to list put a semicolon here then put a semicolon here and also you need to put a semicolon here so now you have your task model then uh you can have you can throw that throw e okay so uh this is how you uh write a method with the type stream okay let's try to access this inside our homepage so inside the homepage right now we have a future Builder let me make this to a stream Builder stream Builder and the stream is actually stream Builder the stream is actually uh the task or let me create a instance of that task here so task service uncore toas service equal to talk service okay so you can utilize that uh toas service instance here let me delete this thing this should be to no this should be task service doore Talk service do get all task okay and I think uh you have a type okay and the stream Builder has a generic type like list of task model okay now uh the rest of the thing is almost similar we are checking the connection State then the error State and you have some issue here so uh there is no document we are actually getting list of task so I don't need this thing there is no doc here so data. length then uh also here there is no docs data. length then uh item count is actually data do length okay and we need to uh have to store the task actually this is uh list of task model okay then task equal to snapshot do data otherwise this is empty okay now uh the final task equal to we need to take individual task so final task equal to uh I don't need this thing actually we have task here so let's simply write task of index okay now we just took a single task from that list and store it inside this variable okay now I think everything is okay let me run this again I have one more error and an unwanted import is the do. HTML and remove that HTML here I don't want fire store here because we haven't used that fire store here so uh come here reload this thing now you got the task let me add a new task and this is Task four and this should be task for description okay then save this now you have task for okay so this is how you implement a stream or write a function with the return type as stream okay I think you got the idea okay and uh and the rest of the things are uh deleting a task and updating a task okay let's try to do that I need to update a task so uh for updating a task you need to pass you need to specif spe ify the ID of the task to be updated okay let's try to do [Music] that okay uh let's write a method here this should be a future uh future void update task okay then it is is an as synchronous operation and for updating a task you need to specify the task ID so I'm going to have a string ID then uh here inside this update task function we have to try to delete this thing so write the try block so uh go to your collection a wait underscore task collection F dot doc Doc is actually with this ID do update okay and uh see I just made a mistake for updating you need to specify user model okay so this should be not user model task model task model task okay then this should be task. ID then the data should be a map so we have to convert that uh to a map so final task map equal to you can use the task dot to map method to map okay so uh we just converted this task model to a map now you can pause that M map here this should be task map and put a semicolon then uh on Firebase exception on Firebase exception you can catch the error catch e then this should be uh return of print that e do to string okay and this is it for uh updating your uh updating your task okay now you have to write the delete task method and it is very stri forward for deleting a task you have to pass the ID future this should be avoid method and delete task and for deleting a task you need to pause the ID of the task to be deleted then uh come here and try and this should be I need this exception like this okay try on Firebase exception you have to catch it so uh I'm going to try to delete this thing so await underscore task collection no okay this is an asynchronous method async so underscore a wait underscore task collection underscore task collection dot doc the doc is with the ID then use this delete if you want to permanently delete you can do this or if you want to update uh the task uh I mean uh you can do a soft delete and there are two ways you can do soft delete and hard delete hard delete means you're permanently deleting that from your uh backend and soft deleting means you just changing some status and in future you if you want you can get that task okay so I'm going to do a hard delete here delete okay and that's it okay now come to UI uh let's try to implement that so inside the uh to-do homepage let's find out the button and come here inside your list tile this is a list tile and you just rot two icon buttons here and this is for editing okay and for editing uh we need to [Music] have we need to Lo that data inside your inside this form okay okay so come here and let's try to have that delete for Talk service dot delete task okay you will get the task under you can access underscore task. ID okay pause that ID then what is the error here and this should be you can pause this to string actually uh if you want you can have an all operator here okay then you can get rid of that error okay let me try to delete this thing okay so let me reload this thing and it's not there I'm going to delete this thing again okay then uh this is how you delete okay now you need to update the task so I'm going to have I need to move into uh Navigator dot push material page route context then add task view okay this is a page you want to go and uh here I need to pause the existing data so let me create final task model task okay we need to pause a single task so pause that here this dot task okay now from here I can have task and that should beore task okay I think and save this and now I click on this button and we'll move into the moving to this page okay and uh I need to I need to check whether uh I need to show the titles and the button text accordingly so how can you do that so come here and inside your add task page okay and I'm going to have something like this okay inside the uh init method I'm going to write the init method init State and let me write a function here that is load data okay and this should be underscore title controller. text equal to widget. task dot title okay and what is here string add an check okay then I think you need to add an L check also here okay can I remove this thing from here no okay okay then uh you need to pause the description controller and this should be description controller DC and this should be body okay and let me have a variable here we create a variable somewhere here okay this should be a Bu from uh you can write different logic I'm just trying something from edit or you can have edit underscore edit equal to right now it is false okay false okay now I'm going to check something here if widget do data widget do task not equal to null I need to do this thing also then I need to have underscore edit equal to true or you can do this inside a set State I think set State okay I'm using simple set State as State Management but uh this is a simple app that's why I use this and you can do this with a provider or something else block or whatever it is get text okay I'm just using Syle State Management and call this function inside your in it state so Lo data I'm going to call the L data here okay and let's try to uh update the UI okay and uh the text widget okay I need to show the text widget as if editore edit equal to equal to true this should be update toas or this should be add new task and let me save this now you can see it's add new task go back click here edit button now it is update task okay now uh I'm if I'm coming from here there should be add new task okay and and I need to show this button text uh like this so the button text is actually this thing the child should be underscore edit equal to equal to true there should be update update task otherwise this should be edit t no new task add task like whatever you want this should be add new task and save this now you have update task and I need to fill this thing and it's already filled here you can see it's already filled okay go back come here if I click the task 3 here now you can see task three task 3 description okay now I need to implement the logic and come here here we are utilizing the same button for update and delete so here here and I'm going to check this thing if underscore edit equal to if underscore edit you can VI uh and this should be else this should be this thing or edit this should be you can call this task service no I think you need to write that task service here and let's create an instance of that task service I just I think we need we just created the task service inside uh inside of add task method Tas service okay let me cut this out and take this to here okay then come down come down come down come here this should be underscore task service dot delete task the ID is actually widget dot task dot it's not delete it's actually update update and we need to pass what you need to create a task model so that should be task model underscore task model equal to task model okay and ID is actually the same thing ID is not going to update so that should be vet dot task do ID okay then the title should be underscore title controller. text then the body should be underscore description controller. text okay then uh other things other things are optional like the status if you want you can update the status status is actually uh actually it is one but I'm not going to update that from here so then you need to pause this underscore task model okay okay then uh come here we just added the task here and uh updating the task is not going to return anything so after this thing dot then you can go back now we get do okay you can show a uh scaffold messenger whatever you want I told you this is a basic video so that's why I'm just writing like this okay so in real but uh this is what everything starts okay let me restart this again then go back okay uh let me try to add a new task okay I'm going to have a new task here and this is a form for adding a new task okay and this should be uh I'm going to add a task create a wireframe frame okay the description is create a wireframe for the new website Okay add task now you have a new task here okay I need to edit I just made a spelling mistake here wire frame create a new wire frame let's try that uh FR fr okay let's try to edit this thing create a new wire fine okay let's update this thing now you can see and here it's not updated here uh why if I refresh this thing if I come here and I refresh if I refresh this thing this will get update okay no it's not updated here okay let's try what what is happening okay task model instance of task model that's okay then uh we just add a new task then come here create a wireframe okay come here and I'm going to update wire update task now it's updated okay actually I just checked here it's updated then come here and I'm going to have a new title here wireframe work Printing and update the task now you can see uh is updated and if you want to update a task 4 task 4 is actually uh something like this meeting at 8:00 p.m. today okay so update this thing now you have meeting at 8:00 p.m. today and if you want to delete this thing click the delete button and it's permanently deleted and come here it's deleted now you have two task inside your Firebase collection okay these are the task okay I'm going to hit the delete button from here now you can see uh I have only one task okay and this is hard delete it's deleting entire thing from your back end also and most often we are we don't do this hard delete uh often because we are losing the data okay and data is a valuable commodity so we don't delete uh the data we have so uh we just uh we just have that see see something here you have an issue here body created at ID and this is this is why this is happening because we are just taking the model we are just taking the model and converting this into a map actually I have passed only two things here and if you want to update the existing data uh come here here I need to have body and the title then status is actually we have the status in our widget dot task dot status then if you want to re uh retain the existing existing data you can do something like this or there are other methods uh okay like this created it and if I save this and I'm going to delete and let me delete create a new task okay uh meeting 8m okay uh you have a client meeting at 8:00 p.m. today today add task now you just added a task and I'm going to edit this 8:00 p.m. and the time is changed that is 10 p.m so uh I'm going to update this to 10 p.m. update now you just updated come here what happens here now you can see uh it's updated body ID title body creat at ID and everything is same and I'm going to edit this thing as I'm going to edit only uh this thing 8 PM is cancelled okay then update come here now you can see it is cancelled the other things are the same okay and this is how you update a task okay and I think this is clear to you and we just created a basic too app with the Firebase and we uh checked everything and the Primitive way the best way way and the better way everything we tried and the uh option you have to uh the thing you have to learn is right uh this thing write the models then write the services then uh access that service through that service from the UA you can uh utilize that methods and that is the better way and uh I just use set State as State Management but in future you can you can try to implement provider and uh come here and you can write the provider here with the change Notifier and uh update this list while creating a new task and getting all task okay and when deleting a task and when updating a task you can maintain a list here with a change notify then uh you can consume that inside your UI and uh whenever a change happens inside that list your Ur will get updated automatically okay that is and you uh that's what that's how you can get rid of this set States from here a set stat a GoBack of set States is actually it's refreshing your uh it's actually recalling your build methods again and again and this is a smaller app there is no issue recalling uh your uh build method but in case of a bigger app with lot of microservices running uh or lot of different APA calls running in your homepage or in your screens and refreshing the page will uh trigger the again uh that means uh the build method will trigger that API calls again and again for simply changing a smaller value in your UI so that is not preferable so uh try to learn that provider and block as State Management okay so I think you uh you gained something from this video okay so uh I'll come with an new video in future okay thank you for watching [Music] n

Channel: FlutterFly

Views: 1,816

Keywords: flutter firebase crud, firebase, flutter, flutter firebase crud tutorial, flutter firebase, flutter firebase crud app, flutter firebase crud example, flutter tutorial for beginners, flutter firebase tutorial malayalam, flutter tutorial malayalam, flutter malayalam course, flutter malayalam, flutter best tutorial, flutter tutorial, malayalam flutter, firebase malayalam, malayalam song, mallu, kerala, technology, tech, future

Id: duEq3EJOlh4

Length: 226min 56sec (13616 seconds)

Published: Thu Jan 11 2024