Flutter Tutorial - Cupertino Date Picker & Time Picker [2021] iOS Styled Date Picker

with the ios styled cupertino day picker you can pick dates and also times and next to it you can also select any other value which you like if you are new here subscribe to my channel and make sure to watch this video till the end let's get started by creating a date picker and if you like you can also show your date picker within a dialog we start with an our build message and here inside we create a new method to build our date picker and inside of this method we create a cupertino date picker and here you need to supply first of all an initial date time and this is then the date which is initially selected by your date picker widget and therefore i create here in our state a new field where we put the date time to the current time secondly you need to supply a mode within your cupertino date picker and i set it here to date because we only want to select dates however later we will also look at how we can choose a date and time and only a time also and lastly you need this property on daytime changed and every time if we later change our date time within our pickup then we get here the new day time which we then set to our state and now we have here the state picker and it is working however it is pretty large like you can see and we want to shrink it a bit to change the size of your picker you simply wrap your cupertino date picker inside of a size box and then you set here the height and i set it to 180 pixels and now our date picker looks much smaller and more beautiful right now we can select here any date which we like and this is also what you can change with this minimum year and maximum year properties and after we hot restart you see we have the maximum year at 2021 which is the current year and the minimum year is at 2015. sometimes you also want to display your daytime picker within a dialogue and therefore we make use of this cupertino dialogue to create this dialogue i have created here first of all a button and if we click on this button then we want to open our dialog with our date picker and within this dialog we put our date picker and secondly we also have a button and if we click on this button then we want to hide first of all this dialog again therefore i created a new method show sheet and here inside we supply first of all the state picker and this is then later displayed in our dialogue and secondly if we click on this done button then we want to hide our dialog again and now we want to create together this showsheet method inside of this show sheet method we get then our datepicker and we simply show it then within a cupertino model pop up and here within the builder you can set your widget inside so in our case we put here a cupertino action sheet inside and then you can set here all the actions and in our case we only have one action which is here this date picker and secondly we also set here the cancel button which is in our case here this text done and it also calls in our on clicked callback and this is all what we need so now our child our cupertino date picker is displayed here within our cupertino action sheet and if we click on this done fields then we execute here this navigator.pop and we close again our dialog next we want to get the date which we have selected over our datepicker and also show it in our ui therefore you can simply create here a date format and here you can supply first of all the month the day and the year of your date and then we can format our date time which is every time selected by our daytime picker because every time if we change our date then we get here the new date time within our state and exactly this day time we currently access and we transfer it now to a string and secondly we want to show this string value therefore i simply create here a snack bar and here i have created a code for the snack bar and you also can check the whole source code of this project out with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a more efficient and better developer and within the snack bar we want to display right now this value which is our formatted date and now we can try it out so i selected here january the 1st 2015 i click on done and then you see we have here the first first 2015 and this is exactly what we have printed within our snack bar right now we format our daytime object first of all to the month then the day and then the year however you also can set the year for example here at the beginning and then also remove here the slash at the end and now if i select a value then the year is displayed at the beginning and between we have every time some slashes and then comes the month and the day and if you want to use this format method which is formatting a daytime object to a string then you need to go also to your pops back drama file and here you need to include this intel package under your dependencies furthermore we also want to look at how we can select any value from a cupertino picker we also want to select here a date with a time together we also look at how we can select hours minutes and also seconds and we also select only the time without these seconds therefore let's start with a simple cupertino picker where you can put any value inside first of all we create a list with all the values which we later can select and secondly we create an index and this is then every time the index of the selected value and in this case by default the first index is selected which is this value and after this we go to our build method and here inside we create then a custom picker and within this custom picker we create then a cupertino picker with a height of 300 pixels and secondly we also need to define here the height of each item and this is then 64 pixels for one of these items if we change the selection of our cupertino picker then we also need to change every time the index and therefore we have here this property on selected item change and here we get every time the index of the item which was selected and we simply store this index in our state inside of this field which we have created initially and lastly we only need to build all the items this is what we do within the children property and here i go over all of our values which is here this list of all these strings and within this callback we get then every separate value and also the index of this value and therefore i have created here this model builder method and with this method you basically get then the index and also the value of a list of values so that you can map over them and now here inside we can then create each value and therefore i simply create a text widget which is centered and we put our value inside and with this we have here this cupertino picker which is selecting by default the first item in our list and we also can change our value for example i put it to apple then the index will go to the value of 1. next we want to change the style of the selected items so we want to change the background color and also the foreground color of our text therefore you can go here to your text style and here you can then for example increase your text and you also can set here a different color and therefore we simply check if the index which we are currently building is the index which we have selected and if this is the case then we want to show here for the selected item the color of pink and otherwise we show here the black color and now you see that the selected item always has you this pinkish color you also can change here this background color because right now we have here this grayish background color and therefore you go to your cupertino picker and here inside you have this property selection overlay and this is basically this gray box which you now can change and here you can put any widget inside however you also can put here this cupertino picker default selection overlay inside and here inside you can then set a background color of this box and i set it here to a pinkish color and now you see that our background color is here pink if you like you can also hide here this background overlay color and therefore you can also put here any other widgets inside for example a container and now you see that this overlay is not there anymore within your cupertino picker you also can set this property diameter ratio and here the default value is 1.1 so i set it below this value and now if i hot reload you see that it changes here our style so everything comes closer together and it also looks here more rounded right now we have here scrolled to the end of the list which are here our lemons and we also can scroll to the other end of the list grapefruit however you also can go to your cupertino picker and here inside you can set looping to true and this will then continue our list so that we never have an ending list and lastly you also can change here the height of each item therefore you can set for example here less pixels inside for example 50 pixels in height and after your hot restart you see that our values have here less height like before you can also show this copartino picker inside of a dialog and therefore i have created here a button and if we click on this button we show again this sheet which we have created before together and here inside you put then this method inside which is displaying our cupertino picker and lastly if you then click here on this done button then we execute this method and here you can basically for example print the current value which you have selected and this means if we have selected here a value and then click on done then this value is also displayed in our snack bar at the beginning of this tutorial we have looked at how we can select a date however sometimes you also want to select more you want to select also a time next to your date and therefore we want to create here this daytime picker where you first of all can select a date then you can select the hours and the minutes of the day to change our cupertino date picker also to a time therefore you also need to change here this mode and here you put for example date and time inside and after this make sure that you hot restart your application and then you also see here on the right side the hours and the minutes and also am and pm if you don't like to show here am and pm you also can set here this format to 24 hours and this will then display the hours in a 24 hours format right now we can select here any value from a specific year however you also can change it so for example you can put the minimum date to the current year and then you put here that it should be the february the second month and the first of february and you also can define the maximum date which can be picked and i set it right now to the current date time after this make sure that you hot restart your application and you can see that i can select only today as the maximum date which we have specified here and also if i scroll here up you can see that i can select only the first of february which we have defined here with this minimum date here we have to find that it should be the february and the first i also have created again a button widget where we then put our daytime picker inside so if i click here on this button then our daytime picker is displayed in this dialog and if we click on this done button we also want to simply format our daytime and this time i also include here the hours and minutes which are then also printed within our snack bar and this means if i click here right now on done then he also prints the time the hours and the minutes here within our snack bar we also can display only the time within our cupertino picker therefore you go to this cupertino date mode and here you set then only it to time then make sure that you hot restart your app and you should see that he has selected then the current time and like before if you don't like these am pm then you also can set here this format to 24 hours and then only the 24 hours are displayed here as hours we also can display our time within a dialogue therefore i have created here again this button widget and here we simply put then our copartino datepicker inside and also if i select here time and then i click on done then it is also printed here in our snagbar and this time i only put the date format to the hours and minutes and this is then printed within our snack bar if you like you can also change the interval of what you can select here for example over the minutes so i can change it here to an interval of 10 minutes and now if a hot reload you see here first of all this error which says that our initial date time also needs to be within this 10 minutes interval and therefore we want to change our initial time to change our date time i simply overwrite here the init state and here we simply create then a message to get a new daytime object and now we want to create this daytime object method and here within this method we want to get based on our current time the right time for this interval and this means that we simply return here another daytime object where we put then the year months day and hour of the current time insight and lastly we set here the minutes inside which needs to be a multiple of our minute interval so it can take here the value 10 20 30 40 50 and you also can take here the value of 60 which is also zero and now if a hot restart you see that we have an interval of 10 minutes every time for our minutes and initially we have selected here the zero minute because we have set here zero inside however you also can set here another multiple of this 10 inside and i set it right now for example to 30 and then if you hot restart you see that he has initially selected the value of 30 minutes we also want to create a picker where you can select the minutes hours and seconds like a timer to create this timer we go to our build method and here we create this time a cupertino timer picker and here you need to supply then first of all the initial timer duration and this time we need to create a duration in our state instead of a daytime object and i set the duration initially to five minutes and secondly you need to define in your copertino time picker the merge and here i want to set it to hours minutes and seconds and lastly you need to put here this property on timer duration changed inside and here we get then every time the duration which we have changed within our picker and we simply put this new duration inside of our state inside of this field and with this we have here this cupertino time picker where we can select the hours minutes and seconds and the initial time is set to 5 minutes however you also can change it so you also can set here the initial time to the hours for example one hour and to the seconds and i put you for example 30 seconds inside and after your hot restart your application then you also see that we have your one hour and 30 seconds inside what we have defined here like before you also can change here the interval so you can change here the interval of your seconds and also minutes and by default you have here every time the value of one and this means every time if we go from one second to another second we change by the value of one and if you want to increase it then you need to put here a higher value inside so let's put here for example three minutes as an interval inside and now if we hot reload you get here first of all this error which says that our initial timer duration is not inside of this minute interval range and this is because our duration is set here to 5 minutes and instead it needs to be on an interval of 3 minutes and therefore it needs to be a multiple of three minutes so you can put here for example three inside six nine and so on i put it right now to six and then you need to hot restart your app and now you see he has selected here six minutes and we also can change our time by three minutes every time which we have defined with this minute interval and like before you also can create again a button and if you click on this button then you want to display here exactly this cupertino time picker which we have created before and this will then display our picker here inside of a dialog and if we click here on this done button then we also want to get our value which we have selected and we want to format here our duration object where our value goes inside which we select and we want to format it to a string and then we want to put the string inside of our snag bar therefore we create a new method for mate duration to format our duration object and then you can make use of this code here which is basically formatting your time correctly so that we display first of all the hours then the minutes and the seconds as a string and now if we select here any time and click here on done do you also see that the time is then here as a string formated hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye [Music]

Channel: HeyFlutter․com

Views: 31,194

Keywords: flutter cupertino, flutter cupertino widget package, cupertino package, cupertino package for ios devs, how to use cupertino, gds: yes;, flutter tutorial, date picker, cupertino, flutter date picker, flutter widgets, date time picker flutter, flutter cupertino date time picker, date time picker, flutter cupertino date picker, flutter tutorial for beginners, cupertion date picker, date picker in flutter, flutter datepicker

Id: aPaFalC2a28

Length: 18min 12sec (1092 seconds)

Published: Thu Mar 11 2021