 Hey everybody it's Brian. Welcome to the 39th Flitter Tutorial. Today we are going to be going over date and time pickers. This is kind of a little bit of a complex one. I've had a few questions on how to use this thing. People seem to be mystified about it and when you go into the documentation you can see there is a kind of a rough template of what you need to do here. There's a future where the date time show picker and it kind of you know I don't want to say it's difficult to understand but for somebody who's new to this it definitely has a little bit of a learning curve on how to use these things. So we're going to jump right in and just do it now. I should note that I am very closely following the source code the official Flutter GitHub repository. Not on all tutorials but on this one specifically I am actually pretty much just ripping out these two functions simply because it's really the only real way to do it. It's pretty efficient so just wanted everybody to be aware of that. So we're going to say add our Flutter tutorial live template. If you have no idea what that is it's because you did not watch the 35th video where I showed you how to build a live template. Alright so we're going to import the Dart async so we can work with futures and we have our main with our stateful widget and our state and we're just going to actually build into this thing. And we are going to say date time date equal new date time now and we're going to say what is it time of day time equal new time oops I want time of date not that time of date not now so we're just going to grab the current date and the current time here. Now what we want to do is write two functions one to grab the date and one to grab the time so we're going to say future maybe if I could spell future and we're going to say select date this is of course an async why are you not popping up on me here I think I broke my IntelliSense let's see if it'll start maybe if I did it like this and actually did it correctly there we go man it's frustrating when you're typing and IntelliSense just decides it doesn't want to work because you didn't know what you're typing to begin with but anyway so we're going to say final and when you type show you're going to see there's a show dialog show bottom blah blah blah we want the date picker you see it has a lot of properties so we are going to term that um try and figure out why this thing is freaking out on me it's because it's an async function we have to await it there we go I was staring at the screen going why is that complaining all right so we have our show date picker function and we want to actually add in the build context here that way the dialog knows where it's coming from there's our context and for initial date we want to just say the date and this is where it gets a little confusing you have a first date and a last date well you don't want them going all the way back to the beginning of time and you you don't want them going all the way forward to the end of time so you have to say like new date time and we're just going to say the earliest thing go back to 2017 actually let's say 2016 and we'll say new date time the other thing goes 2019 so we're going to really limit their choices here then what we need to do is kind of monitor this thing if picked that's not even an if statement what was I thinking there there we go not equal no and picked is not equal to the current date we're just adding a little bit of logic here actually I don't want that then what we're just going to do is we're going to say print we're just going to grab that two string and then we're just going to set state here and then we're just going to say the date is equal to the picked value so there is our select date function in all of its glory and we are just going to just completely copy this man I am really screwed up today new raised new raised button too many positional arguments what oh I forgot the child got a little ahead of myself there I was like what are you talking about flutter I know what I'm doing unfortunately I really don't know what I'm doing apparently so we're going to say select the date and it should show the context in there there we go so anatomy of this code is very simple we are going to return a future which is actually a null meaning we're not going to return anything but we are going to use the async functions for this because this is an async call we need to await it so once we've actually awaited for this whole little block of code to finish then we're going to have this picked value we're going to make sure it's not null and it's not the currently selected date because we don't want to you update a change if no change actually occurred then we're just going to simply print out our debug statement and then we're going to set the state so that we can track this whole thing all over again got our little emulator up and we are going to push this bad boy out all right give it a second to build what have we here semicolon expected on press what did I screw up I think that's a pretty self-explanatory error there we go so there is our selected date and if we hit select date bang there is the date selector and go back here and there is our selected date we said the earliest we could go back to 2016 let's actually just test that real quick yeah it won't let us go any further back if we cancel nothing happens we select a new date bang get a new date so that works pretty well so what we're going to do next is we're going to actually just put in a new text as a spacer here don't like doing that but I'm just kind of being lazy today so we're going to add that and then we are going to actually future with a null there's our sync function get rid of this we can actually see what we're doing here and then we want a pretty much same design pattern final time of day picked equal a weight and we want the show time picker and this thing wants a context plus an initial time so this is going to be pretty straightforward and easy to work with so give the content we haven't had the context in here got a little ahead of myself there we go and the initial time we're going to say is the time that we're just going to for the sake of speed here just copy and paste this bang and we want to copy this very similar design pattern we are just using a synchronous call to the show time picker we're waiting for that and then once we get that we're making sure the picked is not null and it's not the current time and then we're just saving the state back up so we are going to just continue with our blatant copy and pasting here that way it's very simple very easy to understand and hot reload should grab that there we go so now we can actually choose a time there we go nine thirty and it'll pick it back up where we left off we could say seven thirty two thirty you know whatever we wanted to do so that in a nutshell is the date and time pickers i hope you found this educational and entertaining i thank you for watching and if you're so inclined the source code for this and all of the tutorials is out in my website void drums dot com there's a link to the github let me just crack this open here so you just go down here you click on flutter tutorials and they're all numbered and you can actually just you know clone that whole repose you have all the code also uh there is the void rooms facebook group with seventeen hundred other programmers out there not just dart and flutter uh all different languages so if you're working on something completely different you can ask a question there most of the time we can help out last but surely not least the site is one hundred percent funded by your donations so please consider donating if you got some spare changeland around