Flutter 39 - Date and Time pickers Video Lecture | Flutter: Build beautiful native apps in record time - App Development

hey everybody it's Brian welcome to the
39th flutter 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 gonna 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 be aware of that
so we're gonna say at our flutter
tutorial live template if you have no
idea what that is it's because you did
not watch the thirty-fifth 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 a date time date
equal you know date time now and we're
say oh is it time of day time whole new
time whoops on what time of day not that
time of data now so we're just going to
grab the current date in 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 gonna
say future maybe if I could spell future
and we're gonna 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 is started 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 gonna say
final and when you type show you're
gonna see there's a show dialogue show
bottom blah blah blah we want the date
picker you can see it has a lot of
properties so we are going to term that
I'm trying to figure out why this thing
is freaking out I mean it's because it's
an async function we have to await it
there we go staring at the screen going
why is that complaining alright 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 alas date well you
don't want them going all the way back
to the beginning of time we need 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 they go back
is 2017 actually let's say 2016 and
we'll say new date time and this thing
go is 2019 so we're gonna 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 pictus 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
I'm just gonna grab that to 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
you raised your raise 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 sinc functions for this because
this is an assent call we need to await
it so once we've actually awaited for
this whole little block of code to
finish then we're gonna have this pick
value we're gonna make sure it's not
null and it's not the currently selected
date because we don't want to 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
so 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
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 gonna add that and
then we are going to actually future
with a null
there's our sinc function get rid of
this we can actually see what we're
doing here and then we want a pretty
much the 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 added 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 gonna 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 asynchronous 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 in 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
yeah there we go
nine thirty and it'll pick it back up
where we left off we could say 7:30 to
30 you know whatever we wanted to do so
that in a nutshell is the date and time
Pickers 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
rumps comm 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 repo so you have all the code
also there is the void rooms facebook
group with seventeen hundred other
programmers out there not just dart and
flutter all different languages so if
you're working on something completely
different you can ask a question in
there most of the time we can help out
last surely not least this site is 100%
funded by your donations so please
consider donating if you got some spare
change laying around