Flutter GetX Tutorial | Flutter GetX REST API & State Management

in today's video we're going to be learning everything you need to know about the gex package within flutter gex is an incredibly powerful package that provides you a ton of functionality out of the box that can help you create amazing applications fast and improve your developer experience we're going to be building a cryptocurrency portfolio application that is basically going to allow the user to input certain cryptocurrencies that they own and all of this information is going to be fetched from an API and then the portfolio will basically keep a track of the changes that happen to the price of these different crypto currencies and show you at the current Point what the actual value of your portfolio is so for example I can click on the plus button open up the model and say that I've just recently bought ethereum and I bought ethereum of 2.54 and then once this is done I can add this asset and as you can see It'll update the portfolio value and this all is going to be done by using gex not only this we're also going to have the ability to click on one of these cryptocurrencies and then be taken to another page where we'll be able to see some additional information regarding this cryptocurrency and finally will also make sure that all of this information is persisted on the device so when you close the app come back to the app then you're going to be displayed with the same information that you had previously saved within it so by doing this we're going to learn everything that you need to know about gex this includes things at State Management dependency management how to work with navigation and a whole bunch of other things before we get started I just like to quickly mention the links to all of the resources that I mentioned within this video as well as a link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point with that said let's take a look at the dependencies that we'll be using to actually build this project and then we'll take a look at what we have to do in terms of code so firstly we're going to be using the get package or getex as they call it and this is the package which is going to provide us with a bunch of different functionality that we'll need to actually create the application so let's copy this dependency let's come back to our flutter project pspec Doo and then under the dependency section I am going to add get with this done the next thing that I'm going to be doing is coming to the next package that we'll be using which will be Google and this is basically going to allow us to change the phont that we use within our application then we'll be using the do package to actually perform our HTTP requests beside this we'll also be using shared preferences and the reason we're using the shared preferences package is so that we can actually persist the information that the user adds in terms of the different assets that they own so that when the app gets restarted the information is still available to the user and they don't have to be input everything so let's copy shared preferences let's come back let's add that as well let's do command save and that's pretty much all we had to do in terms of the setup besides this what I'd like to quickly mention to you guys is to actually improve your developer experience is also make this tutorial not be extremely huge what I've done is actually left a link down in the description below to the completed source code for this project so what you can do is download that and once you've downloaded the source code pretty much you're going to be doing this and that is to open up the lip folder and then within the lip folder you're going to be copying a folder in from the downloaded source code that you've downloaded now on your system and that folder is going to be the model folder so I'll copy the models folder and then I'll basically paste that in within the lip folder and the reason we're using this models folder is because it's going to make it very easy for us to develop our application and this is basically going to consist of different classes that will help us model the data that we're going to be using within our application so as the name suggests the API _ response. class basically contains classes which mimic the structure of how a response from the API that we're going to be using is going to look like and then this is basically going to allow us to transform the response from Json to an actual dot class that we can use throughout our application and ensure type safety and similarly we have this coin dat. dfall contains a coin data class basically a class that is going to mimic the different information that a coin has and things like that so you don't have to worry too much about this just understand that these are just dot classes that model the data that we're going to be using within our application and they have some utility functions added on top of them that can one allow us to take in some Json and then construct an instance of a particular object and secondly allow us to take a specific instance and then convert that to Json so that's pretty much all what these classes do there's nothing complicated going on here and you'll understand why we're using them in just a bit so with this done that's pretty much all you have to do you can close down the models file there's nothing else you need to worry about so besides the model folder everything else we're going to be doing from scratch so you don't have to worry about I'll make sure that by the end of this video You're a Star when it comes to using gex so now that this is done what we can do is actually come and open up Google Chrome and and then what I'm going to be doing is telling you guys the API that we're going to be using to actually get information regarding the different cryptocurrencies and the prices of them so we're going to be using the Cryptor rank. API and this is an API that's free to use so that's why I selected them and they are pretty accurate data and the way you're going to be doing this is basically come to Cryptor rank. basically register an account for them once you've registered an account open up the site Bar menu that's here on your profile go and come to API and then here what you're basically going to be doing is coming to the point where it says API key and then generate a key here like so then copy this key like so and then you can come back to your lip folder and here you can say that now I'm going to be creating a new file and I'm going to say that this is going to be con. doart and once this is done within con. doart we're basically going to be creating a variable which I'll say final string and then I'll say this is going to be called crypto rank API key and let's do is equals to the API key that we had just copied in command save and now we have this API key within our project we can use that within the different points now with this done the last thing that I'd like to let you know before we actually begin coding is that if you'd like to take a look at the actual documentation for this API you can click on this button here that's also going to be on the actual API dashboard and if you click on this this is basically going to open in a new tab the actual documentation for the API and specifically what we're going to be working with is going to be the endpoint which is list of currencies with data so this is basically going to provide us with a list of different currencies the price for them and everything like that so now that this is done and you have a good understanding of this we can continue to actually start coding our application and then slowly we'll be coming back to this documentation to take a look at what type of data gets returned to us how this API actually works when we're building certain features so let's minimize Google Chrome let's come back to visual studio code and let's get the party going firstly what I'll do is actually show you how you need to set up your application so that get it starts working and the only thing that you have to do is that instead of using the material app widget which basically wraps around your complete application you're going to be now using a widget that is provided to us from the getex package called get material app and that's pretty much all the change you had to do with this done let's do command save let's make sure that we had installed all of our dependencies so you can do that by coming to the pspec mobile doing command SA save and this is going to automatically run flutter PBG for you if you have the flutter extension installed within Visual Studio code otherwise you'll have to do flutter PB get by yourself then I'll do start debugging and I'll wait for this application to actually launch on the simulator and once it launches then I will resume the welcome back everybody so now that the application is running the next thing that we're going to be doing is basically coming to the point where we're setting the home property on our material app and I'm going to be replacing that now we're going to be using routes Within our application which are going to be named routes so I'm going to be replacing the logic for the navigation stack to actually use those instead of the home parameter that's defined on the material app so to do that firstly we need to define the routes map which basically is a key function pair where we basically Define a key which is the actual route name and then the actual function that defines how the route gets built so we're only going to have one route which is going to be slome and that is going to correspond to a function that gets a build context passed to it and then basic Bally returns our homepage which is a widget that I've created under the pages folder within my application which is an empty stateless widget for now so there's nothing fancy going on with this done I will do command save but before I do that one other thing that I'll do is that I'll set the initial Road property on the material app to be slome so this initial Road property needs to match with the keys that are within our routes map so one of the keys here needs to be here otherwise this is not going to work let's do command save and let's see what the error is and it's telling me that null check operator used on a null value so let's stop running our application first and then let's start running it again and hopefully this should fix the error for us and while this is happening the next thing that I'm going to be doing is coming to my homecore page coming to the build function and then instead of returning a placeholder I'm going to say that we will return a scaffold let's see if the application works as intended save there we go it's working as intended so we can move on to the next step so for the next step I'll come to main. Dart and here what I'm going to do is set the dbook and then show check mode Banner to false I don't want to show this debug Banner that we're seeing here with this done let's do this let's come to our homecore page let's come to the scaffold and on the scaffold what I'm going to be doing is basically saying that we're going to have the actual app bar and then what I'm going to do is basically say that the app bar is going to be set to a function which is going to return the app bar so I'm going to say there's going to be a function preferred size widget it's going to be called underscore app bar it's going to basically get the build context passed to it and then the function will basically return an app bar and then what I'll do is basically set this function called to be the app bar like so let's do command save and there we go that's pretty much all we had to do but this done for the app bar we're going to be doing two things we'll have an actual image on the left hand side and then an actual icon on the right hand side which the user can click on to display a model through which they can add assets to their actual portfolio so to do that what I'll do is firstly say that the title is going to be a widget which is going to be const Circle Avatar and here I'm basically going to say that the background image property is going to be a network image widget and then the URL here I'm just going to copy and paste that in it's just going to be a image from pratar CC which is an excellent website that provides you with these placeholder images that you can use while you're developing your application so there we go now we have the image showing the next thing that I'm going to be doing is actually adding the actions list on the app bar and we're just going to have one action which is going to be an icon button and then the icon button is going to have an onpressed call back which is going to be an empty function for now and then the icon is going to be icons Dot and I'm going to do add and that's pretty much all we had to do and one other thing I have to do is make sure that I wrap this actual icons. add within an icon widget so like icons. add there we go and let's do command save let's see if we can see the icon there we go we can see the icon so that's pretty much what we had to do for our app part one other thing that I'm going to be doing is coming back to my main. doart now and basically configuring the theme on our actual material app so that it uses the correct text tee and things like that so to do that let's come to our main. do file and then I'm going to do the following I'll change the color scheme first so now I'm going to say that instead of using colors. d purple we're going to be doing colors. green so our application is going to be based upon a greenish color scape after this is done the final thing I'm going to be doing is defining the text team on the actual tee object and since we're using Google fonts what you can actually do is come to the Google fonts website and whatever actual fonts that you like you can basically browse through the font website and use them within your application so the font that I like is called Quicks sand which I'll show you how it looks there we go so I'm going to be using this one so the way you're going to be using is is just keep a track of the name then basically come to the text team and here we're going to do Google fonts Dot and then basically what the theme is so quick sand there we go it's called quick sand text team and then it's this is a function so we got to invoke it and that's pretty much all we had to do so with this let's do command save that's pretty much all we have to do now everything else is going to be taken care of automatically and the phones are going to be applied within our actual project so now that this is done we can actually close down our main. Dart file and come to our homeor paste.art and start adding some functionality here so the first thing that I'd like to do before I show anything on my homepage is to actually Implement all of the functionality here for when the user clicks on this button to show an actual model and then we'll actually start building up more functionality within the model as well for actually having some drop downs and things like that so how can we do that well since the model is going to be an actual widget that gets displayed and it's going to be a vidget that has a custom style what I'm going to be doing is creating a new folder within my lib folder and this is going to be called widgets and then underneath of this I'm basically going to be creating a new file which is going to be called add asset dialogue so to do that let's do add asset dialogue. Dart and that's pretty much all we had to do and then this widget is basically going to be a dialogue widget so I'll create a stateless widget and I'm going to say that this is going to be called add asset dialogue like so and do command save with this done the next thing that I'm going to be doing is basically saying that we are going to return for the build function a material widget that's first thing that we're going to be doing and this is going to contain a child which is going to be a container then the container is going to have a specified height and width so let me copy and paste those in because this is very basic flutter code we're just basically setting the height of the container to be 40% the height of the screen the width to be 80% and then after that I'm going to set the decoration property on the container so I'll copy and paste that in as well and what we're be doing is basically setting the Border radius to 15 and the color to be white with this done we'll just do this for now let's come back to our homecore page and let's see how we can use gex to display this actual model so to do that let's come to our homeor page. let's come to our actions on our app bar and let's come to where we have onpressed and when the user presses the actual icon this is the function call back that is going to be run so here what I'd like to do is basically run the following function and it's called get. dialogue and that's pretty much all we have to do and then we basically pass it in actual widget here that we like to display as a dialogue so we're going to have the add asset dialogue so I'll import that in and that's pretty much all we have to do and let's do command save so now with this done I can actually come back to the actual button and let's click on it and there we go you can see that now the actual dialogue gets displayed so the dialogue is pretty much taking up the whole screen it's not actually conforming to the size that we've specified but we'll fix that in just a bit but for now you can see that at least the dialogue kind of shows up so that's the good part about this so now what I can do is come back to the adore asset dialog file and here we can start adding some more functionality so firstly what I'll do is come to my container and then on my container I'm going to have a child and then the child is going to be a call to a function called build UI like so once this is done I will say that now I'm going to return a widget from this function it's going to be called build UI and then I'll open up the actual body for this within the build UI function for now I will return a column like so and then the children's list within this column is going to be empty for now and that's pretty much all we had to do so now with this done if I come back to the simulator click on the plus button there's still the issue of the actual dialogue taking up the whole WID or whole width and height of the screen so to fix that I think what I can do is basically on my actual material widget that I am returning I can wrap that with a center Widget the widget is going to be Center let's do command save let's come back click and there we go now our dialogue is appearing the way we'd like it to and it's conforming to the sizes that we've specified so now everything looks great and because we're using get it automatically dismisses the dialogue as well when we click outside of the bounds of that so everything's looking great so now the next thing that we have to do is basically first get access to some information before we can actually display the UI on the actual Di for the user being able to add an asset so to do that we're going to be using the crypto rank API we're going to be specifically accessing the endpoint which is called list of currencies with data so/ we1 currencies and that is going to provide us with a list of different cryptocurrencies and different information regarding them such as the actual price of them and things like that so now that we have a good understanding of this what we can do is actually implement the mechanism so what I'm going to be doing is basically implementing a class that will allow me to send get requests post request or any other type of requests from my application and it's going to take care of everything for me when it comes to sending a request making sure that the headers are correct and everything like that we're going to be using get X package to then actually register this class within our application and then use it at we points throughout our application and this way we will understand how to work with dependency management within gex so to get going I will come to my lip folder and here I'm going to create a new folder now and I'm going to call this Services then what I'm going to do is basically open this up and within this I'm going to have a new file called httpcore service so this service class will allow us to work with HTTP based requests from within our application all I'm going to be doing now is creating a class which is going to be called HTTP service like so and then I'm going to say that this class is going to have a property which is going to be private it's going to be called undor Doo and it's going to be of type do and it's going to be set to a new new instance of do which is going to be imported from the do package now that this is done I'm going to define the Constructor for this class and it's going to not take any parameters but when the class gets constructed I want to call a function called configure de and the reason we're doing this is so that we can set up the appropriate headers on the do object so that when our request gets sent they have the appropriate headers on them as well as the appropriate curious thing so that we get the response returned to us and not an unauthorized response so if I come to the Crypt rank API you're going to see that it tells us under the authentication tab that whenever we send a request we need to attach to the actual request endpoint a cury parameter which is API key so basically we have to add this so how are we going to be doing this well within the configure do function which I'll say won't return anything it's going to be called configure do I'll do the following I'll say that we'll set the do. options is equals to a base option objects new instance and within this I'm going to say that the base URL so the base URL for our API is going to be the following so you can get this information once again from the actual endpoints documentation so this is the actual base API so let's copy that and paste that in and then besides this we also like to make sure that every request has a certain query parameter added to that so I'll set the query parameters property here and I'm going to say it's going to be the following so under the document a it says that the API underscores key is going to be the Cur parameters actual key and then the actual value for that is going to be the API key that we have so we're going to be importing that from our cons. dfall where we had created the Crypt rank API key variable let's do command save and that's pretty much all we had to do so now when we construct an instance of our HTTP service it's going to make sure that do is configured properly and that the base URL for our actual API set properly the cury parameters are set properly so that they're requested doesn't fail now that this is done since we're only going to be supporting one type of HTTP request within our application and that is a get request I'm going to be creating a function for that so that we can actually work with them so to do this I'll do the following I'll say that we are going to have a function that will return a future which will be dynamic it's going to be called get and we'll basically have to pass in a path so I'll say that this is going to be a string parameter that gets passed it is going to be called path then I'll open up a TR cach block just to make sure that if we do get any exceptions that the app doesn't crash and in the cache block I'll just print the error and within try I'll do the following I'll basically create a variable which will be of type response this comes from the actual do package response is equals to and then I'll do a waitor do.get and then we're basically going to be passing it the path that the user passes us and then after this I'll say that we will do return response do data and there we go that's pretty much all we had to do all also also Mark this function as a sync and that should fix the issue for us so now that this is done we've completely configured our applications HTTP service and the last thing that we have to do is basically make sure that I return response. data there we go and now we can move to the next part so the next part is to actually let our application know that hey the HTTP service exists by registering it and then we can use that at different places within our application when we want to so to do that what I'll do is within my lip folder I'll create a new file once again and I'm going to call this utils do do and within u. doart I am going to be creating a new function which I'll say is going to return future void it's going to be called register services so as the name suggested register these different services that I create it's going to be async and I'll open it up and to basically register a service or you could think of as to register some kind of a instant of a class using get so that we can use it at other points within our application you can do get.put and that's pretty much all you have to do so as you can say it says that it injects an instance of whatever class that we give it in memory and then we do not need to define the generic type for this get automatically enforced the type from the actual class that we're using and then we can access this instance that's saved in memory for this particular class and other points of our application by doing get. getet but we'll take a look at that for now let's just do get.put and then the dependency here if you remember is going to be an instance of our HTTP service and there we go that's pretty much all we had to do so now with this done what we have to do is make sure that this function gets run and that the services do get registered before we try to access them so to do that I'll come to my main. dfall I'll come to the main function I'll mark this asynchronous now and then here I'm going to do that I'm going to do await underscore and then register Services is going to be the function so there we go and that's pretty much all we have to do so now with this done let's reload our application and as you can see nothing breaks so that means that our application launched successfully and that the service was registered successfully so I know that there's a lot of boilerplate code going on and that you might be confused as to what's going on for now but just kind of keep going with me because in just a little bit more time you're going to actually see how all of these pieces come together and what the actual purpose of doing things this way is because it's going to make it very easy for us to maintain our application make it more composable make it more modular and it's going to make sure that we are following good coding practices such as not repeating ourselves again and again that's always a good thing so with that done what we can do is close down the main. file let's close down all of the other files let's just keep the adore asset dialog. file open and let's actually talk about the next thing that we have to do so now that we have our HTTP server set up we need to use that to actually fed data from the API but besides that we also need to manage some State on our ad asset dialog and the state we need to manage it are a couple different things we firstly need to manage actually getting the data and then saving that information in a variable so that we can display it we also need to manage the loading state so when we're actually getting the data that the user sees a spinner instead of the actual UI and then we also need to manage the state for when the user selects an actual cryptocurrency or an asset I should say such as Bitcoin or ethereum which one they selected and the actual input of the user within the actual text field for how much amount of that certain asset they own so we have to create some kind of a system for that and the way we're going to be doing this is by creating a controller using the gex package and this is the recommended way through which we can manage state within our application whether we want to manage state for a local variable or we want to do it at a global scale so throughout our application so let's actually take a look at what this controller is how it works and then I'll kind of show how it works to you so now let's actually take a look at how to create this controller and then how to consume it and react to the changes that happen within this controller so to do that I'll do the following I'll at the top of my actual file create a new class and I'm going to call this add asset dialogue and then I'm going to say controller and then I'm going to say that it extends getex controller there we go that's pretty much all we had to do if you hover over this it's going to show you that the gex controller basically extends the listenable mix in and then the list Notifier mixing and this is basically kind of hinting to us that there's some kind of a notification mechanism going on that's maybe going to allow us to render our UI when something changes within this controller and I'll show you how that happens so for now let's do this let's actually say that we're going to only have one certain state that we're going to be managing within this controller and that is going to be whether our actual dialogue is currently fetching information or not so I'm going to say that I'm going to create a variable that is going to be loading and it's going to be equal to false to begin with but if we do things like this it's not going to work what we have to do is make sure that we use observable values when we create state within our controller or when we create variables that we want to basically get notified for when the value for them updates so to do that what I can do is basically once I've defined the actual value for my variable just do Dot and then OBS and as you can see this is going to make sure that the actual value is in observable value so returns an rxb um and then I'm going to set the actual type for this variable to be rxb like so so that's pretty much all we had to do so now with this done we basically Define a piece of State on our controller which is called loading which basically is an observable value will allow us to basically reender our UI and get notified when the the actual value for this actual variable changes and that's the beauty of using observable values so now that this is done if we just do things like this it's still not going to work because we need to Now link our actual controller with our actual widget that we want to basically consume this controller in so to actually link up this actual controller with our actual widget we have to do two things firstly we need to get access to this controller so let's do that so to do that what I'll do is within the ad assets dialog I'll create a new variable final I'll call this controller and I'm going to set this equal to get.put and then we're going to give it the dependency and the dependency is going to be an instance of our add asset dialog controller so now that we've added this here that's pretty much all we had to do so let's do command save and let's see what the actual issue is so it says that methods can't be invoked in constant expressions or I can remove the const keyword from The Constructor and there we have it now it is working so now that this is done our controller is now going to have a reference to an instance of our ad asset dialog controller so now the final thing that we have to do is basically make sure that wherever we access the state within this actual controller before that we within our widget tree have an observable widget or an OBX widget and that's basically going to allow us to then listen to the changes of state that happen within this controller so to do that I'll come to the build function and to come to the center widget and I'm going to say that now I'm going to be wrapping this Center widget with a new widget and this time this widget is going to be called OBX if you hover over this as you can see this comes from the get State manager package or the get package and then this is going to have a function that basically is going to take no parameters in and it's going to return the actual widget that gets rendered within this observable widget and that's pretty pretty much all we had to do so now with this done we are pretty much ready to listen to the changes that happen to the state within this controller so now all I have to do is basically wherever I'd like to access this value is do the following which is to basically access the controller through this variable and then access whatever property or function that is on it so let's do this let's come to our build UI function and here I'm going to say that if the controller Dot and then I can do loading and then I'm going to do is true so if the actual loading is true then we're going to do something else otherwise I will return the column so let's copy this column stuff and paste that in here and do command save and then for the controller loading I'm just going to basically return a circular progress indicator and I'm going to wrap that with a center widget and give it a fixed height and a width so let's reload our application make sure that nothing's broken let's click on this Plus and as you can see that our dialogue is being shown to us and everything seems to be working as intended and for now we're not seeing the loading indicator because we've set the value for our loading to be false now what I'm going to do is basically come to my dialog controller and here I'm going to define the on init function overwrite that basically and then once the super classes on init function has been called I'm going to say that I am going to Future Dot and then I'm going to do delayed and here I'm going to pass a duration let's do duration extra long for and then I'm going to say that when this completes then I want to do the following and this is just so that I can show you how the UI is now going to dynamically rerender itself when changes happen to the state within this controller I'm going to say that now I'm going to set the loading do value to false there we go and then here by default I'm going to say that loading is going to be true let's do command save let's restart our application let's come to the plus and as you can see we see the loading indicator but as soon as this future finishes and then the value of loading is set to false then we are no longer seeing the loading indicator because the widget tree renders and now we're seeing the column being displayed to us which doesn't have anything for now so with this done that's pretty much all we had to do so now I can undo the changes that I've made and we can move on to the next part so the next part is when the actual controller gets created I want to go and fetch the actual assets or these different cryptocurrencies from that specific endpoint so that then I can display that information to the user so that they can add that so to do that what I'll do is basically say that within the on and it function I'm going to call a function after the Super class is on and it has been called called undor get assets then I'm going to basically create this function by saying that this function will return future void it's going to be called get assets no parameters pass to it async open up its body the first thing that I'm going to say is say that loading. value is going to be true when we start the process then after that I need to access my HTTP service so to do that I'll create a variable HTTP service HTTP service and set that equal to get. find and then I'm basically going to say that I want to find the HTTP service and I do not need to specify the actual type for what instance of a class I want to get get find will automatically infert that information from the type that I set on the variable here you can for good Mayer also add a type here for example HTTP service but this is not necessary once this is done now that we have access to our HTTP service I'll create a variable and I'm going to set that to be response data and I'm going to set that equal to await HTTP service doget and then here we're going to pass the path so the path if you remember is going to be the following which I'm going to come to Google Chrome and show you is the currencies list of currencies so it's basically SL we1 slash so we have already the we1 part within base URL so we just need to go to currencies so the path here is going to be currencies that's pretty much all we had to do so now with this done the last thing that I'm going to do is say that the loading dot value now again is going to be false once we complete the operation and I am also going to say that we're going to print to the console the responses data and that's pretty much all we had to do so now with this done let's do command save let's open up the debug console within our actual Visual Studio code instance let's come to the debug console let's increase the size for this actual window let's reload our application or restarted I should say as you can see getx is giving me some logs on the actual console letting me know that an instance of HTTP service was created get material controller was created and now when I click on this plus button here it should say that in instance of add asset dialogue controller was created initialized we opened up a dialogue and here's the data that we got so you can see that we get some data it's a list list contains these JavaScript objects Each of which corresponds to a specific cryptocurrency and it's Bitcoin and then there should be ethereum again as you can see ID3 is ethereum so now you can see how it works and once the actual operation completes then we no longer show the loading indicator so everything seems to be working as as intended so the next thing that I'd like to do is basically take this response data that I get which is going to be a map and then transform that into a instance of my currency list API response so basically this is a class that exists under API response here and this is basically going to make it easy for us to work with the data that we get and have type safety and ensure that we make less errors and let's do that so to do that I'm going to do the following I'll say that I'm going to have a variable which is going to be of type currencies list a a response and then I'm going to say this is going to be called currencies list API response and set that equal to and then I'll do currencies list API response. from Json so this is just a utility function that exists on this class allows us to pass it some Json and then from that Json it's going to construct an instance of the currencies list API response object so now with this done that's pretty much all we had to do so now the final thing I'm going to do is come to this asset dialog controller and here I'm going to say that I'm going to have a list and the this list is going to be a list of different cryptocurrencies that the user can add to their portfolio so this is going to be again an observable value so we are not going to be using list we're going to be using RX list it's going to be string I'm going to say it's going to be called assets and then it's going to be equal to an empty list for now which is going to store strings within it and then we need to add the OBS after this to make it an observable value so now that this is done that's pretty much all we had to do so now I can come back here and I can do the following which is to just go through the currency list API response go to the data on this and then for each of the data I'm going to do for each there we go and for every coin that we get I'm going to do the following which is to basically go to my assets and add to that the coin. name and that's pretty much all we have to do and do command save so with this done I can again do print and then I can do assets Save open up the actual debug console like so and then restart our application plus button here and after some time there we go now it's giving us this list which contains all of these different cryptocurrencies such as Bitcoin ethereum tet everything looks good so now I can use this list to actually display that drop down so everything looks good we can move on to the last part so the last part is to actually create another variable and this is going to be the variable that is going to keep a track of the actual value that the user selects when they've actually made the decision of which cryptocurrency they'd want to use so what I'll do is the following I'll say that by default it's going to be an RX string so so it's going to be a string value I'm going to say that it's going to be called selected asset and by default it's going to be an empty string and then once we've actually populated our assets field then what I'm going to do is after that say that the selected asset. value is is going to be the first element within the assets so by default it's going to be the first element within the assets list so as's do command save that's pretty much all we had to do let's reload our application make sure that everything's working as intended open up the actual dialogue and it looks good so now what I can do is actually come back to the build UI function and start adding some logic here so the build UI function firstly I'd like to make sure that it takes in the build context so I'll do that then I'll come to where I call the bu UI function and say that the context needs to be passed to it and once this is done I'll come to the column So within the column let's do this let's firstly add a drop- down button so to do that I'll say that we'll have a drop- down button and it requires an items list as well as what happens when we actually select one of the items so what happens when the actual selection gets changed so for the items list what I'll do is the following I'll access my controller on that I have the assets which is a list of string I'll map through them and for every asset that I get so let me do this I am going to then return here a new instance of drop down menu item like so and then finally I'll mark that or cast that iterable to a list and then on the onchange function call back we're going to get a value passed to us which is going to be of type string and then basically within this function we can Define what happens and now for the child here for this drop down menu item I'm going to say that we're going to have a text widget and it's basically going to be the asset like so that's pretty much all we had to do so now let's add the trailing commas and the semicolon and there we go everything looks good and we can do command save and it's going to give us an error but we don't have to worry about that it's letting me know that the item. value is equals to widget. value length is equals to 1 ah I see well what I need to do is basically on the drop- down menu item basically Define what the value for this drop- down menu item will be and this needs to be asset and then finally on the actual drop down button I also need to say that what the initial value is or what the current value is I should say and that is going to be controller. selected assets if you remember correctly now if we restart our application hopefully it shouldn't create a f again and if I click Plus it's still giving me an error so let me actually take a look at it and then I will actually tell you guys how to fix this error welcome back everybody so I figured out what the issue was um on the actual value we need to do controller. selected asset do value because the selected asset is of type RX thing we need the actual string value from that so let's do this and that should pretty much fix the error for us let's restart our application let's click on the plus button and there we go now once once the actual data has been loaded we see our drop- down button appearing and now we can see this list of different cryptocurrencies that we can select so now the next thing that I'd like to do is basically come to the unchanged because for now when we click on one of these it doesn't work it still keeps Bitcoin as selected so I'd like to fix this so to do that just come to unchanged and do the following say if the value that gets passed to us is not null then what I'll like to do is basically update the value and the way we're going to be updating it is as follows we'll do controller do selected asset do value is equals to the value that gets passed to us within this function and that's pretty much all we had to do so let's restart our application once more open up the dialogue and then if I select ethereum there we go now ethereum was selected teetra was selected and everything looks good our actual UI is rendered dynamically and the state is being persisted as well so with this done the next thing that I'd like to do is basically fix the styling for this so what I like to do is basically come to my actual column and then set the main main AIS size on the column to be main axis size Max then I'm going to set the main axis alignment to be main axis alignment space evenly and then I'm going to set the cross AIS alignment to be cross AIS alignment center save and then finally I'll also wrap this actual column with a padding widget so do that I'm going to open up the refactor menu and then I'm going to do wrap with a padding widget and then here I'm going to say that the padding is going to be on the horizontal axis and it's going to be symmetric so 25 from the left 25 from the right and that's pretty much all we had to do so the next thing that I'd like to do now is basically add a text field so to do that after the actual drop- down button I'm going to have a text field then on the text field I'm going to have the onchange function call back defined which is going to have the value passed to us and then after this I'm going to do the following which is to actually save and see how it looks so it looks like this so let's do this let's up the decoration for this to be box decoration and then the border to be outline input border there we go that's pretty much all we had to do um and it needs to be actually input decoration there we go and then now if the input field looks much better and finally the last thing that I'd like to do is Define the keyboard type to be text input type Dot and number there we go save let's click on this and there we go now I can input a value and it works as intended and everything looks good so the last thing that I'd like to do is basically implement the functionality for actually keeping track of the actual input that the user adds here so I'll come to my controller and I'm going to do the following I'll say that now we're again going to have an observable value and it needs to be a double in this case since the user can input an actual decimal value so it's going to be RX double and then I'm going to say asset value is equal equals to 0.0 OBS there we go once this is done I can come back to my actual text field onchanged and then here I can do if the value is not equals to null then we're going to do controller do asset value dot value is equals to the value that gets passed to us and I also need to make sure that I cast this to a double to do that I can do double Dot and then pars and then here I can pass it the value and then that's pretty much all I had to do so let's do command save and it's telling me that the operant col be n so we can remove this if statement reload now let's come to our dialogue and let's add a value here so let's do 2963 and yes everything looks good so the last thing that I'd like to do is add an actual button so let's do that so to add the button what I'm going to be doing is after this text field I'm going to say that we are going to have a material button and then the material button is going to have an onpressed call back and then after this I'm going to define the child for this and the child I'm just going to copy and paste that in since it's a very simple widget just a text widget with some styling applied to it for the color being set to White besides that there's nothing else so when the button gets pressed let's just do this let's do get dot back for now so let's just dismiss the actual dial log and go to the previous page that we came from and I'm going to set the close overlays property to true and let's do command save then within the actual material button I'm also going to say that the color for this is going to be theme do off context. color scheme. primary save and there we go now we can see the add asset button we can click on it and it dismisses our dialogue we can open it and then we click on it and it dismisses our Di dialog and one cool thing about this is that since we are creating a instance of the actual ad asset controller using get within our actual ad asset dialogue widget when this widget is no longer needed and is unmounted then this controller is also destroyed so now the next thing that we have to do is actually create some kind of a mechanism within our application so that we can keep a track of what the user's current assets are and then when the user actually adds information within this dialogue and clicks add asset to then update that information and we're going to be doing that by once again creating a controller but this time the controller that we're creating it needs to be consumed by multiple different widgets within our application this controller is not specific to just our dialogue or just our homepage because the controller is required for our dialogue as well because the dialogue needs to update the state within this specific controller the one that we're going to create because the user has just added a new asset and the controller also needs to be accessed within our homepage because we need to then again access the actual assets that the user has and then display them as a list so for that what we'll be doing is actually creating a new folder under the lip folder and I'm going to call this controllers then within this I'm going to create a new file and the name for this file is going to be assets uncore controller. Dart controller do dot there we go then what I will do is basically say that we're going to have a class which is going to be called assets controller and it's going to extend get x controller there we go and then open up the actual class body I'm going to define the on init function on this and for now we'll just say that it's going to call the super classes on init function and then the last thing that I am going to be doing is the following which is to basically register this as its controller so since I want this accessible throughout my application so basically this is a controller that's going to be a global controller you could think of what I can do is come to my utils doall and within my utils dfall I can then say that I'm going to now copy this function and paste it but this time I'm going to say it's going to be called register controllers and then here I'm going to do get.put but it's going to be assets controller save then let's close down this file let's come to our main. do and then here I'm going to do await and here I'm going to do register controllers and that's pretty much all we had to do so now with this done let's restart our application and let's make sure that everything's working as intended so the last thing that I'd like to do is now I want to come back to my main. Dart file to my assets controller and here I'd like to Define some State that's going to keep a track of the different assets that we have so for that what I'll do is the following I'll already created a class under models called track asset which is basically a DOT class that has two properties the name of the asset so basically Bitcoin ethereum or whatever and then the amount for that and then it has some utility functions on that so that we can actually take some Json and return return an instance of TR asset and then a utility function called 2 Json which basically takes an instance of this class and returns to as adjacent representation of that since the user can have many different assets being tracked it's going to be a list it's going to be RX list it's going to contain track asset within it so let's do this and then I'm going to say that this is going to be called track assets and I'm going to set that equal to an empty list like so now I need to import this so let's import that from the models folder and then on my list let's define the type of items that will be within this list which are going to be tracked AET so now that this is done that's pretty much all we have to do so the last thing that I am going to be doing is basically making sure that I create a function on this assets controller and I'm going to say it's going to be the following it's not going to return anything it's going to be called ad trct asset and it's going to take in a string which is going to to be the name of the asset and a and a double which will be the amount of that and then I'll open up the function body so here I'll do the following I'll just say that I'm going to take the track assets and to that I'm going to add a new element which is going to be a new instant of track asset like so and then here I'm going to say that the name will be the name that gets passed to us and the amount will be the amount that gets passed to us so with this done we are now ready to consume this and one final thing that I'm going to be doing is within on in it I'm going to say that I'm going to print the tracked assets and then once we've added an asset I'll print it here as well let's open up the actual debug console and let's go to here let's restart our application let's come to our adore asset. doog and firstly we need access to our actual controller so how are we going to do that well I'll just come to the point where we actually need to access it and use it and that's going to be within the add asset material button here on the on pressed before I dismiss the dialogue I'm going to do the following I'll create a variable it's going to be assets controller call it assets controller and set that equal to get dot again we're going to be doing find and that's pretty much all we had to do once this is done I'll do assets controller Dot and then I can do add track asset so now we need to give it a name and an amount well these are available to us on our actual add asset dialog controller here as these variables so let's actually access them so let's come back here and let's do so then we can do controller Dot and then I can do selected asset do value and then I'm going to do this following for amount as well so controller dot asset value dot value there we go that's pretty much all we had to do so now with this done let's do command save nothing else we had to change restart our application increase the size of our debug console there we go the actual tracked assets get printed for now it's an empty list let's open this up okay let's select Bitcoin let's do 1.43 add and there we go now it's showing me instance of tracked asset so this means that we have successfully added to our actual assets controllers tracked asset list the asset that we had just added by clicking on the add asset button on our dialogue so now every everything's working and now what we can do is actually consume this information within our homepage as well and then display a list here to actually display information regarding the portfolio on the homepage I have to do a couple of things I firstly need to create some text which is actually going to show the combined value of all of the assets that are within our portfolio and then beneath that I'm going to have a text which says portfolio value under which I'll have a list which will individually State all of the different coins that I hold so to do that we're going to be accessing our assets controller once again but this time we're not going to be accessing it within our ad asset dialog widget what we're going to be doing is actually accessing it within our homepage so to do this let's do this let's first come to our homepage and then let's set it up in a way so that we can actually consume information and react to the changes that happen within our assets controller and then we'll actually take a look at actually building the UI so to do that firstly I need access to my assets controller so on my homepage I am going to create a variable the type of which is going to be assets controller I'm going to name this assets controller and I'm going to set this equal to a call to get. find and that's pretty much all we have to do it's automatically going to go ahead and find the appropriate controller for me and add the reference for that to my assets controller variable now that this is done the next thing that I'm going to be doing is coming to the point where I basically Define my scaffold and underneath of the scaffold we haven't added a body attribute yet so let's add a body attribute and set that to a function called build UI and then the build UI function will get the context passed to it once this is done I'm basically going to come to the bottom and after the app bar I am going to define the function it's going to return a widget it's going to be called underscore build UI takes in a build context and here we're going to be doing the following first I'll make sure that I return a safe area widget and the child for that is going to be a column like so and then the column is going to contain some children which for now is going to be an empty list once this is done since I want to react to the actual changes that happen within the assets controller I need to wrap the actual widget Tre with an observable widget so for that I will basically wrap the column with a widget and this widget is going to be the OBX widget that we actually get from the gex package and now we should be able to react to the changes this widget is going to require us to define a function that actually details how the actual widgets underneath of this are built so I'll fix it up like so and that's pretty much all we had to do so as you can see that the get package actually gives us an error saying that the improper use of gex has been detected you should only use getex or OBX for the specific widget that will be updated and the reason we're getting this error and I wanted to specifically show you this is that currently since we're using the OBX widget and within this or underneath of its widget tree we are not actually accessing any type of controller or any type of state that's changing that's using get it's giving us an error that hey you do not need to use it then if you're not going to be actually reacting to the changes so as soon as I implement Implement some functionality within the UI that starts to read information from the assets controller that this error should be fixed so let's do that so to do that what I'll do firstly is try to create a function which is going to be responsible for showing the text for the actual total amount of our portfolio so for that I will firstly come to the bottom and here I'm going to do the following I'll say I have a function that returns a widget it's going to be called portfolio value and it's going to take in the build context pass to it like so and then I'll open up the functions body within this I'm going to say that I am going to return a container and then with this I am going to define a specific height and width and margin for the container so the width will be the width of our screen then I am going to say that the margin is going to be on the vertical axis symmetric and is going to be 3% the height of the screen from the top and bottom and after this I am going to define the actual child for this container so the child is going to be a center widget and with this I'm going to say that the child for that is going to be a text widget but we're to use the wit Constructor for that and then here I need to pass in a text span so let's add a text span which is going to have a children's list which for now is going to be empty and with this done we can do command save so still the error is not going to fix so nothing to worry about we just need to make sure that underneath of our OBX widget we need to access the assets controllers we'll just do that in a bit so now what I need to do is basically take this function come back to my build UI and then to the column I'm going to add our portfolio value and I'm going to say that the the context will be passed to it and that's pretty much all we have to do and we can continue with the actual development so now what I'd like to do is display some text so the first text is just going to be a text pan with a dollar sign so I'll quickly add that and let's do save and the last thing after this is going to be the actual text which is going to detail information regarding the total value of our portfolio so for that I need to create a function which is going to take into account all of the different assets or coins that we've added it and then take into account the amount for each of them add everything together and then return to me an actual value for what the total portfolio value is so to do that what I will do is actually come back to my assets controller and actually create a function here which is going to be responsible for calculating the value of the actual assets which are under the track assets list so to do this let's do that let's firstly create a function and let's say that this function is going to be double as the return value and it's going to be called get portfolio value like so and it's going to take no parameters then within this function I'm going to do the following which is if the track assets are empty so is empty then our portfolio value is zero we don't have to calculate anything if that is not the case then we can proceed forwards I'm going to say that I'm going to create a variable called value set that to zero and then I'm going to create a for Loop and I'm going to say that we are going to go over every s so I'm going to say for track asset asset in and then I'm going to say track assets there we go and this needs to be track asset there we go for every asset that's in track assets I'm going to do the following I'll add to the value the actual assets amount so we need to now get the assets price so where do we get the assets price for well currently our assets controller doesn't have any idea for what the actual price of a coin is sure we are keeping track of within our tracked assets list the amount of a coin that we have and what the actual lay of that coin is but we do not know at this point of time what the actual value of that coin is so for that what we need to do is actually access the API once again and hit the same endpoint which is/ we1 currencies and then here we are going to once again get a list of data returned to us which is going to conin these different objects e corresponding to a specific coin and there we're going to have the ability to access this values key which is going to contain the USD value for each of these different coins so this is practically what we have to do so we need to now access the API once again get the actual information returned to us from the currency's endpoint and then use that information to actually get the price for the actual coin that we're concerned with so to do that now I need to create a function that is going to do that for us so how are we going to be doing that well firstly what I am going to do is make sure that I create a function that when the asset controller gets created actually pulls the information from the API so let's do that I'm going to say that I'm going to have a function it's going to be future void and I'm going to say it's going to be called get assets like so then I'll say that this function is going to be Asing and open up its body the first thing that I am going to be doing is creating a variable on the assets controller it's going to be of type orx bu called loading and by default I'm going to set this to a false observable and then once we actually start the operation of getting the assets information I'm going to say that the loading value is going to be true there we go then the next thing after this is to actually access our HTTP service since we need to actually send an HTTP request so there we go and then to find it I will do get. find now that we have access to our HTTP service what I'm going to be doing then creating a variable which will be called response data and setting that equal to await HTTP service. get and then I am basically going to pass here the endpoint from where I want to get the information so it's going to be the currency's endpoint so I'll add that here like so then I am going to say that I'm going to get a response returned to me which will be of type currencies list API response so again this class comes from the API response. doart and this basically models how how the response is going to look from our API so this is going to contain a list of coin data and the coin data object is going to contain information regarding the actual value for each of the coins that we're concerned with so now what I need to do is basically take the response that I get and then from that instantiate an instance of currencies list API response object so I'm going to do currencies list API response is equals to and then I'm going to do currencies list API response. fromjson and pass it the actual response data and that's pretty much all we had to do so now with this done we can do save and we can move to the next step so the next step in the process now that we have this is to actually save this information within a variable so that we can access it within other functions and throughout this actual class so to do that at the very top of my class I'm going to create another variable it's going to be of type RX list and it's going to contain coin data information within it so this is going to be a list of coin data objects I'm going to call this coin data and set that equal to an empty LT which is observable and then here I'm going to define the type of item we're going to be adding to this list so now that this is done we can actually go ahead and after we've transformed our response and created that into a currencies list AP response object I am going to do the following which is coin data do value the list is going to be equal to the currency list API response that we get Dot and then the actual data that we have on it and that's pretty much all we have to do and since this is going to be a null value or can possibly be a null value I'm going to use a null overare operator and say that if this is null then we'll just set the list to be an empty list then once this is done finally you can do loading do value is false since we've completed the operation and once this is done I can come to the on init function and after the Super classes on in it has been called basically called get assets and do command save and that's pretty much all we had to do so now I can come back to my actual get portfolio value function and here I can do the following I'm going to say that if our coin data list is empty then we're also going to return zero why because we don't have the information for the prices of these coins to actually generate the portfolio value from but if the coin data is not empty and if the track assets list isn't empty then we can actually calculate the value so to calculate the value what I need to do is basically go over each of the assets within my tracked assets list and then add its value times the amount of it to the actual value but how do we get the actual assets price or the actual coins price from this actual list of coin data well for that I can create another function that's responsible for that so I'll say that I'll create another function and this is going to be double but it's going to be an optional return so it might return something it might return null and then I'm going to say that it's going to be called get asset price like so then this is going to actually take in a name of the asset so the name of the coin and then I'm going to do the following I'll say that I'll have coin data variable data and this is going to be equal to and now what I need to do is basically from the coin data list get the appropriate object which corresponds to the actual coin for which we've passed the name for so for that again I'm going to create another function and I'm going to say this is going to return optional coin data object I'm going to say it's going to be called get coin data and this is going to take in the name of the coin then we'll do the following I'm going to say that I'm going to return the coin data Dot and then from there I need to find first value and I'm going to do first where or null so basically means if we find an element which corresponds to the condition that we set here then we return that otherwise we would return null so here what we're going to do is basically get an element passed to us so we're going to check to see if the element's name so if the coin data object that we guess its name is equal to the name that the actual function gets pass then if that's the case that's the actual coin data object that we need to return we're going to return that and that's pretty much all we had to do then I can come back to the get asset price function here I can call the getcoin data function pass in the name and that's pretty much all I had to do and once this is done the next thing I'm going to do is return data and on the data I am going to have the values properties so so I'll access that on values I'm going to have the value in terms of BTC e and USD I need the USD value so USD and then on that I'm going to have the price and then the price is going to be num if you see it's going to be a number so I need to convert that to double there we go and then that's pretty much all I had to do so now with this then we can come back to the actual asset here and I'm going to do the following which is in the case that this value is null then what I'm going to do is basically return zero and I can change the return type here to be double uh not a double optional then I'm going to come back here and say Value Plus equals the function get asset price and then we pass the actual name of the asset here we can access that by doing asset. name times the amount of the actual asset that we own or the coin that we in so that's going to be an asset. MN amount there we go and that's pretty much all we had to do command save so now with this done the last thing we have to do once we've looped over all of the assets and calculated the value for them and added that to our value variable return the value back to us and that's all we had to do so now that this function is ready let's do this let's stop running our application or let's actually restart our application we're still going to get the error but this is going to give us a clean work exlain let's come back to our homepage let's come to the point where we're sh showing our actual text. Bri widget where we currently now only have a text fan that actually shows us a dollar sign and after that let's add another text span and this text span is going to have text but this text is going to be the actual value of our portfolio so to do that I will do the following I will basically say that we're going to have a string and the string is going to have the assets controller Dot and then get portfolio value there we go let's to save and let's add the remaining commas let's restart our application at this time hopefully the error should be fixed and there you go you can see that now it's showing us 0.0 for the portfolio value and the reason for that is since we restarted our application currently we have nothing within our track assets list but as soon as I add something so let me click on the plus button here Bitcoin let's say I do 1.34 Bitcoins add that it's going to update the value and you can see that now it's showing me that I have $94,700 to say two fraction digits and that's pretty much all we had to do let's do save and let's see how it looks so now it looks great and after this is done the next thing that I am going to be doing is basically after I've defined this text span is actually add another text span which is going to say portfolio value like so and now it says portfolio value and I want to move this to the next line so for that after I have added the portfolio value within the string I'm going to add a new line L character and there we go now it looks great I want to Center all of the text so for that what I'll do is come to my text span and on the text. r widget that I have I'm going to say that the text align property going to be text align do Center save and there we go now it looks great so with this done now we're showing the appropriate value and because of us using the observable widget in the widget tree and then also using observable variables within our assets controller as you can see every time something happens to these actual variables and the value for them changes our UI is going to react and update itself so now let's just say that I go ahead and I add some ethereum so let's say that I actually add some ethereum and I say I have 45 ethereum I wish but there we go as you can see that the portfolio value updates and now it's showing us that the total value of my portfolio is $252 $97 so everything looks great so I can move to the next step now which is to actually show the list of our actual coins and the coins that we own so let's do that so to do that I will come to the bottom of my homepage here I'm going to say that I'm going to define a function returns a widget is called undor track assets list gets a build context pass to it and then within this I'm going to say that I will return a padding widget like so and then here I'm going to say that the padding is going to be the following which is EDG in sets. symmetric on the horizontal axis like so and that's pretty much all we had to do once this is done I will add a child to the actual padding widget and this is going to be a actual column the column is going to have a children's list and let's do command save the first child within this column is actually going to be the text which shows portfolio value so let's do that so for that I'll firstly add a sized box the sized box is going to have a height the height will be 5% the height of the screen so let me just copy and paste that in there we go and then I'll do command save and then after this we are going to for the size box actually add a child and the child is going to be a text widget with some styling applied to it which says portfolio like so and that's pretty much all we had to do so now I'll take this track assets list function go to the top to my build UI function after the portfolio value function called add the track assets list and that's pretty much all we had to do and also pass this to context save and now we're seeing portfolio being shown here I want to make sure that within my column everything's aligned to the left on the horizontal axis so for that on my column I'm going to say that the cross axis alignment is going to be cross axis alignment. startart so moves everything to the left um and then the main axis alignment is going to be main axis alignment. star and once we add the list to this it's going to move everything but for now let's just keep keep moving on so now that this is done after I've defined my portfolio I'm going to add another sized box and this size box is going to have a height and a width so let's copy and paste those in so the height is 65% the height of the screen width is the complete width so now our portfolio as you can see is at the left side the text has moved and then what I'm going to do is for this size box I'm going to have a CH which is going to be a list View which we are going to be building programmatically so I'm going to do list view. Builder the item Builder function will take in the context and the index for the item that's being built and that's all we have to do and once this is done I'll Define the item count on this so the item count is going to be on our assets controller the track assets list and then the length of that and that's pretty much all we had to do then within the item Builder I am going to do the following I'll say that I'm going to have track asset and then it's going to be track asset and it's going to be equal to our assets controller. track assets and then whatever the asset at the specific index is then I'm going to say that now I will return a list tle widget and let's do this first let's actually add a text to it which actually shows the asset's name so for that I'll say that the title for this is going to be a text widget and it's going to have track asset do name as its text there we go I'm seeing Bitcoin and I'm seeing ethereum so now that this is done let's add a subtitle which actually shows me the actual value the USD value for each of these coins so for that let's do subtitle text there we go and then within this I'm going to have a string the string is going to say USD colon space and then the actual value of the coin so how do I get the value what I can do is actually access the asset controller then on that I can do get asset price and then here what I can do is basically say that I'm going to pass the track asset Dot and then the name and that's pretty much all we had to do save let's see if we see the value there we go so it's telling me that the price of Bitcoin currently is $70,000 ethereum is $3,513 so what I can do now is basically set the fraction digits on this so to do that I'll do two string as fixed two and and let's do save let's see how it looks looks great so now with this done the next thing that I am going to be doing after this is setting the actual image here so to add the image I need to firstly Define a function that Returns the URL for each of these different coins so for that what I'll do is come to my utils dodart and here I'm going to create a function which returns a string and it's called get crypto image URL it's going to basically get to it past the name of the actual cryp and then this function is going to return a URL and the URL that we're going to return is going to be the following somebody very kindly by the name of Eric tart as you can see has gone ahead and created a GitHub repo in which they've added all of the different icons for all of these cryptocurrencies and we can basically now go ahead and actually access these URLs which actually are going to return to us these images for each of these crypto currency icons so as you can see we have folders each corresponding to the resolution of these images and if I go under 128 you can see that for all of these different crypto coins we have the name of them and then PNG so what I can do now is basically go ahead and access these different images by using the following URL so what I'm going to do is access the following URL which is going to be this and I'm going to leave a link down in the description below to the actual source code for this project so you can actually download the source code and you're going to see that the function is going to have this URL within it and then after the final forward slash we basically add the name of the cryptocurrency so if I do for example bitcoin. PNG it's going to return to me Bitcoin image if I do ethereum it's going to return ethereum to me so let's copy this URL let's come back and let's paste this here and what I basically need to do is make sure that when we return the actual string we actually at the very end not use ethereum but the actual name of the coin that gets passed to us so basically add that within the string so I'm going to do dollar sign curly brackets or dollar sign name should be fine and there we go now it's going to work as we want it to so now with this is done I can use this function so let's close down utils do dot come back to homepage and then on homepage I'm going to do the following I'll set the actual leading property on the list TI to be a image. network and then the source here is going to be get crypto image URL and then the name here is going to be track asset. name there we go and save and now we should be able to see the actual images but before I can see that I need to do one last thing and that is to make sure that within this function when we actually add the name we actually make sure that the name is converted to all lowercase so I'm going to do name. to lowercase then save then um run application once again um and let's restart our application because the error isn't going to go away by itself so let's try it again let's click plus Bitcoin 1.4 let's do 1.3 to fix this actual overflow error that you're seeing what you can do is come to the actual top of your build function and then on the scaffold you can do resize to avoid bottom incent to be false save and there we go now it should be fixed so now let's add the asset there we go now it's showing me the correct image I can do ethereum as well so let's do ethereum or let's do tether and let's do 12.5 tether add and there we go everything looks great the portfolio value is being updated the list is being updated and everything looks stunning so the last thing I have to do is basically to the very trailing end of this actually add some text which basically shows the amount that we own of this particular asset so to do that let's come to the very bottom to our trct assets list to our actual list T and then after the subtitle I'm going to say that I am going to have a trailing widget it's going to be a text widget and it's going to be the track asset. amount. two string there we go save now we can see it I want to update the styling for this so I'll update the styling in like so and now we can see that we own 1.3 Bitcoin we own 12.5 tether the value of tether is $1 value of Bitcoin is $ 7672 us so each Bitcoin is this but total value of our portfolio is $1,886 58 so everything looks great so the last thing I'd like to do is basically Implement functionality on my actual homepage so that when I click on each of these list tiles it actually takes me to The Details page for these individual coins so that I can see more information regarding them so to do that let's do this let's actually come to our Pages let's create a new file and let's call this our details page. Dart then once this is done let's create a stateless widget call it our Details page and then for the build function let's return a scaffold after this for the details page what I'm going to do is make sure that when The Details page is actually created we need to pass it the actual information for the actual coin that we want to show information for so so in this case I'll say that it's going to be a coin data variable that needs to be passed to The Details page when it gets constructed and it's going to be called coin then on the details page I'm going to say that it's going to require a named argument passed to its Constructor which will be this. coin save and that's pretty much all we had to do let's come back to our homepage and then on the actual list T after the trailing widget has been defined I can say that when it's tapped we can call the following function within which we can navigate to the actual detail page so to navigate to the detail page it's going to be very simple all we have to do is the following get do2 and then we need to pass here a function and the function basically defines how the route is going to be built so here I will say that I'm going to return Details page there we go and then the coin here is going to be our actual coin so to get the coin data what I can do is actually say assets controller do getcoin data for the track asset which currently has this name and that's pretty much all we had to do so with this done let's actually add the trailing commas and that's all we had to do so it's giving me an error saying that the argument type coin data optional can't be assigned to parameter coin data so let's add a exclamation mark here save and that's pretty much all we had to do let's try this out so if I click on each of these it takes me to the detail page there we go so on my Details page I'm going to quickly go ahead and add some information so that we can actually see an app bar so let's do that so to do that let's come to our Details page scaffold let's actually add a appar set that to a call to a function called abar like so then what I'm going to do is Define this actual function returns a preferred size widget AB bar within this I'm going to say return abar then I'm going to say that we're going to have Center title true save and then we can say that the title is going to be a text widget which is going to be the coin's name save there we go now we can see Bitcoin and then we can go back tether and we can go back everything's looking great so now what I'd like to do is basically implement the other parts of the UI on our actual details page so that we can see information regarding this individual coin so firstly what I'd like to do is show the price for this specific coin and then also its image and then some other value regarding what the value of the coin is and then underneath of that also how the actual price has changed within the last 24 hours so to do this what I'm going to be doing is firstly on the scaffold defining the body and saying there it's going to be a call to a function build UI and then what I'm going to say is that build UI is going to get the context passed to it then I'm going to quickly create this function like so turn the way widget build UI within this we are going to do the following firstly we will'll return a saero widget and the child for that is going to be a padding widget and the padding here is going to be on the horizontal axis only and it's going to be symmetric it's going to be 2% of the width from each side like so once this is done on the actual padding widget I am going to say that we're going to have a child and that will be a column the column is going to have a list of children and the children are going to be the following so so I'm going to have a call to a function which will be asset price and it's going to get the context passed to it and that's pretty much all we had to do so let's quickly create this actual function again returns a widget called asset price gets the build context passed to it within this I'm going to say that I will return a sized box and then the sized box is going to have a height and then the height is going to be 10% the height of our screen so let me just copy and paste that in like so save and then we can move on to the next step So within this I'm going to have a text which actually shows the price of the actual currency or the coin I should say image and then I'm also going to have the actual amount of percentage change that happened within the price so to do that let's actually add the child to our size box it's going to be a roll widget it's going to have some children and the first child is going to be image. Network and here we're going to do get crypto image URL for the coin. name there we go let's save this and let's see if we can see there we go we can see it next thing I'd like to do is basically add some padding to this so I'm going to take this actual widget I'm going to wrap this with a padding widget and I'm going to say that the padding is going to be 20 from all side and there we go now it looks good then after this I'm going to add a text widget it's going to be rich 1 again it's going to have a text span which is going to have a children's list which is going to be empty to begin with then within this I'm going to firstly add another text span and this is going to have text and that the text is going to be the actual value of the coin so to do that let's create a string firstly it's going to have a dollar sign so let's add that back SL to escape then dollar and then after that space and then I'm going to interpolate the value of the coin to do that we can do Co do values do USD do price and then I can do two string as fixed two and then since these can be null I can add the null over your access operator save and there we go we can see the actual value let's fix the styling for this to increase the phone size and now it looks good and then after this I'm going to have another text span so let me do this let me just add the trailing commas and copy this text span paste it again but this time I'm going to do coin. values. USD do price but instead of price it's going to be percentage change in the past 24 hours and save and then I'm going to do the following which is to actually move this to the next line so for that I'm going to come to the first text fan and after I've actually added the value of the actual coin I'm going to add a new line character so now let mve to the next then I'm going to update the phone size to 15 and let's see how it looks looks great and then what I'm going to do is basically say that the color is going to depend upon a factor and that is if the coin value do USD Dot and then I'm going to do a percentage change in the past 24 hours is greater than zero so if the change is greater than zero if it's a positive change the price has increased then the color is going to be colors. green otherwise is going to be colors. red and that's all we have to do and remove the const here save and there we go so it's showing us that the value is actually decreased by $0.09 or it's percentage so by 9% in the actual past 24 hours and this needs to be actually a percentage sign so let me do remove this from here and then actually add a person sign here by doing like so save and there we go so that looks good and then add a space so 0.09% is the actual change in the actual price that has happened in the past 24 hours so now that we're seeing this the last thing I have to do is basically build these different cars that are going to show some information regarding this cryptocurrency which is the circulating price and things like that so let's do that so for that I'm going to do the following I will come to the safe area widget then come to its column and here I'm going to say that it's going to be a call to a fun function after the assets price called asset info it's going to get the context passed to it as well then what I'm going to do is basically come to the very bottom and create a function returns a widget called asset info gets the build context passed to it within this I'm going to say that we're going to return an expanded Widget the child of which is going to be a grid View and then it's going to have a grid delegate which will Define in just a bit but for those of you that haven't worked with grid views yet a grid delegate basically defines some properties on on the grid view so that it can understand how to render the children within it so we need to Define how many children are going to be on the cross axis so since our grid is vertically scrollable the cross axis is going to be the horizontal axis so I'm going to do we're going to have a const sliver grid delegate with fixed cross AIS count and it's going to be two there we go that's all we had to do and we're not getting any error so that's a good sign then after this I'm also going to Define the child aspect ratio on this to be 0.9 and then after this I can Define the children's list on this which for now is empty so what I'm going to do is now create a function which is going to basically return to me a card and then we can pass some parameters to this actual function so that the information that's displayed within these cards is different so to do that let's create another function which is going to return a widget it's going to be called underscore in forart it's going to get passed a title and a subtitle to it and then it's going to do the following it's going to return to us a container like so then the container is going to have some margin then the container is going to have some decoration so let me just copy and paste those and it's just the color of black 12 and Border radius 15 and then it's going to have a child the child is going to be a column which is going to have a children's list let's do save let's take this info card function let's go to our assets info children's list add info card and then let's do this for the first info card the actual title is going to be circulating Supply and then the actual subtitle is going to be the actual value of the circulating Supply which I can do by coin. circulating supply. two string there we go save there we go now we're seeing the card and we're seeing the appropriate styling applied to it so now all I got to do is go to my column specify the actual Main and cross AIS alignment on it then comes to the children's list say that the text is going to be title like so let's save and let's see how it looks looks great and then after this have another text which is our subtitle and let's do save there we go it's saying culating Supply is this much then what I can do is basically take this info card once again paste it again again within the grids view children list and once more but now the next info card is going to show us the maximum Supply and then the info card after that is going to be the total Supply save there we go we can see all of them then it's going to be for the second info card coin. Max Supply and for the third one coin. total Supply I believe yes Save and there we go now it looks great so now with this done what I can do is actually add some spacing within these cards so for that I'll come to the container and I'm going to add some margin to that and it's going to be on both horizontal and vertical axis symmetric 10 and 10 pixels there we go now it looks great since we're using the grid view we have this scrolling animation happening as well with some elasticity on it so everything looks great so the last thing I'd like to do is basically fix the styling for each of these texts so for the main title I'd like to increase the size of it and also increase its font weight so I've done that and then for the subtitle I'd like to also change its phone size and then the phont weight and now everything looks great and with that we've completed the UI for our Details page so now if I go back click on Ted it looks good if I go on bitcoin it looks good so now the final thing that we have to do is Implement functionality within our application so that when the application is restarted or relaunched by the user that all of the information within it is persisted because for now as soon as we close our application or restart our application or shut down our application the information that's within the tracked assets list within our assets controller is lost as you can see I restarted the application and now the information from my portfolio is gone and I don't know anything about what was previously added so to fix that what we are going to be doing is actually adding all of the functionality within our assets controller so let's just close all of the files and open that up and what I'd basically like to do is the following every time we update our tracked assets list I'd like to take that track assets list and save that as a string representation within my actual devices storage and then every time we open up our application or every time our assets controller is created then we read that information information from that actual string and then regenerate our track assets list and this way we'll be able to persist information for the actual assets that we currently own and it's going to make sure that when we restart our application or come back to application that no data is lost so how are we going to be doing that well let's do this let's firstly take a look at what we have to do to make sure that we can save the information within our devices shared preferences for when the actual track asset lips gets updated and then we'll take a look at how to read information from there afterwards so our function that's responsible for add track asset is a great place to add this logic too because when we add a new tracked asset then I'd like to update the actual information that's being stored within shared preferences to now be up to date with what's currently within our track assets list so to do that firstly you need to make sure that within your pope.l file you've added the shared preference dependency because that's the package we're going to be using to save the information and then after that we are going to be doing the following firstly what I'll do is that I will take each of these track assets and convert them into Strings because strings are the things that we're going to be saving we can't save an instance of a track asset within shared preferences it doesn't support that so I'm going to say that I'm going to have a list of string each string is going to correspond within this LT to an individual track asset then I'm going to say it's going to be called data and it's going to be equal to track assets do map then we're going to go over each asset and over each asset I'm going to do the following thing which is Json in code and basically pass it the asset and that's pretty much all we have to do and as you can see the Json incode function returns to us a string and finally I'm going to cast this actual iterable that the map function returns to us to a list and that's all we had to do so now this list is going to contril a string representation for all of the tracked asset objects that are within the track assets list then I can access my shared preferences instance by doing shared preferences prefs is equals to and then await and then I can also make sure that now I mark this function as a sync await share preferences Dot and then get instance there we go once this is done I can do a wait and then after this I can do a wait press. set and we are going to use the functional set string list since we have a list of strings the the key here is the actual identifier that we're going to be using then to update this actual string but also retrieve information from our shade preferences so the key is important and I'm going to say that the key is going to be a string it's going to beore track assets and the value here is going to be the data that's pretty much all we had to do let's do save let's restart our application and let's show this to you in action so if I come here I click plus Bitcoin let's say one Bitcoin add there we go everything looks great now the information has been added to our shared preferences but still if I restart my application since the app isn't reloading the information or rereading the information when the asset controller is created our portfolio is still being shown as zero even though in the previous step we've already added something to our track assets and we've also updated the actual shared preferences to save this new track assets list within itself so now what I'm going to be doing is basically creating a function which is not going to return anything and I'm going to say it's going to be called Low tracked assets from storage and then I'm going to say it's going to be an async function within this I need to get access to my shared preferences so for that I'll just copy this line paste it in once again and then I'm going to do the following I'm going to say that I'm going to have a list of string and this might be optional and then I'm going to say that it's going to be data and it's going to be equal to prefs doget string list and here the key is going to be the same so if this key does doesn't exist within our shared preferences then we're going to get null return to us so this is why it's an optional list string and then after this I'm going to do the following I'm going to say if the data is not equals to null then I'm going to set the track assets list. value to be equal to the following and all we have to do is go over our data list and now we need to do the opposite so before we converted the track asset objects to string representations now we need need to take these strings and convert them back into track assets objects so to do that I'll do data. map we're going to get each element and we're going to do the following I'm going to do track asset. fromjson and then we're going to do within this Json decode and pass it the element that gets passed to us then after this I just got to mark this as to list and that's pretty much all we had to do so let's do save and let's take this load track assets function and make sure that when the assets controller on edit function is called after we've called get assets we doore low tracked assets as well from Storage save that's pretty much all we had to do so now if I restart my application the information is red and all of the values are updated and everything looks great and now the information is being persisted as well so if I add something new now let's just say for example ethereum let's just do 12 add everything's is being updated nicely if I restart the application then the information is being persisted and as soon as we get new information then the UI is reacting at the value of the portfolio is being updated as well so with that that's pretty much it for today's video now you should have a good understanding of how gex work and what are the fundamental pillars of this framework as always if you enjoyed this video then please don't forget to leave a like on the video and subscribe to my channel so that you get notified every time I release a new video and if you like videos like this and want more flutter videos in the future then leave a comment down below letting me know what type of videos you'd be interested in and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 6,175

Keywords: flutter getx, getx state management flutter, getx in flutter, getx Introduction, getx state management, Flutter getx, flutter getx tutorial, flutter getx state management, flutter getx api, getx, getx flutter, how to use getx in flutter, getx tutorial, state management using getx, mastering getx, getx tutorial for beginners, getx tutorial step by step, route management getx, dependency management getx, why to use getx, getx introduction, getx overview, best getx tutorial

Id: 6SK1QS3Z-lg

Length: 99min 32sec (5972 seconds)

Published: Thu Apr 18 2024