Flutter GetX App Tutorial 2021 | Flutter App Development Tutorial For Beginners Android and iOS

[Music] [Music] [Music] [Music] [Music] [Music] hello everyone this is another fluttergarx tutorial and we'll be building an app the one you saw earlier in the video as a demo okay anyway so if you downloaded the starter code from the link below you will have a project like this and in the project you'll have img folder json folder and of course our default lib folder and we'll have this few json files and images that would be that we'll be using in the project anyway and at the same to make sure that you have this version or get x get x version this one okay and then don't forget to run get pop and you should be good to go all right so right now we have this uh file over here the main.main.dart file if you run it you'll have a blank empty screen like this okay so this is the default code but now this is the home page that we want to go ahead and show once it starts okay so this should be in your packet the package you downloaded from the link okay so what do we do uh we'll just directly change it first okay and we'll see the result so what we'll do call my home page okay and then once we do that we'll run it okay yes okay so we'll have a beautiful uh starter screen this one okay and you click on it definitely nothing will happen okay so and everything should be working fine if you come over here there shouldn't be any error so the first thing we want to do we want to be able to click on this page over here get started and go to a new page but right now of course it's not working but as i said earlier that this would be a flutter gatex tutorial or get x app so the first thing you want to do want to turn it into a get x app so what you need to do you need to get get material app instead of uh material app okay so that's the default entrance for gatex app in flatter all right and if you run it it still work okay still work and you shouldn't have any error but here you'll see some of the things that being initialized okay now we want to be able to navigate it okay so to navigate it a few things we could do we can change here our initial routes so flutter get x has this property which is called initial route in general it's it goes with the slash and after that we have to define some of the pages that we want to use in our app okay definitely we are trying to point to our initial route so it has to correspond to certain things all right or certain pages or dart files so that's what we want to do so we use another property called get pages and it has this uh list okay so here we need to define the pages we want to use okay so get page now once again the name is in our case would still be using the slash which refers to initial route or but of course it could go to anywhere you want okay for example now we'll refer to a page which is called my home page this one okay all right so what will happen we'll call my home page my home page okay but of course it was earlier their home page okay so but instead of flatter default routing would be using get x routing okay now what we'll do if we run it once again nothing will change okay what we did just now we had this home right and over here we did my home page my home page this one right okay now instead of doing this one now we are doing this one but it doesn't change anything actually but it helps you with the basic structure of get x okay so even if you take this out as i showed you earlier it would work okay the same thing nothing changes all right but we don't want to use this we want in we are in get x ecosystem so we want to use this one right okay now once again this page is referring this one okay but with this one the beautiful thing is you can change it okay like for example you want to refer to page like this or this let's go ahead and see so we'll call content page all right okay so now let's go ahead and run it so we are seeing different pages okay so these are the pages that we'll have in our app and uh another page that we can use as initial route which is detail page so we'll just call detail page over here and let's see okay so these are three main pages that we have and as you see we can navigate to those pages or find those pages using initial routes so in flatter get x the initial route refers to whatever the page you want to go okay it doesn't really mean home page it could take you to anywhere all right anyway so what would do would be going back to our my home page because this is the page we want to bind with our uh initial route okay so let's go ahead and save it now we are back to this one now we want to be able to click on this and go to somewhere right okay so what do we want to do let's take a look at this page my home page over here now once again this is not flatter ui tutorial so i'm not going to explain to this but you can take a look at this thing if you have any questions just leave a comment below definitely i'll answer your question as soon as possible okay so this is a beautiful a ui that i have done but uh i'm not going to explain here okay you can refer to my other tutorials anyway so now here we want to click on this page uh click click on this button so let's find our button this button is this elevated button okay it's somewhere line 70 okay and here we have this on press event okay all right so what we could do let's let's go ahead and save it run it one more time get started now if we click on it uh well it's it's not doing anything right but we want to go somewhere all right so let's see uh once we click on this thing um we may want to go to this page okay content page as we said early okay so how do how to do that but because we are in uh flatter get ex ecosystem so what we could do we can do get to all right okay so now we want to get to this page so what page content page so let's uh call this page and it's pretty simple as that okay now let's run it once again okay now click on this yes so our clicking is working so just now we were the earlier page now we click on this one it takes us to this page okay now some beautiful things about this page once again i have beautifully designed this page for you guys because i really hope that you guys show this app to your clients and get started with your career anyway so these assets are all there if you download them from the link okay and then the thing is that this is also scrollable over here all right okay so this is the page we are now so let's go ahead and content page over here so this is our content page okay um so this is the content page and over here a lot of the things are static right now as you can see there's a title the text these images and oh things over here okay so now we'll do we'll be able to we want to fill them in and then we want to be able to click some of these buttons and later on then go to other new pages okay that's what we want to do as we saw earlier in the demo section okay so now the first thing we want to do we want to be able to import some of the data okay so to do that we are going to work with our json files so definitely we'll be using a few json files here so let's see our json files so we have these three json files over here okay so two of the jsons file would be using in this pages one is recent on the detail this two these two json files we'll be using okay so uh we want to load the json files okay so to load them first let's say we want to uh declare variables two variables uh because we want to load the jsons file and save in a variable okay we'll say first one is list and it's for now would be empty the second one is also list the type of list and the variable name is info okay all right so now we want to load our json files okay all right now to load our json file we would be loading them in our inits init method okay so let's go ahead and call it so we'll call void init state state okay all right now we'll call super dot in its state all right okay now over here we'll call our function okay so i'd say this would be a private function so we'll call it read data okay all right now we'll define this function here all right okay over here we want to load our json files to load our json files we'll use a function which is called default asset default asset bundle i guess this is it okay and then it is another method but it takes a context so we'll pass context over here and within it we have this method which is called load string and over here we'll define our json files path okay so they're in json folder and the first one we want to load is recent.json this one okay and then so this is the file we want to load from this path and then once you load let's save it a variable we'll call it s okay and then um i guess we also need this bracket because of this one this bracket this bracket okay all right now we want to load them right so this is the path and once they load we want to save it in a variable which is called s and then we want to decode them okay so now in general what do you do just decode them um then you you can call json.decode i think the code and then you put your variable as here and make sure you import it i think it's already imported somewhere here this one okay uh but what happens once the decoding has done you want to notify the ui that this data is ready and the decoding is done and we want to re-render everything with this data okay so because of that one you want to wrap this using a state function uh state set state function okay so now once you load everything within set state function the ui will know okay there is new data so let's re-render it okay so that's what we want to do okay and uh of course this may take time so that's why you want to use a weight okay to loading and decoding things like that so you need to add another modifier a sync with your function okay and then after that we should be pretty good to go so this is the data that we want to load from recent.json file once again take a look at this one so this is the file over here okay so there are a few images and things like that okay they're right so what we'll do let's come to this page over here all right so that's one thing and the second one we also want to load is uh another file this one i guess which is called detail.json we want to put them here and then able to click and go to another pages all right okay uh so let's go ahead and re load it once again uh we'll just copy paste it what we'll do we'll change this json file name and the variable in instead of list in this case we'll be putting them in info variable okay and i think we should be good to go so now our variables uh contain json uh in adjacent string i guess or just an object sorry so now we could use them okay we could get the keys and values from our json uh variable which is called info and a list okay so now the first thing you want to take care of i guess is over here okay uh this uh page builder view i guess okay now we want to put information here so now let's find it so let's see this is our james smith this section sized box popular context and we have this uh another uh container now this container is the list one which is this one okay now over here we want to access our variable so the first variable we want to access is info which we saw earlier this one okay all right so let's go ahead and do it so now info should have the have a length okay so whatever the length it is uh we will use them okay so in general the length should be four because i have four objects over here all right okay so now after that you might want to check whether it's null or not okay so if uh if if it's null then we'll use zero okay if info let's see so while now this is the length so in general whatever the objects you have here uh it should be the number in our case it would be four okay and after that here let's see uh some of the things we want to change like the title okay so we are going to look through it which i already have done it okay so the index is i so all we need to do we need to call info i now we want to access the key from here like for example this one so let's see so info is using detail sorry so let's go and find uh this json file detail okay instead of using this one we'll be using that later okay now over here okay now here uh we have a couple of information like name title text and time so we'll be using all of them okay so now the first one we want to use i guess that should be say title okay okay now let's rerun our app now let's click on this okay so the titles are already showing as you can see over here all right okay so what we'll do we'll go ahead and fill up all this information very quickly okay now this one i would say the text okay this is the this field i guess text field okay so we'll do we'll just call info i text all right so as you see already it's showing up over there all right uh the next one we want to do is uh the images we want to change okay now right now this is the only one image that's showing up everywhere okay so what do we do we'll just go ahead and change the images over here so we'll call info i img and once again this is this key img okay so now let's go ahead and save it now as you see they are changing so every time here this title and this information is different like e-commerce app ecommerce logo app logo app so i just changed a little bit but of course the images are same for now uh we can change the images based on different json file and information but that would increase the complexity so i'll leave it up to you you can change it later and if you have questions you can just ask me i'll leave a comment below and i'll help you okay all right uh so that's pretty much with this section now we want to be able to click on this and go to somewhere right so and this is the most exciting part for get x okay now here on gesture gesture detector has a property which is called on tap so you want to be able to use this one okay okay so once we click on this one we want to go to somewhere okay so get to named so i will use the named route the route name is detail okay all right that's all we want to do okay we want to be able to click on this and go somewhere okay now let's go ahead and save it and see okay i think we need to use this semicolon over here so now let's go ahead and see if we can click and what happens after clicking okay so now of course we can able to scroll through them now click on this now it doesn't go anywhere okay that's because you said it's a named route so once you have named a route you have to define the route over here okay so let's go ahead and define it so get page so our route name is detail okay so this is the route name and it should go somewhere once you call this route so where where will it go it will go to a page which is called uh my detail this page okay so this is the page where we want to go so now let's come to this file and we'll call detail page okay so now this is a route well this route can of course take you anywhere all right now we are going to this page so let's go ahead and save it and run it and see if we are able to navigate to that page so from here and now let's click on this yes so it's working right so we are clicking on this and it took us to this place this page now we can go back or maybe we can't now we'll fix that later i think we should fix it first so let's go to this page where it says my detail and i think here is a container there should be at the top now of course if for now it's null it's not taking you anywhere right so uh we can change it but once again because we are in get x so we'll just do get to now let's see we can do get back so it'll take us to the previous page okay uh let's run it once again click on this now let's click on this so it takes us to the previous page so once again in get x if you use uh get.back it takes you to the earlier page wherever you came from of course we can to get the two and say we define a page where we want to go okay but in this case i don't think we need that okay we're pretty good all right now okay the next thing we want to do we want once we click on these things we want to pass the title name text and other related information okay that's what we want to do uh we want to be dynamic okay so now to do that uh from here we need to pass some arguments okay and in flatter get x is much easier just call arguments and it takes a list okay now over here you can pass list of arguments that you want to pass okay so well definitely we want to pass argument uh for our title so t-i-t-l-e and then i think we can transfer it to string okay so now you need to pass it to a variable so that you can grab it so we'll call the variable is a title okay that's how you write it all right so let's see do you have any error we should oh i think uh i shouldn't use this i should use this one actually and over here yeah so it's not that third bracket i think it's second bracket okay sorry so now let's go ahead and save it so let's make sure we are doing good yes so no error that means this section is working but now we need to receive it in our page in detail page okay so what we could do we can find where it is uh this section i believe this should be somewhere let's see positioned widget so let me find this word which is called title control f title okay okay i think it's it is here it should be here okay so now over here we need to grab it and it's with flutter get x is much easier all we need to do to get dot our humans this one and name of the variable that you took this value so the variable name is a title so what you do just put it here title okay now we'll save it uh yes so the title being passed okay now let's confirm with the another slide so the title is being passed it's pretty dynamic so click on this and the logo has been uh the title for logo app is being passed as well okay so that's pretty cool right so now what i'll do just i'll just copy paste this one and pass a couple of other arguments very quickly all right i guess second one we can use as and this is text as well the third one say name we'll do name and next one say img so we are passing an image image path actually not really an image the path you don't want to path past image that would be too heavy you always want to pass image path and the time okay now these all these things are being passed to this page okay so all we need to do is to grab them in this file one by one okay so let's see what is being passed next so we saw the text name img so all we could do we can just find them and replace so i guess this is the text one so once again we'll do let me copy this thing and [Music] over here just put it and call it text all right let's save it and make sure yeah the text is being passed right uh let's uh do it yahoo app yes yeah yeah right so everything is being passed uh pretty smoothly now over here instead of name we'll do arguments name and once again this corresponds to this section over here name name name right okay uh so let's go back to our file this one one more time deadline i don't think we need to change okay what do we do we can save and see that things are being changed and another thing over here i think this one we can change as well uh let me let us see our uh oh okay so this is a prize key so all we need to do we need to come to page over here and create another argument and we'll call it prize and this is coming from variable price and this price uh this field or key has to do with this one over here right okay so now let's go to our detail page over here uh we'll just call sorry uh we can use copy let's copy this one and come to this section over here so line 207 and over here we'll put it and change the name to price okay now let's see uh i think we have an error okay so let's restart our app actually maybe it will fix our issues sometimes it happens yes so the price is 200 for delivery app and say for e-commerce app the price is different okay so every time it's dynamic all right and the names are different as well okay now over here we want to change this thing okay now uh our names and images are same so we want to display dynamic images and name okay to change the names let's uh find our file which is called my detail and it should be at the top over here let's see i think somewhere here right okay so instead of background image what we'll do we'll just call let's see circle water so we'll do get arguments get that arguments and over here we'll call ing okay and it will have the image path and it will take the image path as an image and it will show it okay uh yes as you see the change and we can also change the name over here so once again get the arguments and the name so these are the things we already passed in this section so let's go ahead and change it the name should be changed uh okay let's see so now this is the first slide uh this name is different the guy is the guy and name everything is dynamic right now let's go ahead and click on the second one the guy is different the name is different everything else is different so everything is working pretty fine so far so we are we are happy with this section right uh okay so now what else we want to take care um so there are these images right so once you click on them you also want to able to see different images for our guys okay so now let's come down to this section i think it should be right below total participants uh let's see where it is i think let's see total participants and it's over here right okay now as i said earlier in this page we want to deal with some other json files uh let's see the json files so i think this is the json file we want to use right now img okay all right so let's see img this one okay so i think here we have some images that we can use directly uh to do that so let me what do i do to be able to look good let me collapse them because right now it looks a bit messy okay uh over here [Music] over here let's get organized a lot of code over here over here okay we are pretty good now so a background image okay so we want to deal with this sections over here okay so here we want to load bunch of images and show them dynamically okay so to load them once again here we can use uh actually we can copy some of the code from here say let's say we copy everything from here to this one and come to this page and paste them all right now i guess we don't really need this uh recent section for now so we'll delete that and we'll also delete this one now i'll call it a new variable i'm gs and mgs now instead of detail.json we'll use mg.json which is this one okay now with this we already worked on this function early so it should be really good it shouldn't have any problem okay let's run it and see that it doesn't throw any error okay now let's come to a different page now let's click on this okay so so far we are good no errors now we want to be able to use this variable it holds a lot of information uh from this file okay especially the images information so we want to just take out this thing i mean to be able to show this one okay and would be showing this one over here okay so now we i'm using a for loop inside this stack widget so just go ahead and call it mgs.length so now whatever the images it has that should be the length okay and now over here we want to access them dynamically so we will do mgs i and the key is ing so once again this is the index which is this one okay now let's go ahead and run it and see okay let's click on them yes so as you see the images are a bit different i mean they're different images right just now it has the same image okay so now our links are all working once again okay all right but for each of them actually you can use a whole lot of different images but now in that case you'd be needing a lot of json file different json file but in real world of course they would be coming from your database those information you'd convert into json and then show here but you get the idea okay all right okay so the next thing we want to do uh another thing we want to do we want to be able to change this images okay this image is over here all right uh so these images are in a file called content page.dart over here okay uh i think this should be let me collapse them okay it's pretty master right now we don't need so many of them okay so we'll be using the last section which is expanded over here once again the ui has been done okay now we want to change this one okay and show the images okay now let's see what we can use uh our date detail has a few of the images over here okay on the uh actually we can use any of this json file to show different images and information okay so i think uh i would be using recent.js let's see recent.json has already been loaded so and the variable uh the information is saved in this variable which is list so what we could do we can just directly access it over here list dot and then length so with this we'll get the length value and now here what we'll do we'll just access it so the list i img okay now let's save it yes so we have different images now as always we can change this things status and the text like that okay so what do we do we'll call list uh i and this status okay the status should be changed and they already did but they're too small we could do you can change it to a bigger fro font i guess so we'll do say 18 so it looks a bit bigger okay and the color uh let me use a different color to look better so i would use [Music] say this one orange color yes now it looks much better okay and this one you also want to change for now it is a text so let's see our file um yeah we can use the same key which is a text okay so let's go ahead and change it so we'll do list i uh text once again this json file would be coming in real life from your server so in general you you also don't need json folder most of the time okay they're directly coming from server and in this backup back end of the server you need to convert them to json or in flatter you can do the same actually anyway so now let's uh come to this page and save it yes so now we have different text all right yeah as you can see all right so everything is good so far now another thing we want to do we want to be able to click one of these buttons over here and to go to a different pages and for that would be using flutter get x okay all right now this is the page and over here let's see recent recent contest yeah we can use this this is the place where we want to deal with so let's open it up recent contest and over here show all uh we didn't show all here yeah gesture detector so over here we want to create uh on tap event and as well as an icon so first we'll deal with this child and the child is icon we can use icon icons arrows now we want to use forward arrow this one and let's select the color with the colors dot white okay all right now let's save it yes the icon is there now we want to create a tab event so we'll call on tap this one and now we want to go to somewhere okay now to be able to do that what you could do we can just call get.2 and then we can create a page okay and we'll go to that page so the page name say all con i will call it recent con tests okay and we'll close it with semicolon now of course this file is not created uh this section i didn't do in your default file which you downloaded from the link so i'll create a new file here and i'll call it a recent recent test don't dart okay now okay just say yes and say we'll create a stateful file and we'll call it recent com tests okay i think we need to import some of the libraries okay this one okay now for this one uh what we could do simply we can copy this code okay and this code is somewhere say for example okay now i think we have an error so let's take care of this one first so we can import it the arrow should be gone and if you save it and now click on this it'll take you a new page of course it's a black completely black right now so uh we want to change this page okay on the instead of container will return our scaffold over here scaffold and scaffold has a body section so with the body okay and within body we want to return a container and sorry container and within container we want to change the okay so let's see change the background color for scaffold and we'll do color ox f f c b e six f six okay now let's save it yes so this is the background color right okay well once again this is being connected from here so as you clicked on it this it came over here all right okay now within it we want to create uh say child and within child we do say column okay and within column we want to do say children right and we will use expanded widget okay and within it we'll use a child which is called single single child scroll v if we don't do these things actually we'd get error because we want the whole page to be scrollable okay all right okay and once again within it we'll have a column and then we'll have children okay now this section here we want to put some code on that code actually let's see we can copy directly from here let's collapse that and this is the code actually that we can copy this is the code we can copy this part and just put it i would say right here and before we do that actually we can do let's see now definitely it shows some error because it's looking for some of this information that it doesn't have now what you can do we can copy this file over here okay so what we'll do we'll uh copy this one and put it over here and i guess what we will do we'll just keep this info this variable and the others we don't need and it's asking to import a library let's do it import the convert library and it's imported now let's see we we still have another error so it's asking to import the get x file so we'll do that import package get the dart this one okay now the arrow should be gone now let's save it uh well no it's being cranky in the x throwing an error because let's see this one with okay so it is saying that we don't have this one so what we do we'll just copy this section which is the width and put it over here okay so now let's save it run it nothing is there yet so let's run it one more time now get started now we click on this yes so everything is there right but now we want them to be scrollable up and down not left and right okay yes so let's see what are we doing just now uh we were here okay yeah so we want to be able to look through that okay because right now it's not really looping through so we will call this for loop it was int i equals zero and i info length and i plus plus okay all right let's see and now this because of this page view builder it's being left and right like this so we can remove this section okay so first remove uh this i guess let's see this one okay and over here at the top uh let's see remove this completely okay remove this section completely and we still have this error i think we also need to remove this one okay the error is gone okay now we because of this one i think we'll have this uh let's see run it okay now yeah it's it's it's a scrollable or not scrollable yet because the content they're all packed right so we want to change the height of this thing so instead of 220 so let's do height of 300 and let's save it okay now it's scrollable as you can see and but of course it looks a bit ugly what do you do we can add some padding or margin to it so we'll add some margin to it okay we'll do const edge and sets only say bottom say 30. no there there is this uh padding with it and now this container the the parent container we can apply uh padding or margin to it okay let's see why where we have this section over here um i think uh another thing we could do we can define the width okay or we might we don't need to so over here we can define the uh margin so cons edge only so left 20 and top say 100 now it looks better and we can also do right padding okay so do right so right already has a bit of padding so we can apply the 10. now as you see it's working perfectly we can scroll it and uh i think i clicked somewhere okay so logo app so you're coming here now with this is going back to the earlier page okay let's click on this now once again it going back to the earlier page okay now the problem is we don't want to go there so we want to change this route over here once we click we go to the content page okay to content page all right so now let's go and save it right okay we're clicking on this button and now we can scroll through it but we can of course put an error over here which we'll do very soon and now you click on this one okay yeah so but with this i want to go to the home page content page so let's click on this yes we are here now click on this we are here click on this we go to the home page you know click on this we come to this page over here all right okay uh another thing i think is looking a bit weird of this one so it's the height let's change the height which is over here uh is it too much so we can do 280 or 40. you can put more things down there it's up to you so but the basic structure has been done let's see the null i think uh we need to restart it and then everything should be good let's see yes it's working on this it's working now click on this yes we don't have any error now click on this we go back to this page okay now you can put different kind of menus wherever you want okay it will take you there so if you want to put a menu say for example for this one it's pretty easy so all you do all you do is uh here use the property called appbar and then use the constructor and of course here we can use some of the properties which is called leading the intake could take an item button because we are going to be able to clickable okay and then two properties we must use one is unpressed okay for now let's keep it null and then we can also use uh what is the other property it's called icon okay now here we can use icon dot icons sorry it should be constructor i can start say arrow now we want to arrow back ios this one okay now let's save it and see the result now what we'll do we click on this thing oh sorry not this one over here now as you see we have this uh back button okay of course it doesn't work because the event is not uh bound with it so what you could do you can just do um got get dot back so we just want to go back to the previous button and it'll work right now okay it works right and click on it works now over here it has a bit of padding and the padding is coming because of this one so instead of doing 100 now we can do just 10 all right okay so now this is the padding that we have now of course this is the back button okay now as you see we can come back all right okay so it works uh but the few other things we could do to change this background color okay now the background color i guess we can uh set it here background color and we want maybe this background color and i guess i have this photoshop over here so like just click from it and yes copied now change the color um ox ff this color all right now let's save it and see the result oh yeah i think i'm pretty happy with this okay yeah i'm pretty happy um i think it's okay but of course there's this bit of distance uh this white space well i can do it now but it would be your homework let me know how you solve it if you can't then i'll let you know okay this white space that should be part of your homework all right okay and what else of course after this uh these things are all clickable as you see all right we click just go back to that button this is the previous page uh and now we can click on this and this now we you click on this it will it'll take us to the home page this is our home page all right you click on this it comes here click on this it go back to the earlier page but if you never get through it now it will take to the home page right so we want to change the icon instead of back arrow this one we want to have a home button now this is in detail page so let's go ahead and fix it all right uh let's collapse them okay now this is the icon i think we are using here of course it's not app bar it's the we we customized ever i would say i mean that's what we made all right okay so here instead of back i would say home so i think home button would work better outlined okay yes okay now i guess we can change the color of this thing so do color colors dot white i guess with this it'll look much better so it takes us to home page all right now let's navigate it so go back to home page now click on this now deep down in the app now click here it will take you to the home page all right okay so that's uh all about this app now the next thing we want to do is uh over here say for example you come here and click on this thing and you can add it to favorites things like that and this would be pretty easy with get x and we already have this uh architecture so what we could do we could go ahead and create a new file and we'll call it say detail controller dot dart okay so yes okay now here we'll we'll call create a class we'll call it uh detail controller extends uh controller i think it's a gatex controller sorry get a good controller get x controller yes right okay now here we want to declare a variable we'll call it var say okay and we'll do it say default value is zero and we want to make it observable which means this would be a state variable so it would keep the track of this value and we'll see how it works okay now over here in my detail page you want to access this controller and it's pretty easy so what we could do we can just call here say a final fav uh final uh detail controller and the variable name is fab and get dot put then we'll call detail controller okay so i guess we need to import them all right okay now this is called dependency injection so this is a dependency i mean the app depends on this somehow so that's why it's called dependency injection we have a controller and we want to use it when you use it and the way you use it is called dependency injection okay so we want to be able to click on this button and work with our dependency injection okay now here at to favorite this one right okay ah look at this one so over here uh this is our con container this one sorry this one and for now we have this button here icon or sorry icon to now what you could do we can instead of doing that one we can use icon button okay now over here it takes this property which is icon and i guess we also need to use unpressed event otherwise it will throw an error okay for now it's null okay now let's see what are the arrows we are facing now okay so i should wrap it around icon all right okay now let's see we still have an error so this one all right fine okay now let's save it and see okay now we could do one thing uh just to pass a log debug print hi okay now let's click on this uh why do we have this error let's see okay we're good now okay now let's click on this and we have printed high so that means it's working so now here we want to invoke a function the function we want to write here we'll call it void fev counter okay now we'll check if dot value is equal one okay now we'll give a message loved it you loved it okay all right now else if it's not one what do you do first would increase the value plus one one and then we'll send a message now i can see you you already loved it okay you just loved it just loved it okay so we'll have a message like this so with get x control it's very easy they're getting the smack bird just you write get dot snack bar and you send a message all right okay so now here we want to call it okay do remember that early we initialized this variable fab which is detailed controller type so we can access the methods and other resources from here so that's why it's called resource injection so you're injecting the resources over here so what you could do we can call fab dot uh fav counter this one all right okay now let's start our app okay all right and let's see over here now we click on any of this okay now you click on this so you just loved it okay now you click it one more time is that you already loved it okay so the messages are different okay so that's how you can keep the track of your favorite items but of course uh in future tutorials we'll see how to submit this thing in the database okay right so that's with uh detailed controller but now if you take a look at this one there are a lot of variables that you can play around with this okay and some of them could be very interesting um let's see we have the title border like box shadow on tap is dismissible blur overlay uh background and maximum width so you can play around all of this but for in this tutorial which i'm not going to uh because we can do a lot of other things all right okay so now with this section i would say we are pretty much done now your homework should be to be able to create another json file pretty much like this but another json file and show it here and to be able to click on it okay for now it's not clickable but if you follow this section you'd be able to click okay so your homework is over here make it clickable you go inside it and you will have a list like this with different information okay all right and then you'd be able to click on those things and go to a different kind of detail page as you want okay so that's how you should do it all right this section i'm not going to do in this video but this should be part of your homework so you should do it and let me know if whether if you're able to do it or not and if not then i'll help you there are many different ways to do that and of course in future tutorials we'll also see how to upload image from here and submit it to the server so uh well if you also want to have a get x tutorial with back end things like that so don't forget to leave a comment below and we'll make videos based on that thank you so much so for now we are done with this tutorial and thanks for watching and if you liked it smash that like button share the tutorial do [Music] my [Music] mum [Music] [Music] you

Channel: dbestech

Views: 49,413

Keywords: flutter getx app, flutter getx tutorial, flutter tutorial, flutter tutorial for beginners, flutter getx state management, flutter getx route, flutter getx route management, flutter ui, flutter state management, flutter getx, flutter, flutter route navigation, flutter app development, flutter complex ui, flutter app course, flutter getx api, flutter getx navigation

Id: M0OwOYPFkrM

Length: 67min 6sec (4026 seconds)

Published: Sun Aug 15 2021

Reddit Comments

[u/a-rns]

I'm amazed at people's trust using GetX. Probably they are beginners with Flutter or here is another method to wash beginners brain.

[u/2flutter]

Each time I see or hear "GetX", I want to puke 🤮