Show Live Time & Date in Flutter Website - Firebase Web App Tutorial with Flutter Null Safety 2022

so now let's start designing our home screen step by step so on the home screen dot dot first of all we have to basically get the current time and date which will be updating at real time okay on our home screen so yes you will learn in this video how to add a time that is the current time which will be updating at real time to your flutter websites or flutter web portals so here on the home screen dot dot inside the above the widget build let's uh use the built-in method which is by the name init state okay in its state now initiate is basically a method which is called whenever the user navigate to the home screen okay it will be automatically called so here basically what we want we want to get the current time which will be updating at real time and of course the date so let me just write here comments okay that time let's quickly define the format for time that is how we want to display the time and of course for the data as well step by step okay so i'm going to create a new method the return type for which will be string and let's give this name as a form current lifetime you can say okay this is the method name which which we are going to implement and we have to pass one parameter to this method which will be that time and as this is specifically uh formatting the time so we just pass time to it so let's quickly define the format so we can set that format okay for this purpose we have to use our dependence so go to the pub.dev site and simply search for intl this first one okay with null safety okay first one with null safety intl then click on installing and simply copy this dependency come back to the project and in the popspec.eml here after the cupertino icons just pass that intl okay and then simply click on pubget exit code 0 which simply means dependency has been added successfully so now if you type date format this one okay which belongs to intl dot dot intel dot dot okay so for displaying the time the format will be first of all we want to display hours okay h double h stands for hours then colon after colon you can simply type hours and then minutes double m in small english alphabets okay and then after minutes we want to display seconds so make sure to put colon and then double s in small english alphabet so it simply means seconds so hours minutes seconds okay and after the seconds give one space that is let's say if you want to display the 12 hour format that is am and pm then you have to simply type here a which denotes the am and pm that is 12 hours format so yes and then we can simply say format and we have to pass the time which we are receiving here as a parameter in this method now this is for current lifetime format okay in this format our time will be visible on our home screen now the next thing is to format the data as well so just copy paste this method down here and we can say format current date that is in which format we want to display our date so we will pass here that as a parameter to this method and the format will be first of all we want to display the date then space we want to display the months okay this data is in small english alphabets and then in capital letters write four times m okay so it simply means date months that is month okay that is currently which month is it and then which date is let's say today okay and then of course we want to display the year so in small english also let's write four times y and then of course we have to pass the date which we are receiving here as a parameter so now what we need to do here in the unit state first of all we can say call our method which is format current lifetime and we have to pass the current time okay which is that time dot now okay and then for the debt basically this debt time dot now give us two things one is the time another one is the date okay so here in this method which is form and current lifetime here we pass the date time dot now that is the current time and date and basically this method returns back only the time in proper format okay and now we will call our second method which is for formatting or you can say getting the date only so we can say format color date and here we can simply say that time dot now and this method is basically it returns only the date in this format okay now let me tell you one more time we can even directly call this but you know this is not the proper format that is a common user will not understand that is what kind of data or what kind of time it is okay so that's why for getting the time we implement this method which is for men current life time and we pass the dead time dot now that is the current time and date basically this returns it is kind of different format so in order to get the proper readable format which a common user can understand okay that's why we format that okay we are passing this over this method and basically this method returns back a time that is in this format hours minutes seconds with m and pm there is 12 of 12 hours format which a common user easily understand okay this is a proper format for displaying time similarly for debt okay we pass the debt time dot now and it returns back the debt in this format that is first it will display the debt month and then year okay which a common user can easily understand so that's why we format these now as you know that this method give us a string type our time that is in this format okay so we need to assign this to variable same the date we have to assign to a string type variable so we will define here let's initialize not just define but initialize as well so we can say time text equals to empty string and then of course we will get the date so time that text okay so as you know it is return us this uh time in this format okay which is the return type string so that's why here we will assign this to our time text so now time text basically it has the current time and then same goes for the date we will say date text it has now the date because we need to use these things now on our home screen now the next thing is basically we have to get the live seconds which will be i mean you will see at real time which will be changing okay just like real time when you see your watch so for that purpose we need to implement another method and let's give it name as a get current life time that time let's give it name time now that time not now then we can say final string let's give it name as lifetime equals to format current lifetime and here we have to pass the time now then for the date we can say final string live date equals to format current date and here we have to pass the time now and then we can say if this dot mounted then we have to assign this inside the set set to that is the lifetime and live debt to their required strength type variable for example the lifetime we have to assign to our time text and then of course we have then the dare text and we have to assign the live data to it so what we have done inside this method well it is so simple and so easy we get the current time okay and we assign it to our time now which is of data type date time okay so it basically contain the current time now this current time we want in what format we want this for example for the time we want this format okay while for the date we want this format so that's why we call these methods and we pass the time now to it okay so basically it gets the lifetime and then it gets the live debt and then if everything is ready then we simply assign our lifetime to our string type text variable and our date to our debt string type text string type variable because our widget which is a text widget i mean using which we will display text on our home screen it only accept the string type variables so anyways now let's just call this method inside the inert state we can simply say here that is timer dot periodic and we have to set duration as you know we will display the lifetime which is seconds which will also show you the life seconds so we can say seconds to one okay and as it will remain constant that is one second two second three second that is one second will be changing after every seconds after one increment will be adding to it okay so cost and after 60 seconds of course it will become it add minute okay that is the time will be changed so here we can call our method which is get current lifetime and now let's just display our time and date okay using the text widget on our home screen that is to display lifetime and debt on the widgets on the user interface so anyways now what we want to do after the app bar we have the body of our screen so we can say center widget child column children widget and using the text widget let's first of all add our time text okay and let's apply some text style on it font size will be 20 and the color for now let's just set it to black later on of course we will change because we have to change the air bar also i mean the background color for it we will use gradient color for now let's just quickly complete this letter spacing will be 3 and the font weight fontwear dot bolt and as this text style will constant so we will add a const modifier with it so let's just test the app so let's open up the terminal and write this command and press enter flutter run hd chrome dash dash web renderer html and here we go here you can see the time is updating at real time as you can see currently it is 2 pm okay and this is the second as you know that after 60 seconds the minute will be changed okay so here you can see 5 seconds 56 seconds 57 seconds 59 60 and minute changed okay so now it is 2 1 pm okay and the second is changing so congratulation it is working fine now also we have to display the date alongside with the time so we will display it in the same text widget using the concordination sign plus okay when we combine to string we use this sign okay we want to move to the next line so for that purpose we have to write slash n which means in the next line we want to display add the concatenation sign plus okay we want to display the date string as well which is that text okay just like this so now if we hold restart by pressing r in the terminal so here we go here you can see the time and here is the date and the time is updating at real time now let's add something which is some padding from all the sides so this text widget let's wrap this with padding okay from all sides let's give 12 so now let's start restart so here we go okay it looks more beautiful now so 2 44 p.m and 22nd february 2022 and now the minute change as you can see it is updating at real time so that is really cool and really nice one thing is which will be doing next is basically to work on the app bar we have to add a gradient color to it as well as as you know our we are using the black theme that is the black ui so we will also change this to black so i'll see you guys in the next video bye for now

Channel: Muhammad Ali's Coding Cafe

Views: 6,141

Keywords: firebase web app, firebase web login tutorial, firebase web app tutorial, firebase web hosting, firebase web push notification node js, firebase web login, firebase web push notification javascript, firebase web push notification, firebase web authentication, flutter web, flutter web development, flutter web app, flutter webview, flutter website, flutter web firebase, flutter web tutorial, flutter web app tutorial, flutter website tutorial, web development full course, web, app

Id: Y0wzfM7Y3m4

Length: 16min 42sec (1002 seconds)

Published: Tue Feb 22 2022