Flutter Tutorial for Beginners #27 - World Time API

Key Takeaways

all right southern gang ultimately we want to show time data on our app and to do that we're gonna have to use some kind of API to get time data so I'm going to be using this free API here called world time API and I'm gonna leave the link to this down below so if we go down here and scroll to the bottom we can see if we go to the time zone list it's going to give us a list of all the different locations we can request to to find out the time in that location so there's quite a lot of different places around the world that we can query so I'm gonna do a search ctrl F and then look for London and I'm gonna click on that and now you can see we get different information about this on the webpage but this is all the information we get from the response if we make an HTTP request to this so we can see the day of the week the day of the year the week number etc and we also get the times down here so we can see the current date time we can see the offset so we need to add this to this over here to get the actual time okay so let's now have a look at this we can see we can get it in JSON or plain text format we're gonna work with Jason so if we click on this we can see this is the data we get back the different properties and this is the endpoint that we actually need to make a request to to get this data so I'm just going to copy that dude and minimize this and then over here this is where we want to make the request for that data so first of all I'm gonna delete all this stuff right here because we don't need that and I'm gonna change this to get time and when we call it we need to change it over here as well get time and by the way we're still in the loading screen over here and then inside here we can first of all make the request right so to do that we're going to say response response so we're storing the response inside this object then we're going to await this response first of all we get the data by using the get function and we pass in the endpoint right here so now we're going to go out and get that data and what we could do is just print that data but first of all let's turn it into some kind of format that we can use source a map and then the data is equal to JSON decode we pass in the data or the response that we get back and then the body of that response which is where the actual data is stored so let us now print out this data so I'm going to say print and then the data so I'm going to now save this and open up this panel then I'm going to hot restart by clicking this we should see after a second we get all of this data back okay so the things that we need are the date/time which is somewhere down here I can't properly see this so let me just move this up okay there it is date/time this is the thing that we need right here okay and we also need the offset which is a right here because we need to add this this extra hour to the date/time to get the actual local time inside that city so that let me now minimize this and let's sort this out first of all I'm going to comment this dude out because we don't want to print it every time we get the data and the next thing we want to do is get those properties from this JSON data so I'm going to say down here get properties from data okay so we want the date/time and we also want to be offset they're both strings so let's say string and then first of all dates time is equal to the data which is this stuff we get right here and then we want the date/time property so date time like so okay so now we've got one of those things and then the second thing we want is the offsets or say the offset is equal to data and then the offset property so that makes sense doesn't it we've got those two properties now the date/time and the offset so what I'm going to do is print knows badboys first of all I'm going to say date/time and then underneath that print offset just to make sure that this is working as we're going along one of the worst things to do in coding is to write a hell of a lot of code and then preview it preview it as you go along because if you do make a mistake you can see it right there when you make the mistake rather than getting down 20 minutes down the line and not knowing where you messed up so if we save this now open up this panel and a hot early start then we should see after a and these two things okay so we get null for one of these things and that's because this property right here is not actually offset its u T and then C underscore offset so that's a prime example of what I just did if I was to carry on later on and use this somewhere this offset variable then I might not know where the problem is but since I did it right here right now I know that this was the problem so anyway let's try this again hot restart and hopefully now we don't get in the hole and we get the plus one okay so this is kind of like the date/time string and this is a string as well which is plus one now we need a way to kind of put these together so add this one to this and also get it in a format which might be a little bit better so what we're going to do is actually convert this into a date/time string or a date/time object so we can do that in doubt pretty simply underneath here and in fact I'm going to comment these two outs as well because I don't want to see that inside the console every time I run this so the third thing we want to do down here is create a date/time object essentially now we can do that in dart by using the date/time class and then we want this to be called now so we just created a variable which is of type date/time and we're going to set that equal to a date/time object like so so we're instantiating this and what we want to do is actually use a method called pass on this and we need to pass in this date/time variable and we'll pass it in right there so we're taking this date/time string which is a string which represents the dates and passing it into this method on the date time plus and what that does is actually converted into a date/time object so if I was to say now print now down here and save this let's open up this dude and hop refresh your hot restart and now we can see this is the new kind of date/time does not that much difference but now it is a date/time object all right so now we have that now it's a date/time object we can use a method on this date/time object this instance of it which is because that's where we store the instance we can use a method called at and we use this method to add a specified amount of time or a duration to a date object now we've seen the duration object in a past tutorial as well we use the duration object like this and we pass in how many seconds or hours or you know days we want so it's going to be hours in our case and what we want to do is pass in this offset but at the minute it's a string which has a plus in it and a zero and in fact let me comment this out and then just uncomment this so we can see it I'm going to save it and then go to run and then hop restart and we can see we have these two characters at the start which we don't really need so what I could do or rather to be honest it's just this one isn't it but we could make a substring from this which is just the actual one the number itself so I'm gonna say over here I'm gonna say dot and then use a string method called sub string and then inside there I'm going to go from position 1 to position 3 now if we preview this now and hot restart then hopefully we should see just 0 1 because now we created a substring from that string okay so now we can use this number we can turn it into an integer because currently is still a string but we can turn it into an integer and I'll show you how to do that in a second and then add that integer as an hour to this date which is what we want to do so let me comment out that do it again and uncomment these two and then here this expects an integer and we have a string so we can convert that into a string by saying int dots pass and then passing in that string so it's going to take that string and pass it into an integer so 0 1 string will now become 0 1 integer so we pass in the offset variable and I think that should pretty much do it let me just put a semicolon at the end and now if we print this it's gonna be an extra hour so let me save it and run then we go to hot restart and hopefully we should now see this is the actual time in London and actually that's still an hour behind and that's because I made a glaring error this is non-destructive so we need to update the now variable so we need to say now is now equal to now dot add and then this extra time so now we're updating the now variable because this is non-destructive it doesn't directly update it so if I save it now and then go to hot restart hopefully now we should say 554 of something similar awesome so now we get the updated time that is the right time now in London so in the future we could update this location over here to several different locations when a user can choose that and then it's going to go out make that request and get the time in that location so all of this is looking pretty good now but this is quite a lot of logic right here and I don't really want to just sit in here on the loading page it makes it messy and it makes our code a bit less reusable so in the next video we'll see how to separate all of this logic into its own class in a new file