Advanced Flutter Project - Adding a Second BloC - Part Two

Key Takeaways

hey guys my name is tensor welcome back to this flutter tutorial series today we're going to be adding to the data side of our application mostly in the current version of the utopian rocks application I have this little information panel that you can open up and in this information panel there's some information that's being passed through a block to the panel for instance the name of the application the version of the application as well and also there's this button down here which allows a user to check to see if there's a newer version of the application on the github repository main reason why we want this functionality is because this application is not on the Google Play Store or on the iOS store and so we need to manage updates ourselves of course right now because this is the latest version if I click check for update you can see we just get there's no new version at this time but if there was a new version when I click this box I want to be able to then click a link here which will open a browser and send me to the release page of github this is what the github API looks like the two main fields that we want are this tag name field which will give us a string with the version number inside of it and then we also want this HTML URL string which will give us a link to that version so now inside of our model dart file I've copied in the JSON here and I've created a new model called github model which takes in a tag name which will be a string and then the HTML URL which will also be a string now we can go ahead and create the Constructors so we just pass in the tag name and the HTML URL and then the from JSON named constructor just takes in the JSON map and it grabs the tag name key and the HTML URL key now let's go ahead and create the github API file inside of the models folder we're gonna need dart async dart convert we're also going to need the HTTP package and this time we're going to take in the client as well as the response and then we need of course the model that we just created we can create the github API class and of course we want to instantiate a client and then we want to set up to the actual URL string again this will be a static constant string where the URL string I'm going to point it towards the utopian rocks demo github repository that I've been uploading these files to and what I'll do is I'll upload a release apk to that github repository when we get far enough and then we'll be able to see that this actually works properly now let's go ahead and create a function called get releases this will return a future of github model-type and of course it's asynchronous we can get the response body by calling a get method on our client on the URL so we just take the URL pass it into your I parse and then we take the response and we grab the response body we then need to deconstruct the JSON and so we'll pass this through JSON decoder and this will give us back a list with a JSON map inside of it and then we can take that and convert it into our github model and then put it into a list and then grab the first element if we go back to the structure of the actual JSON you can see here that it's actually a list of JSON objects and we only want the first one because that will be the latest release version and so that's why we're just grabbing the first item in the list now before we go any further let's grab the package info library and put it into our application this is a library that will allow us to actually fetch information from the stuff that we define in the pub spec yamo here and then feed it into our application so I can grab the version number that's right here I can grab the description and the name and I can grab different elements that are about this particular application also while we're in here I'm going to change the version number to zero point zero point one other than 1.0.0 now that we have the package info dependency we can go ahead and create a new block in our blocks folder and I'm going to call this the information block we're going to need dart asynchronous in here we're gonna need rx dart in here we'll also need the package info dependency and we'll need our model as well as the github API that we just created or our information block the two main items that are going to be passing us information are going to be the package info dependency and then the github API so we need to define them at the very top of our block like this so that we can then access them inside of the constructor and actually let's define both of them as final now we can define these streams for this particular block we're gonna have no input from the user so all we really are going to have our streams that are coming out of the block to the user interface the streams will be a stream with the package information inside of it and then a stream with the github model inside of it and both of these we want to set to be a empty stream by default and of course we also want to create getters for them as well inside of the information block constructor we can define the two streams and we'll start with the releases stream so I'm going to create a observable object with the defer named constructor and inside of here I need to pass in a function so I'll create a closure which creates an observable from a future and our get releases function remember it returns a future with the github model inside of it so we can use this observable from future to turn that into an observable with one single event being passed through it every single time we want to listen to this releases stream will pass that single event which goes through the API and gets the releases and then sends them back to the block and we'll pass this back as a broadcast stream and we'll make it so that the stream is reusable as well so that we can potentially go and grab that information multiple times inside of our application we can structure the info stream in the same exact way so again we use observable defer and then we have to pass in the closure here which will then create an observable from a future and the package info here as you can see it returns a future package info as we defined above so we can use it in this way in the same way that we use the API get releases then of course we want this to be a broadcast stream and then we also want it to be reusable so that the user can open the drawer as many times as they want with the information block defined we can go ahead and create an information provider in here we need to import flutter widgets we want our package info dependency and we also need our github API and then the information block of course this information provider will be exactly the same as our contribution provider we're going to extend an inherited widget and then we'll define the information block inside of this class we of course need to override the update should notify function and this will always pass back true and then we want to create a static of method so that we can actually access the information block using the build context and again we'll call context inherited from widget of exact type with the information provider type inside of it and we'll cast that as an information provider so that we can then access the information block and then in the constructor again we'll pass in the key the information block itself and then the child widget tree that we want to attach to this provider if we already have the information block then we'll just pass it in otherwise we want to instantiate a new one and inside of here we call to our package info constructor and we call the from platform method which will then give us the information that we want and we also will need to set in our github API and then of course the key and the child will go into the super constructor now this package info function what it does is it allows us to grab the metadata for our application and then just put it into the information block we can come into our UI and actually start building out the widgets so let's go into the scaffold and add a new widget called information drawer to the end drawer property of the scaffold and actually what we're doing this I want to refactor everything so that this is a little bit more clean I want to take the list page and put it into its own file in this components folder and then I also want to build the information drawer inside of the components folder as well so we can just go here and grab the list page and just cut it out and then we can go ahead and put it into the list page dart file that I just created and in here we need to import flutter' material we also need to import our model and then the contribution block now back in Maine dot dart to make everything work properly we need to import from the components folder the list page widget while we're at it let's also import the information drawer file so that we can go ahead and create the information drawer widget inside of this file we're going to need the flutter material library we'll probably need our model the information provider the information block as well as the github API and now we can create the information drawer class which will extend a stateless widget and then we can add the actual UI that we want inside of this build function right here the base widget is just going to be a drawer let's set up a semantic label and we'll just call it information drawer and then inside of it will create a flex so that we can stretch it out along the entire space of the drawer we'll make the direction for the Flex vertical so that it will go completely vertical up and down and then inside of the children we'll create a new function called build info panel and we'll pass in the context and then we also want to have an icon at the bar so I'll just create a center here and I'll put nothing in it for now now this build info panel function is essentially going to build everything that we want to put inside of the drawer all of these strings of information and stuff like that you can see I've got a title that says information and then I've got the title of the application followed by the version number and then some instructions for the user followed by some author and application information and then the button and then of course the large icon at the bottom let's start with the information title at the very top of our panel so we want to create a flex as the basis for this build info panel widget and then the direction of course will be vertical again the first child inside of it will be a normal container and we want the container to have a little bit of depth at the top so we'll create some padding at the top which will be 30 pixels and then the width of it we need to expand across the entire panel so we're going to use media query of context size width which will get us the entire width of the panel itself the background color will make colors black and then inside of it we can create a fitted box we can then scale down the box to the size of the text that we put inside of this fitted box and inside of it will create a text widget that has the information text in it this style for this text widget will be a font size of 30 a font weight of bold and then we'll make the colors white so that it will actually show up on the black color now we want to take the Flex that we just created inside of this function and wrap it inside of our information provider so that we can access the information block so I just wrapped it in a new widget and then I defined it as the information provider and then I put in the information block itself with the package info from platform function and then the github API other we have the information provided around this flex we can go ahead and grab the information block so we just go final information block equals information provider of and then pass in the context now we can create a stream builder below the container with our title inside of it we want the stream builder to be on our information block info stream we're passing the context and then the snapshot and if the snapshot has no data will return a center with a circular progress indicator inside of it otherwise we'll return a list view where we create the children and we'll create a function here called build info tile and this will just take in the title that we want for the info tile and then the subtitle that we want so here for the first one I'm just grabbing the snapshot data app name and then for the subtitle I'm grabbing the snapshot data version then for the second one we have the instructions which is a double tap on a contribution to open in the browser and then we've got the author and application information for the build infotile function we'll pass in the title as a string and we'll pass in the subtitle as a string and I want to make these subtitle into a non default value so that we can differentiate between the two and in here we're going to return a list tile for each of these and the title part will be on the title field and we'll align the text at the start of the list tile and then we'll give it some style so I'm just going to make this a font of eighteen size with a font weight of bold and then the subtitle here will be a font of 12 with a font weight of W 600 so it'll be lighter than the title now with the subtitle we just want to check to see if it exists and if it doesn't then we'll put in a empty string and again the text aligned for the subtitle will be the same as the title here so we'll just text the line start now let's go ahead and build this application I want to see if this is going to work properly because in my original version I had the information provider way up in the root of the application and now I've moved it all the way down here because this is where we actually needed in our widget tree so I'm not sure if we're able to access the block like this and if we're not then we'll just have to push it outside of this function I'm also not sure if a ListView is allowed to be inside about flex or we'll find out when this builds all right so I built this and then when I open the drawer you can see we got information block is null and that means that we're not getting the information block because this is too far down in the tree all right so I was able to get this work finally so now when I open the drawer like this you can see we have all the information that we want and I'll show you how I got this to work so inside of our main dart file I put the information provider and I wrapped it around the end drawer here so this is wrapped around the information drawer right here this of course means that you need the proper imports so we needed the information provider here we needed the github API here and we also needed the package information and the information block here notice that the imports inside of our information drawer dot dart file are much lighter than before we only need flutter' material and then the information provider and then down here instead of building a ListView I've just built out another Flex where the direction of the Flex is access vertical when we built out the ListView for whatever reason it wasn't showing any of the tiles that we were building and because the tiles are never going to be scrolling up and down or anything like that it makes more sense to use a flex rather than a ListView now we want to create the raised button which will allow us to go and get the update and this is going to need to be inside of the stream builder that we created here because we need access to the info stream as well as the release stream on our block so inside of the erase button or the on pressed event we're gonna create a function called get new releases and we'll pass in the context as well as the snapshot and so now with the actual get release function of course we pass in the build context in the async snapshot we need to grab the information block and we use the information provider of method to do that and then we can use the information block to get the releases stream and rather than use a stream builder we just want to use a normal listener to listen on this stream and that will allow us to create a callback function for this particular function so for each of the releases events inside of our releases stream we want to be able to run a certain set of checks to be able to see if we have a higher release than what we currently have first let's check to see if the snapshots data version converted to a string is not equal to the releases tag name if these two are equal then that means that we have a new version of the application and so we want to create a dialog box and we can use the show dialog function to do so this show dialogue function takes in the context and then it has its own builder which builds out a widget which in our case will be an alert dialog widget so inside of this alert dialog let's set up the title and we're just going to get the title by calling snapshot data app name which will give us the application name so I'll just say utopian rocks and then after the title we just want some text that says a new version of this application is available to download then we'll just say the current version is snapshot data version and the new version is releases tag name then after this content we'll create some actions we'll create a flat button which will allow the user to go and download the new release and for now beyond pressed for this we'll just go to null and then we'll have another flat button which will allow the user to close out this show dialog box and for unpressed we just call navigator of s in the context and then we just pop this will pop the die our box out of the router and make it so that it disappears from the screen then if this if statement doesn't come back is true we want to have an else clause which will just show a normal alert dialog that says there is no new version available at this time and then the only action on it will be the closed action now that we've finished us let's go ahead and see if it works and I've actually gone into the github API and I've changed it back to the original utopian rocks mobile API because we don't have any releases in our current github repository and as a result of that that will throw back an error because it'll go to try and find them and it won't find any so if I click check for update you can see it says a new version of this application is available to download the current version is zero zero one and the new version is zero one zero and then if we click download of course that'll do nothing then we can go ahead and click close which will then close out of the dialog box all right guys well that's it for today I hope you enjoyed this tutorial if you did feel free to like and subscribe if you have any questions or comments feel free to leave them in the box below and if you dislike this video then by all means download it as much as you like have a good night