Flutter Tutorial for Beginners #31 - Formatting & Showing Dates

Key Takeaways

okay then going so now we've got to the point where inside our home screen we have access to the data we need including the time which we ultimately want to output to the screen but at the minute this time kind of looks a bit cruddy I'd like to maybe format this in a different way that looks a bit better so to do that we're going to use a package from flutter and that package is called intel over here and you can see inside this contains some date formatting and passing so we're going to use a function from this package that is going to help us format our date in a nicer way so to install this we just have to grab this thing right here and we're going to paste it inside this file if I minimize this we want to go to pub spec gamal and we want to go down to our dependencies and they are here so let me come underneath the HTTP and paste this one in and save it then going to close this off I'm going to click get dependencies to update that and grab that dependency so once that's done I need to go now to our service file which is this world time and this is where we're going to format the date so first of all we need to import this package and to do that I'll say import and then I'm just going to look for intel and it's gonna be this one down here okay so now down here we want to use a function provided towards by this package and all willing to do is delete this dot first of all and then I'm gonna say date format which is provided to us by that package we just imported then use a method called JM and then a method on that called format and inside here we're just gonna pass in now so I'm gonna say now like so and this is going to format that date into something that looks a lot more palatable so if I save this now and if we go to run again hopefully when we see the new data printed it's gonna be a bit better and get a hot restart and in a second we should see the time and there we can see it's now 1:20 p.m. that looks a lot more human readable and that is ultimately what we're going to output to the screen so now we have this data inside the home screen let's go about using it inside the template over here so currently this flat button this is inside a column so we're just gonna add some more widgets to this column the first thing I'm gonna do is a sized box because that gives us a bit of breathing room between different widgets in a column we've seen our already and this is gonna have a height of 20 pixels alright so the next one I'd like to do is a row and the reason I'm gonna do a row is because underneath this flat bottom we're gonna have two things next to each other on the same level and that is going to be a little icon of the flag and also next to that we're going to have a text widget which is going to output the location now we're not going to do the icon just yet but I'm placing this row therefore in the future what I will do is say children and then this will be a list of widgets and we'll do the text widget for now so this text widget is going to say inside it the location so we need to grab the data variable that we have now and then inside that we want the location property so if I save it we should see that on the screen now cool looking good but we want to style this a bit better so I'm going to say now we want a style property inside this text widget and this will be a text style and inside here we want to format the text a bit better we want to make it bigger for a start so I'll say font size is going to be 28 like so 28 pixels and then also the letter spacing will give a value of about 2 pixels okay so save that and that looks a bit better now while I'm here what I'm going to do to this row is go to the main axis alignment and I'm going to set that to be Center so this now is going to sit in the center so let me save it and preview and that looks a lot better now I also want to bring this down quite a bit as well so I think what I'm going to do inside the safe area and surrounding this column is add some padding so let me go to this Action menu and then go to add padding and then I'm going to change this to instead of all I'm going to control each side separately so I'm going to say from and then it's l CR B so we can control the left top right bottom independently and the left is going to be 0 the top is going to be 120 pixels and that's what's going to bring it down quite a bit now then the right is going to be 0 and the bottom is going to be 0 so if I save it now hopefully yep it brings it down a fair whack okay so then for now after this row what is the next thing we want well that is the time itself but before that we need another sized box you know I can do this correctly so size box and then in there we'll say the height is going to be this time 20 pixels again maybe so let's do 20 and then after that we want a text widget to output the time so again this time is now stored on the data so we need something similar to this we'll say data and then it's the time property that we want so let's save that and see it okay looking good but this time what we need to do is make this style a bit better so we'll say style and then text style and all I'm going to do is probably just increase the font size so I'll say fonts size and we want to make it nice and large so 66 pixels save it and that is looking pretty good okay cool so now if we hop restart we should see the updated time so 1:24 p.m. in building and there we go my friends we've now formatted our time down here inside whoops wrong file so we'll time so we format at the time right here just by using this junior method and the format method and we did that using date format by installing and importing this package or right here so we get that updated format which looks a lot better for the user then inside the home screen all we're doing is outputting this data that we get back from the loading screen so we receive it here we store it in data and then we output in that data down here inside the widget tree so this is all looking pretty good so far what I'd like to do in the next video is go back to the loading screen because currently the loading screen looks a bit pumps if I hot restart will quickly see it over here so hot restart we see the loading screen there it looks a bit rubbish I'd like to make that look a bit better by using a spinner and to do that we'll use another package for flutter and we'll see in the next video