@Flutter + @Firebase : Developing Complete App From Scratch

namaste welcome to further beginners tutorial series flutter has become one of the popular cross-platform application development framework in very short term with already thousands of mobile apps on production development flutter flutter is now moving pure mobile with flutter text off and flutter web both of which are in Developer Preview in this tutorial series we will learn to develop a complete mobile application using flutter and firebase from scratch believe me this will not be a passive app development course as with every video I would like your input on what to implement next what UI are features to implement I want to get active participation from you all so that I can make this tutorial as you would want it basically my objective in this tutorial series is to together learn some basics of flutter to learn to use provider package for estate management and use firebase as back-end for authentication and databases in this tutorial we will learn to create new flutter application and some basics of flutter application we will learn tentacle users using firebase auth and Google sign-in and we will also learn to perform basic database operation pa3 it update and delete in farbe s far-eastern also will use provider package for estate management and along the way we will implement more extra features based on your feedback and suggestion to get me started with this tutorial you will need the following a computer with slaughter installed and configured we will mostly be using android to run and test our flood wrap so that everyone can follow so any system Mac Windows or Linux will do it is better if you know the basics of programming as well as some basics of object oriented programming this is not a absolute requirement but if you know the basics you will understand the code more easily know prior experience with dart of slaughter is required but it is a plus point the application that we will be developing in this series is a notes application that will allow us to create edit and delete our nose we will even learn to attach an upload image to our nose moreover we will add other features suggested by you all along the way so please take part actively and help make this tutorial better for you thank you for watching this video in the next video we will start the series by designing a wireframe of our UI Thank You hello welcome to the first episode of flutter complete up tutorial in this tutorial series we will learn flutter by developing a complete app in flutter from scratch as discussed in the introduction video of this series we will be developing a notes application and will add some extra features based on your feedback so please take part actively and give us feedback on what would you like to learn in this episode we are going to design wireframe for UI of our application we will start by wire framing the login and sign up py for this you can use any software of your choice Here I am using graphic designer free version which is available for Windows Mac and Linux so let's start and design the login page in the new design section here we can either choose from a list of devices provided here for our wireframe or we can use a custom size so if you are on a software other than gravity designer please use custom size so here I'll be using Google pixel to excel 401 1 by 731 px in other softwares you can use this custom size the base one will be our sign in pairs so let me rename this in place and let's build a basic wire frame for our Simon pace here I'll just be using rectangles a top rectangle maybe this will be our logo let me align it vertically Center and let's create bunch of other rectangles so let's say this is for email address field and all tend to placate this is for password field maybe this is a sign in button and this sign-in with Google button so let me just add text email address let's ping this here so let's make a copy of this email address and let's make this password and let's I can copy this vertically Center sign in Center this okay and finally sign in Google this will be the basic outline of our signing page so let's create a new page call it sign up this sign up this and for this let me go to signing paste ctrl a ctrl C copy everything and control V paste it here and let's move this a little bit further and let's make sign in/sign up and let's duplicate this password field let's make this confirm confirm password okay so this will be the basic outline of our signup is will not go into designing the details because in the next episode we'll be designing this UI in flutter application and there will be adding the details so if you have any suggestions for sign in and sign up page for our application that is to be designed in the next episode in flutter please do send us in our Facebook page or here in comments thank you everyone for watching this tutorial subscribe and hit the bell button get notified about the next episode huh welcome to episode 2 of slaughter complete app tutorial in this episode we are going to create a new flutter project and implement our sign up and login screen so let's get it started to create a new project we'll use terminal and use flutter create command create and we give the project a name flutter notes I press ENTER I am using the latest version of flutter flutter 1.9 going one hotfix 4 so if you are not in the latest version you can upgrade you flutter just by running the flutter update command okay so the new project has created I can route this CD plotter Notes app and I can open this app in Visual Studio code I have opened my flutter notes our project in Visual Studio code so you can use Visual Studio code R and studio for following this tutorial however if you use the vs code it will be easier to follow so now I will start my emulator let me resize this spin so first thing I do is I run the app okay the app is building during that time let me remove these comments let me open pop respected amel and again let me remove all of these comments now the app is successfully built and running this is the demo app provided by flutter when we do flutter create it ship counter app that counts the number of time we have pressed this button so for this project I'll just remove this whole tycoon page visit then change the title to flutter notes and let's change this my home page to home page and now it's time to create this home base we'll just create a simple visit let me go through alive II let me create a new folder UI in here I create another folder phases and inside phases I'll create home dot top so now I'll just use a simple stat less VZ x10 stateless VZ and it will give a 0 let us implement the build function instead of written a scaffold scaffold and here no body let's this is a containment center with text but I meant the dot we need to import so let's import two eyepieces boom so okay our app has actually loaded and we can see now flutter notes no top notes application in flatteringly Center so this is just a demo paste so first thing we'll do is we create our login page to do that in the UI phases inside pages let's create another folder called awesome and in the odd folder let's create a new file login dot dot ok here again first I'll start with stateless visit I'll use the Coalition event provided by awesome slaughter wizards Padre snippets extension envious word I'll provide the link in the description below so let's name it login this and instead of container will use scaffold and will not use the app bar will directly go to body and body will be a single side rows view with the child of pollen will take children here the first children will be our logo and then other visits so first let me change this one page to login this so that we can see the preview we can now see the TV so here the first children will be our logo the logo so now we just use a container engine no child let's use decoration the background color this is better notes application and this is caller storewide let's keep the shape of box a third sort of shape let's keep it a circular shape and let's give it a width up let's say 60 points and again height of 60 point okay so there we have it we need to plus this at center and this should come a little bit down further down so let's use a sized box size box of height let's say bar height okay so we give the tool bar height then it will take the amount to fight taken by our app bar so a logo is down further so now let's make this a logo size is okay for now and let me align this at the center so to do that I'll wrap this column with a movies it size box and give it a width off double that infinity so it takes the whole weight nothing now again after the logo let's ease sign-in with Google button so let's use a raised pattern child text nice so we need to style our buttons in the whole app in similar fashion to do that we'll use our theme so in theme first thing which changes our our primary source would be called start green let us provide our button with a theme button team so it takes button theme data object and let's keep it at color so what in color should be so we'll use the primary color X theme bottom texting dot primary and maybe sip so we provide the CEPA rounded rectangle border border radius dots or to the body so that our button is round circular this is for the radius so let's see what are the properties are there focus collar height with padding so symmetric padding that sees all side 16:1 padding okay this looks bad button looks good to me maybe let's see symmetric symmetric but this this looks better so now here we need to provide a little bit of space within this logo and continue with Google button so here will easy size talks with high let's say 30 points yeah now after this we need a username and password fields first let's separate this again with size box of height let's say 30 points and here text field will use text form fields so that later we can use form where to submit our check validate our fills and submit our form so let's is text form field decoration input decoration pink in text let's say text sorry it's a string in text is a string so this is email email address if instead of intact we'll use level so that will have a certain level so now we have a floating level in the mentor that we have on-site padding of 1616 yeah I mean we used instead of like creams yes right here the highlight poser and everything is similar to the background color so it's not invisible so we'll change that little bit later I think this is OK from now up for our input pair add some padding here so that this text field has some padding at the side so you know schoolview let's use padding also iPad is not 16 points okay we can see the text and scaffold background we'll use little bit lighter than this this capacity of 0.3 okay so if we keep the opacity it sexy dark black color of sauce nothingness will you see like pink color but for our form from this and below let's wrap this mix container declaration oh why okay so this is a mail address read that's to pick at this field and make a password field let's separate these two by size box of passwords will stand this level text ee star test is power is fine so font size okay this is okay now we need it sign-in button and a button that links to sign up this so in logging that's are the size box sized box 2014 text next caller instead of primary button texting the primary and so it's free let me try here text color with Ali is the sized box container infinity let's keep adding symmetric particle panics into padding should be 32 so vertical padding inside a witness this okay so I think this is better and maybe before this email address field will give a title here that says text here that says this with size box of height okay so this is a pretty simple login form and after this container here will is another button use this okay so outline button text we are always done with the login screen but before we move on to sign of strength I would like to make a couple of adjustments the very first thing I would like to do is I to add a keyword action so that when a user presses that action in this email address field it moves to password field okay to do that we use focus node and the keyboard input action so first in email address text input action should be changed to text input action dot next think this will change the bottle but it will do nothing so what we need to do is first we need to create a focus node so let me create a focus node password field and here in the password field I will provide focus node as US will fail and in email address all in hitting complete what I'll do is focus is scope of contacts dot request focus password field so when I press the next the password field is highlighted and when I press them it's gone now what I'd like to do is instead of making a separate sign of pace I would I just want to use this same pace and just change this this portion of the form that log in for me the signup form when I press this signup button so to do that first I'll extract all of these part into a separate visa called login wizard so let's see this part starts from K toolbar height this is logo and this is continuing with Google button okay so this is our logging wizard so in order to extract this in vs code I'll use ctrl + dot shortcut key and then here is extract visit this visit will be part login form okay let's just remove this field and this focus note should also be kept in login form so let me remove this from here let me pop this in login form where this using this okay so it should still do the same things yeah so we can do next okay now I'll create a separate signup form to do that I'll just copy this login form I'll duplicate this login form because we'll have the same thrill just confirm password field will be added I have to placate this and let me change this login form to sign up form and we use to focus mode because after pass or fill there will be confirm password field so here again I'll duplicate this line and make this confirm password field and i duplicate the password field okay and make this confirm password confirm password field as focus node and here in password field on editing complete focus context our request for best confirm password field okay so let me for now here instead of login form I'll just use for now sign up so that I can see the preview okay so log in text should be changed this is sign up email address password and confirm password okay so this button should be create account okay so I have the sign of fun now we need to be able to change this form based on this click when I click the sign up button initially it should sue the login form and when I click the sign up button it should so the sign up form and here instead of sign up it's it's back button okay to do that first what I will do is I'll make this login page a stateful visit again control dot and convert to step full we need to do hard restart because we have changed wizard into step full and let me initialize something here a little good sign in form and unit is dead signing form is equals to two again let me hot restart and here instead of sign of form what I'll do is I'll use animated switcher switch ovz and this choice should be if sign in form is true then signing login login form otherwise signup form so based on the value of signing form it will be different then it needs a duration because it is a animated visit so I'll use the duration of milliseconds 200 okay and when a sign-up button is pressed I'll set it to false so when I press this I get signup form but this button should also changed based on this based on the value of this signing form so here if signing signing for true then we go to sign up otherwise we'll just so instead of text visit I'll do here signing form is true then I'll use this text otherwise I turn I can start back I get the back icon and all pressed again here signing from should be not signing form so when I do that goes to logging when I do sign up goes to sign up one more thing we can do is on on will pop because if we do back harder which we use Hardware back button right here it will close the app instead of going back to login form so to fix that we'll use will pop the scope so in scaffold just wrap with me widget will pop the scope and it takes on will pop yeah what I can do is so it's a synchronous if signing form if not sign-in form then say step return false else true so when I am in sign of form when I use the hardwood bathwater it should go to plug in form okay this works so we are done with the design of login and sign of form in the next episode we will setup farbas related plugins in our shorter present we'll set up both the firestore and farthest authentication plug-in before we move on to implementing the authentication service thank you everyone for watching these videos please in the comment provide your feedback or feature requests or anything that you would like to add a design request that you would like to be tutored in this tutorial series thank you namaste welcome to episode 3 of flotter complete up tutorial series in this episode we will setup firebase authentication in our application for that we will setup the required firebase project in firebase console as well as set of dependencies and add config files and setup the different functionalities required to implement the far best authentication so let us get it started the very first thing we need to do is we need to setup the firebase auth and Google sign-in plugin in our project in this tutorial I will show you the quickest way using the package that I have created flutter automation this package helps you automatically set up all those required steps for firebase authentication google maps and good signing and fire is to occur but in this tutorial we will see how to set up our best authentication using flutter automation package however if you want to learn the completely steps required to setup firebase authentication in your application I have another tutorial regarding firebase authentication I'll provide the link in the description below don't forget to check it out now we'll start setting up for vessel syndication using flutter automation for that first open Papa Spector demo file and in the dev dependencies section add flutter automation dependency as this is Deb dependencies we do not need to specify anniversa as all versions of flutter automation are supported this will get the latest version of flutter a donation package gate is running and it's completed so now from the terminal what we can do is I have already tried this here so what we can do is we can run flutter pop run flutter automation - f so this dasa flag will set up far Bessus indication in our project so if we now check the pub spec the demo file now there is three dependencies flutter farthest ODS provider and Google sign in so these are added by the Florida machine package automatically and some more new files in our paces directory so in our paces directly there is home pace log in pace splash pace user info pace so be careful that our home pace is replaced if we see here so previously our home page was this it is now replaced with this so be careful that if you have similar files in the similar folder structure that will be replaced by flood automation so before trying it be sure to commit your changes so that you can revert any replaced files so here I would like to have this homepage also so let me just copy this content and let's make a new file inside pages let's call this notes time press the content here so this is how not so and as we already have designed our login paste will not be using this login page however we need to know the functions so when login and sign in with Google is pressed which functions are called so that we can use those functions in our login page now in order to use our login page instead of this login page we need to change few things in the provided home home dot dot file so in the holder dot file here the login page comes from the existing logging base so instead of that we will just import our login page that we have designed so it's inside us login and next instead of providing user info page when successfully Ascenta cated we would like to provide our notes home so let's change this home page into notes home base and here instead of user info pairs let's just use notes home page ok so now we have notes home page when successfully logged in that's indicated so this far based authentication automation also creates one user repository file it's a change notifier with all the firebase authentication functions set up so that we can use this functions to sign in and sign with Google you know application now you know login page first thing we'll implement a sign-in with Google so in the login form let's find the sign-in with Google button okay continue with Google and in the unpressed so let's check the login form provided here so here is sign-in with Google and unpressed let's say a synchronous function let's just copy all of this and here let us past it so open sign-in with Google it will call this user dot sign-in with Google but we do not have user in this world so let's create the user repository so here is the repository is provided so let's go to our login page the belt function let's import provider and our user repository and key this key is for stuff Alt key let us create one key for our stuff and assign this key to our scaffold okay now the error is gone so sign in with Google function is implemented next we need to implement the login form for login form to work we need to make quite a bit of changes first let us change the login form into set full VZ next let us wrap our column with a form wizard wrap with new visit form and let us create a form key for mr. let us assign the form key to our form next we create two controllers for our email field and password field controller password that's a unity state function so here we will initialize email you text editing controller and then in the text form field will assign this is email field so we'll assign email and this is password field so we'll assign password so we now have the controller so we can also validate validator so if that is required same for the password validator is require finally when the login button is pressed so let's copy the function from this and we'll modify it as required let's test it here so this user we need to pass it we are already have where we can just get it from the providers here again in the build this key you cannot have this scaffold key so so now we got so any messes just oh wait user signing okay and we'll pass the email that text and password that's text in order to sign in the user okay our login button is also set up and to set up sign up in the flutter automation package sign up is not set up so first we need to do is in the user repository we need to create a signup function so let us just copy the sign-in function you click at this and let's make this signup email and password so instead of underscore after sign in with email and password we do create user with email and password and we pass the email and password okay and we'll set up the signup form according to our login form so we'll convert the signup form into step flu visit here first let's create controllers and password password also let us wrap the column with the form form let us also create form T okay we have a sign they found a key in the email address field assign controller email password field controller password confirm password field confirm password okay again validator if is so let's copy this validator in the password field let's make password is required and same in the confirm password field from password is required so when we do create account let's and let's copy from login let us copy this so user again we need D is positive e let's copy this test it inside up bed function sums up we can add one more step if this confirm password text is password dot txt so this two must be equal in order to sign up next we are going to create firebase project in the fire best console for that go to consult at firebase stock you can come if you have not already logged in with your Google ID login and there click the add project button once you click the add project button you can enter your project name here we use clutter Notes app and continue let's just disable the analytics for this project and press create present it will take some time to create our project until then we are going to figure out the application ID for our project that is required later so in the belt that Gradle file inside Android app folder there is this different config section inside which there is the application ID so by default the application ID is come that example dot the project name if you have not provided the who are the option with Roderick tree at command so in order to change this application ID we need to make two Changez first let's change this I like to name it come to Papa bit start slaughter Notes app and next thing to change is inside Android app yes our C main folder there is either Cortland or Java folder inside which you have your project so if you are using Cortland in Android then you have a Kotlin and come example so we need to change this example folder rename this example do exactly as what is used in your application ID yep once done that we need to make certain changes here also our package name bit becomes come dot pop-up bits ok next our manifest file again here come dot pop-up bits so we need to make these changes in order to change our Android package name so this package name is required later when we add the config file to our fire best project so let's check our fire this project it has successfully created let us press Continue and before adding apps let's do few housekeeping like in the authentication section we need to enable the sign-in methods so for now we would like the email and password based sign-in save and Google sign-in in ever use the project name as quarter notes and different email as provided and same so we have enabled the email and password based sign-in and Google sign-in now in the project overview in started by adding firebase to your app press the Android icon so our package name is the one we created sorry found that pop-up it's and Deepak signing certificate is required if we want to use Google sign-in so let's get our debug key so in order to get the debug he has we use the key tool with exports at least and V flags with Elias option the default alias is Android debug key and the key study key stories inside the dot Android folder ibaka keister so press enter the default password is Android sorry it's a password and wait so I hit the incorrect password so just copy the sha-1 hash from here copy and paste it in this field so ready strap once the app is registered just download the config file ok and once the config file is downloaded what we need to do is we just need to drag the config file and plus is in inside Android app folder so in the app folder we'll have Google services start position file once this is available now we can run our application so let's run with let's start the pixel - sorry let's try again okay so I was honorable to run in debug version because we changed the Android manifest file for the production version but not fabbi debug version so this if you get the same error on the debug androidmanifest.xml just control click and in here since the package name accordingly once you change the package in the Android manifest now run it again with their 5 once that is done you should successfully be able to build your app and run so let us first test continue with Google button we are getting the accounts let's choose one of the accounts okay we have successfully logged in with Google button in our application so for now we'll just press lesser logout button in our app bar in our modes home so not so in the app our actions actions icon button press user to see three.com text dark sign up and I consider the exit pattern then this logout first let us fix the obscure password fields let's go to our log in the dark and first in the login form text font will password obscure test true and then sign up again password to confirm password okay so here let us check if signup was successful or not if not successful then Finn fail to sign up that's too same for the log in here if not thing log in film so that we can see okay so first let us test sign up test test comm password password create account okay say it is giving us some error the text was called on now okay so in the signup form we forgot to initialize these text editing controllers so we need a unity state function sorry controller so we need to what we start as we have changed they state now let us go to sign up button and try signing up test password password confirm password so ok we are revert the successfully create and user has logged in and let us finally test our sign-in button with the user we just created test AB the rev.com password is password login ok so we were able to sign in as well so one thing that remains is showing the progress bar so let's log out and in the log in first let us try the continue with Google button so let's go to our continuous with Google button here so in the raised button what we'll do is user dot dot there is status equals equals the starters thought authenticating then we saw progress indicator otherwise we saw the rest pattern okay let's do the same for our sign-in button in the login form and sign up button in the signup form so now if we use the email and password and firstly log in you should have the progress bar okay so the progress bar here is not showing because it has the same color as the background so we make a couple of changes here first we wrap this with center so that progress bar is not sorry we just wrap this circular progress indicator with deep center let's copy this change the login form as well as sign in with Google button here as well and here the colors should be background color should be right so let's try this okay so we can now see the indication so when there is something wrong the sign-in with Google button gives the error message but login and sign up form doesn't keep the error message this is not giving any error message so let us fix that first in our main phone login visit we make a function call here what we'll do is do this so cut this we call the show message from here and in so messes this and in the login form we pass the function so error down here if this fell we do visit dark so we call this function same for design of form okay down here instead of Bentley call dark so error function finally from our login reserve we call the login form we passing swear so messes same valid sign up on messes let's do a hot restart and let's try it let's see use anything just login okay so we have something is wrong so we now can give the user feedback so here again we try an invalid email address which should give us the error message create account validate also these two field must be same so again if these two fields are not same what I can do is else so error so here should be option to pass the masses so I'll pass the masses password match okay and to do this do is here will make big messes this string messes and we provide a default value and content instead of using this message that's the password create account let's see sign up easy that soon error if consumed pass the text is not equal to password text so okay this else is response to this but I need to do is I need to test this inside this ok ok now the password and confirm password does not match we get deep messages so in this tutorial we have successfully implemented the firebase authentication in our application thank you everyone for watching this tutorial provide us your feedback and also suggestions like what you want in the next step and so on thank you namaste welcome to episode 4 aflutter complete up tutorial up until now we have created a new flutter project designed our authentication UI's and setup farbas authentication to authenticate our users now it's time to set up our database for the database we will be using thyristor database first we need to set up that forest or database in our firebase project that we created for this if you remember in our previous episode floater authentication we created a floral notes up in our firebase console so get to that project and go to the database section from the sidebar once in the database section you will be prompted to create your database press create database and we will start in the test mode so that will not have to set up any authentication rules and it add up as rules for our application for the test version click Next choose the location because you cannot change this later so for now I'll just use the default press done our database is now ready so you can see this kind of UI where you can see the data rules indexes and how to use documentation so in the data section let us plan our data structure for our app as this is a simple notes app for now we will create a notes collection manually so that we can first load the data in our UI and later create data from our UI so let's create notes collection press next and then document ID let's keep it Auto ID and in notes we want few fills first title title is a string let's keep a simple title and then this description it's also a string so this is the description for my notes and let's add a new field created ad so this gives the created timestamp okay let's select this selector date and time and let's save so now we have a notes collection and notes document and we have a few fills okay I'd like to add one more field that is the user ID field so we know which user created this note for that I'll go to authentic Asian section copy the user ID of my user and in database I will add the filled user ID and trust it so that later in our app we can filter our notes by user ID of whichever user is logged in let's add another document notes to created at timestamp ID string is ready all right so now we have two documents you can add few more if you like for now I'll leave it at this next thing we need to do is we need to set up five store plugin in our application so to do that go to pop that there once their search cloud firestore press so first we need to add this dependency to our poppy Specter demo file so let's open pop respect to time of file and add this as dependency then in the readme section if you see to use this plug-in using firebase console and Android app to your project we have done this already download the generated Google services transition file we have done this also and next modify Android build at Gradle android app builder cradle to add Google services plugin we have done this already for our authentication sir I think we are ready to use it so in order to use it here are some documentation so leave this for now so once we have added the dependency you should run flutter pop get it is run out in vs code okay now it's time to get our fire best documents and display it in our home base okay in order to work with Forrester database I have created a generic class and a abstract modal class so that I'll say with this project you can find it in the github of this project in this generic database service class I use a generic type and it has a bunch of functions like get a single document stream single document stream of list of documents get a query list so we can pass in arguments and query the documents I'll show you how to use this DB service in order to load data create data in our database so it will be lot easier than writing a custom fire stroke query and mapping your data into models so this automatically does those kind of things in order to do that firstly we need to create our notes model north so let's create that note that dart in here let's create class node final title ID description dead time created a user ID first let us create a constructor and we need to create another factory constructor no dot from the s in here we get string ID and map string dynamic data from this we create our document title equals to data title and description user ID in this user ID title description user ID created at add dot to date if this is not null we need to convert it to dead and one more field ID so this will convert a document snapshot from fiery story into our node object next we need to map function map to map this should return return a map where title title description description user ID right right and let's make this a named parameter so it is easier to create this object using this constructor so we have our node model now we need to make an instance of this data the service generic class to use our nodes model so let's just do this down in this database service there are a service not let's import this that's not notes dB is it Parker database service not import so collection name is not from the S from D s would be from the S two maps would be we get a note here okay note doesn't extend database item so we need to did have a site on here we need to pass super ID ID oh sorry I need to do this okay so I have created an instance of notes TB that we we can use to get notes from our thyristor database now in the UI notes home here we need to load the notes form our file store database so to do that in the body let's add a string builder okay string builder so stream will be nodes DB dot stream list so it will give us a stream of list of nodes stream list initial data is empty and in snaps art if not if snapshot dot has error rate text was an error instead of continent let's use Center next if not snapshot that has data then return circular progress indicator finally if there is data let us return list view dot builder item counts should be snapshot dot theta dot length so this snapshot is a list of this top mode let's import this node ok and item builders should be context index this for now return list style title text snap shortcut data index dot title this so the list of nodes let's remove this comma app is rebuilding so I get an exception so the exception is the plugin not found exception I believe yeah missing plugin exception so this is because after we added the far east or plugin we have to rebuild our app so it will take some time to load the Far East or and Velda app so we got an error here that says the dot Dex file cannot exceed 64 K if you get similar type of error we need to enable multi ducts you know build a gradual file so open build that Gradle inside Android inside app shear we need to add two things first in the default config add multi decks in avert true and in the dependencies add implementation for ordered X now let us rebuild our application it should now successfully build our application it has now build our application it's running it's loading and finally we can see our notice the two nodes that we created in our fire best console in the Forester this is how we can load data from thyristor and display it in our app as we have used stream builder whenever we change data in the backend it is automatically displayed in our front-end so let's go and Qin's chains add a new node in our database and check how this automatically loads so add new document title title adding description created at soy created at timestamp let's use that day let's say November time is 5:30 save so this is added and you can see it is automatically loaded so instead of the stringbuilder if we have used floats a builder then we could not see those immediate changes so depending on the use case you can either use a stream or a future thank you everyone for watching this tutorial the code for this tutorial will be committed and push to github be sure to check it out namaste welcome to episode 5 of slaughter complete app tutorial series if you remember in the last episode we set up five story now project and we were able to load and display data from thyristor database in this episode we are going to create a form and allow users to add new record to database so let us get started the very first thing I would like to do is in the notes home visit I like to add a floating action button which will navigate us to our new pairs where we'll create our form in the notes home the dart file after a string builder inside scaffold pass the parameter floating action button floating action button child and child should be icon let's say add on pressed so in on pressed which we should navigate to our ad not Spencer navigator dot whose name at not in order for this to work first we'll create our add note space so inside paces at the dot add note the dot here import material and let's create a stateless visit add note PES give a up bar and it has a single so I'll disclose you with a column that has a list of children finally in men dot dot we need to setup proud so that push named when it calls this add note it said no which we said to load we can do that inside our material app we have a routes parameter routes parameter is a map so the key will be our route add node and the value will be a builder that gives context which we do not need and that returns a wizard that will be our add North pace so this is how we can set up named routes now if we press the Add button we are taken to add node paste in the add node pace let us now create form fills and buttons that will allow us to add nodes detail first let us provide padding first in else I'll disclose you padding of all sides let's say 16 points now in the column let us create our fills text filled with decoration level text let's say inter title let me duplicate this and let's make this inter description and let make this multi-line max line let's say for let us separate these two visits by size box of height 10 again share separate by size box height 10 and let's create a button red button child text save on press for now let's just keep it empty so when you press the Save button it said save this note to database so first let me convert this to a stateful VZ it will give us a error let's go back and load it again okay and let us create controllers for our text field text editing controller title controller description controller and let's create a global key for our is coupled scaffold step in its stead here type of controller is text editing controller and description controller is new text editing controller also let us create description focus node so that from through keyboard action we can focus description film from title field we'll see that later how focus node description focus mode and shear let us assign controller controller description is focused on description or when it tap the Save button we'd like to do few things first if title editing controller dot text that is empty if it is empty they turn we do not like it to save we like to saw a message so he dot or instead so this is the scaffold keys for a scaffold estate so current estate dot su snackbar [Music] the snack bar content should be lets say title is required so if we press that now let's go back and load it again let's see if we have some errors displaying here debug console there we have a text was called on null title controller this is not null let's say let's go back let's what restart once we started let's add this okay step it's saying receiver switch snack bar was called and now okay so we have not applied this key to our a scuffle so cheat underscore T now let me clear this okay now we get a masses title is required if we enter title and press save there is no masses so if title is not empty we would like to create a new note object from title and description note is equal to more title' title controller dot text description description controller dot text created at is dead time now finally user ID provider of is a repository context dot user dividing so now we have our note object and if you remember from previous tutorial here in notes on we are using a database service class a generic class to load data so notes TV we have created notes TV and we are using this to load data so we'll use the same notes TV to create data so notes DB dot create item a wait let's make this a sink okay and if there is no error either chord instead dot snackbar text it's saved successfully finally we are ready to clear our fills title controller dot clear yeah so after adding the note to the database we can either navigate back to the new space by doing navigator dot pop or we can just sue the masses clear the description and title and stay on this page so for now we like to stay on this pace so let me add a title and in description and let us press save we are getting an error so could not find the correct provider user repository so it could not find thee is a repository let us check men dot dot are we providing provider No so homepage so we are providing the provider in our home page what we would like to do is so copy this and remove this from here so in home page there is only consumer and in mint dot dot let us wrap it with new wizard and this new wizard will be our chains notifier provider let us import use the repository and also import provider package so let us now hot restart and go to add new from app is a now if we press serve its itself in the database not safe successfully and our fills are created and if we go back now we can see new node from app in the list of nodes so I like to add a few more things in this form to make it more easier for users this thing I'd like to do is in the intertidal this button suit so next this keyboard button suit so next instead of check so that when user presses this button user can highlight the next field we can do that by using this focus node and shear we use first we give text input action so that will be next and editing complete so when editing is complete what we would like to do is focus the scope of contacts dot request focus description node so when user presses that button we'd like to focus the description node so now if we press on the title field we see there is a next button and when you press this next button the next field is highlighted so this is how we can use focus nodes to make forms more easier to navigate next in the save if there are no is what we'd like to do is we'd also like to hide the keyboard if there is any by doing focuses scope of Panthers dot request focus new focus mode so now if we see another note so I think we'd like to hide the keyboard only when the note is successfully saved in the database now if we press save yes the notes F successfully and the keyboard is hidden instead of doing this what we can also do is if notes itself successfully we can just do navigator dot pop that way we'll be directed back to our list path so if we touch now navigates compare so if we press save now when it is SEP it navigates back to the home page and this has no meaning so we can hide this too thank you everyone for watching this tutorial this is how is how easy it is to add new notes in the database in the next episode we will learn to update existing records in the database and delete any existing records see you next time namaste and welcome to part 6 of flotter complete up tutorial series in this part we are going to improve the design of list view a little bit and we'll add edit and delete actions and if we have time we'll also implement edit and delete functionalities so let us get it started first in order to add in edit and delete actions I'd like to use a plug-in called sly devil what that allows us is when user slides from left to right or life right to left it opens up our action panel where we can add multiple actions so let us view the plug-in page first so this is the plugin let us install this plug-in in our pop spec file here of respected animal let us add this dependency and pop that gets drawn in a while before that let us see not sewn okay so here is a ListView item builder it simply uses list style so what I want to do is instead of this list style I want to develop a new widget so in UI let us make a visits folder and in here let us make a new visit called not item dot dot yeah inside under let's see this style and this should def not this will be final let us create a constructor yeah title here in this Felder instead of this so here instead of this list style so what we'll do is return not item not is snapshot data index you should see the same oh now in the note item let us improve the design a little bit let's say first let's give this iske for the background color off let's add 300 and container decoration border all that's white symmetric vertical 4.0 horizontal 8.0 okay now in this we would like to implement our sliding panel so let's see the readme here how do we implement the sliding panel so we wrap it with a sly devil first okay and we give it a action pin action aspect extent ratio so let's try this container top with Weezy and here let's best this okay let us import a sly devil package library and finally we need a action for here I'd like to use secondary actions okay so instead of here I can should be let's say delete delete this is delete action I can say okay this is good this is fine now let us try see we can see edit and delete so I think we need some changes okay can we exchange this swap which parent yeah this is better and instead of more this icon all our should be that says new idiot and this is delete edit and delete action so we now have edit and delete action we'd like to perform these actions so for that we'd like to pass a function let us pass this to the constructors yeah and shear whatever is on it let's pause here until it not let's pass the but each node we are deleting here we would like to make this a required attribute required require and in not song that has passed those required attributes on the liquidator node so these two functions are where we'll write our delete and edit functionalities so delete one is the easiest so let us first implement the delete functionality so for delete functionality what we can do is we can use node DB dot remove item nor dot ID so if we do this this will simply delete our no it's a delete are not okay we are getting missing platform missing or insufficient okay so in the first row we have created we don't have enough permission let me pause the video and show you the rules get back and show you the rules and how to fix these okay if you get a permission error like mine if you go back to the database section in your project and in rules section and somewhere you find rules like this mine the rule was allowed till December 11 so it is gone for now so for now I'll just like to keep open read and write access to everyone after fixing the permission now if you try again to remove the item it should work properly and items will be removed see however what we would like to do is we like to get a confirmation from user before deleting the item so let us implement the confirmation so let us make another function inform delete in this we will use so dialogue context we need to pass the context here their context and this should be future it's a return future pull sync return and builders should be contact let us return all that Tyler title text content and let us use actions flash button text know and trust if twice more than we should return navigated that pop with false and similarly if pressed yes navigator got pop with two and up here what we'll do is make this a passing function and if awake inform delete only then a Reno item so let us test now the lid we get the come from we say know them this is not deleted if we say yes then this is deleted thank you of everyone for watching this tutorial in the next episode we'll continue and learn to edit and update our existing notes namaste welcome to part 7 of slaughter complete up to toriel series in the previous part we implemented the edit and delete actions on that we implemented delete actions so in this episode we are going to implement our edit action that will open the edit page and we will be able to update our not sir let us begin first to allow updates we need to make few changes to our add note page so in add note paste what we'll do is we create a property called node and we create a constructor for the node field this is optional and in unity state first what we'll do is we'll check first we create a bull edit mode so if edit mode is true when edit mode equals to V Z dot mode is not equal to null if notice path then this is edit mode so here in the text controller what we can do is if text if it is edit mode if it is a lit more than we use that more got title otherwise now same for the description description otherwise now so this way we get the editing value and down when we press the Save button here what we would like to do is if edit mode we would like to update else we'd like to add okay so if edit mode notes TP dot update item and in what I this would be if it is more than note that ID otherwise no okay now in the notes home in on edit function we simply do dot who's met repair out builder here add nor face nor will be no okay now let us test so when you press it it okay so we get the existing value let's just this and let's try to update it another note one two let's say okay so it is successfully updated and we can go back so I'd like to make few changes in the editor add paste when we press the Save button we would like to so our processing so in add note paste let us create another bull processing and let's make it false by default false the change they state so let us get back and come again and when this is saved on press F first we set processing to true and when it's done before we navigate back we set a step processing to false and in the Save button inside well do if if processing true then we saw circular progress indicator otherwise we saw save and in on pressed it processing then we use a in P function otherwise P is passing okay so now if I press save this is a processing okay what we want to do is if processing we just won null this way if I press Egypt okay we can see the sort to the progress bar and D never gets back once the processing is complete thank you everyone for watching this tutorial in the next episode we will continue and add more features to our app namaste welcome to part 8 of slaughter complete app tutorial series in this part we are going to implement the details functionality so when we tap on one of these nodes we will so the detail space where we'll show the notes title and description so let us first create our page so in phases let us create a new pace notes detail the dart import so start this visit which is cabal let's name it no detail space and titles it be details and on the top let's get a node as a parameter node let's create a constructor and this is required required and down here we have a node first let use text for that title contact our tech team title fight let's say ten description text and our body 1 and in notes home first in notes item we'd like another function called on tap on tap in the list style and not some similar to only detail on the lip we use on tap we get note and see a we navigator who's the older and here we return notes detail page notice now let's format again so if we press this on top okay we are getting some hair try to initialize okay we have not passed it in the constructor on tap note item this start on tap so now if we tap we can see the little space let us style it a bit first let us give a padding all sides sixteen points thank you everyone for watching this tutorial so in this part we learnt to create and navigate to details pairs and so the details of our notes

Channel: React Bits (Damodar Lohani)

Views: 10,035

Keywords: flutter

Id: m_rdbYhWou8

Length: 139min 42sec (8382 seconds)

Published: Sun Apr 12 2020