How to Display formatted Date in Text Field in Flutter | Part 2

hey what's up everybody so welcome back to another tutorial of this part number two series so in the very first part of the video you have learned about how we can format the data and we have used very some useful methods that are required when we are working with the apis and so so you can see here date underscore time it is vomit you understand how we can format the date in different year month and date we can either change that to your day or month whatever you want and same case here for hours months and definitely in order to get the am pm format standards so these are all the basic individual units that we discussed in the very first part now in the second part of this video we're gonna do here is we we are gonna create here a date picker and with the help of that we are gonna pick up the date and show it inside our date time text feed right so let's jump in and get started here so all i need is to go inside my lip folder and let's create here a file with the name of date underscore screen dot dart file and i'm gonna create here a stateless widget so let me create that one and give it the name of date screen all right and let's import here material dot dot file right after the container i need to create here uh scaffold in order to generate my app bar all i need is to have my scaffold widget and let me create here an app bar and let's define the app bar and right inside here i need to display my title with the help of tax widget let's give it the name of date field and in order to make that into the center all i need is center title to be true right so right after the app bar i need to display my container widget and that's where everything will be inside our body so usually the data like text field and form that we're going to display here so we we're going to pass it inside here so i need to generate some kind of padding so let me define here child padding and i need the padding padding from all sides so i need to define here add in sets dot all and let's give it the 16.0 means top light or top right left bottom all spaces from top right left bottom right so right after here we are gonna create here a new widget we have to define here new widget so just like we have explained i explained that in assignment date underscore time underscore format and you see here we have used here a package with the name of intl and this package is very useful in order to format the date so we don't need to define our intl package because it's already inside my pups pack but here i'm gonna use here date time field so let me go inside my chrome and all you need is just simply type your date time underscore picker underscore form field inside your flutter and let me install that so you see here a very useful documentation almost everything is identical however we have explained things how we can uh do changes like formatting the date how we can combine date and time that's our main objective in this complete core series uh so if i go inside the installing and let me install this package first so let me grab this one so i copied it from the clipboard open up your terminal and already in my case it's open and if i press enter and this is going to load the uh package inside our pubspace.aml file right so now this dependencies is installed now we are able to use this package so right after the child uh padding all i need is to define uh the actually should be right after this so let me define here date time feel so all i need here is child um let me uh actually it should be uh it's taking time to load so child and let me define a date time field so right inside here you see here we have the format and the on show picker so in order to define the format the standard that we choose for our data so format um actually let me give the name to be final format equal to date format and the very basic format standard that i want is years let me define here months and the day all right and you see now the package is automatically import here right so whenever you are working with the date format intel package should be there right so right after the on show picker we have to define here the contacts that's very important so let me define that here first so the context and the current value the value that we want if that value is not if that value is null then we have to either display the current value so i'm gonna display here current value so right after that current value uh we have the context and the current value inside the on show picker so i want to make this method async all right and right after here right inside that i need to display the date so final date equal so we have show time picker we have show date picker so in this case we are going to use only date so let me define that show on to use the show date picker right and the initial value you see here i want my initial value to be current value and if that value exists so let me define a datetime dot now so this is going to add our the date that is that the current date that we have which in my case is right now 12 um 20 21 right so the first date i want to have here the year i need to pass which is date time um and let me define here the year which is 1900 and the last date that i want inside my onshore date picker i want to give it the uh 2100 so let me define a date time and this and define it 2100 and this should be the year right all right so we have set up everything here so let me format that first so just to make things a little bit neater all right so right after that i need to just simply define return the date and that's it all we need and if i try to show you my emulator and you see nothing happens here the reason why because we need to display that inside my main dot dark file as my home screen so let me define here date screen all right and you see now it automatically import here so now if i just try to hard reload and i definitely this is going to display us inside our emulator and there we are and you see down here if i just try to click on this one and now we are able to see our date picker right now if i try to press ok and there we are so year month and day so we now we are able to display our result inside our date time field now just to make this little bit better all we can do is right inside my date time field which is right up here right after the format we can also define here something which is known as decoration so let me define that input decoration we can do a lot of changes inside this package so there are a lot of flexibility this package provides us so we can also add here a label text if we want so let me define here the label text to be choose date and that's it right if i just try to hard reload it and display the result now so so you see here now we are able to get our choose date now if i just try to press ok and you see now it's just float up and we are able to display the results inside our text field only the date that we are displaying right so now we can also change the date format i explained in the very first part of the video all you need is just to change the format of the date right inside the date format so i always want is date and the month and the year which is small wise all four and if i try to hard reload and just try to check this out i'm going to choose the new date so either i need i don't need to change uh but it's automatically displayed but i just want to change and select a new day so you see now it's 21 december 2021 and the reason why because these are all 4ms capital so that's the also one way that you can display the result and you can also want to if you want to change that to mm to make this small months only to display and if i just try to close this one and pick up a new date and that's where we are right so you guys learn how we can change the format of the date according to different uh standards that we want so that's it guys and i hope you guys learn something out of it so in the next video you're going to learn about how we can change the time there very slight difference but it's going to be a very useful video so don't skip it and watch that one and i want to see you guys in the next part

Channel: AB Nation Programmers

Views: 4,150

Keywords: show datepicker on textfield click flutter, datetimepicker form field flutter, display time in flutter, date picker flutter, input type date flutter, how to combine date and time in flutter, search text field flutter, showdatepicker flutter date format, How to Display Date in Text Field in Flutter | Part 2, flutter crash course, show date and time in flutter, datetime_picker_formfield

Id: QPS9Vuos9z4

Length: 9min 33sec (573 seconds)

Published: Mon Dec 20 2021