Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,150 --> 00:00:08,360
Let's wire up the choose date button here with a method that actually presents a date picker and the good
2
00:00:08,360 --> 00:00:12,050
thing here is that a date picker is built into Flutter.
3
00:00:12,140 --> 00:00:18,170
So what we actually can do here is in our new transaction state, which holds that build method where
4
00:00:18,170 --> 00:00:25,490
we built that new transaction input fields, there we can add a new method and by the way, this of course
5
00:00:25,490 --> 00:00:27,580
should be _submitData here
6
00:00:27,590 --> 00:00:33,830
now that I see it, to be in line with our general naming of using private properties and methods in our
7
00:00:33,830 --> 00:00:35,280
private classes here.
8
00:00:35,300 --> 00:00:39,680
So replace submit data with _submitData everywhere
9
00:00:39,680 --> 00:00:44,840
but of course the main thing here is not to replace that but to add a new method that actually shows
10
00:00:44,840 --> 00:00:46,070
us a date picker.
11
00:00:46,310 --> 00:00:52,010
This method doesn't have to return anything to the place where it is called and I will name it
12
00:00:52,070 --> 00:00:58,010
presentDatePicker because that is what the method should do, it should show a date picker on the screen.
13
00:00:58,010 --> 00:01:08,570
Now here for presentDatePicker, we can use the show date picker function which Flutter gives us automatically,
14
00:01:08,960 --> 00:01:14,780
just like show modal bottom sheet which we used earlier, this is used to present an overlay date picker
15
00:01:14,900 --> 00:01:20,000
on the screen. Now show date picker of course can and has to be configured,
16
00:01:20,270 --> 00:01:23,120
for example you need to add the context argument here,
17
00:01:23,120 --> 00:01:34,000
just like as on our show modal bottom sheet method here where we also had to provide a context, the show
18
00:01:34,000 --> 00:01:39,700
date picker method also needs to know the context of the widget in which you're calling it. Now conveniently,
19
00:01:39,910 --> 00:01:47,380
in that state class which is connected to our new transaction widget, we have that global context property
20
00:01:47,380 --> 00:01:48,300
available, right,
21
00:01:48,340 --> 00:01:55,570
so we can just use that. Now context here on the right refers to that class property context, context
22
00:01:55,570 --> 00:02:00,790
on the left here is the name of the context argument show date picker expects.
23
00:02:00,820 --> 00:02:05,270
So the context is one thing we need to pass, we also can pass an initial date,
24
00:02:05,290 --> 00:02:11,530
so the date which is initially selected when this picker opens and there you pass in a datetime object,
25
00:02:11,890 --> 00:02:17,110
as you can see if you hover over this here at the top and therefore we can simply use today for that
26
00:02:17,140 --> 00:02:23,860
and use datetime now as a value that we pass in as an initial date. You also might want to restrict
27
00:02:23,920 --> 00:02:29,770
the first date that can be chosen and the last date that can be chosen and for that, you can set first
28
00:02:29,770 --> 00:02:35,410
and last date. That first date for me should be January 1st, 2019,
29
00:02:35,410 --> 00:02:41,350
so I can simply pass in datetime and now not create it with now but with its normal constructor and
30
00:02:41,350 --> 00:02:47,110
to this constructor here, you see you can pass a couple of positional arguments and there is one required
31
00:02:47,110 --> 00:02:52,060
positional argument and that's the year and if you only pass the year, then this will be January the
32
00:02:52,060 --> 00:02:57,590
1st at midnight or one second after midnight in this year.
33
00:02:57,610 --> 00:03:03,730
So now it will be January 1st, 2019 and I also want to have a last date,
34
00:03:03,730 --> 00:03:09,010
so the last date which can be picked and that should also be today because you can't add a transaction
35
00:03:09,010 --> 00:03:12,720
in the future, at least not here in this app.
36
00:03:12,760 --> 00:03:19,510
So this is how we configure that, now show date picker should open up as soon as we call
37
00:03:19,510 --> 00:03:20,440
presentDatePicker.
38
00:03:20,440 --> 00:03:29,810
So let's hook up that method here to this button, to this choose date button, presentDatePicker without
39
00:03:29,810 --> 00:03:35,210
parentheses, we just want to pass a reference so that this is called by the button when the button is
40
00:03:35,210 --> 00:03:41,420
pressed and if we now save that and I press choose date here, you see that date picker open up and
41
00:03:41,420 --> 00:03:43,480
that's a widget built into Flutter,
42
00:03:43,550 --> 00:03:49,220
thankfully we don't have to build that on our own and here you see we can choose dates and I can go
43
00:03:49,220 --> 00:03:56,030
back all the way to January 2019 and choose January the 1st or on the other hand, I can go all the way
44
00:03:56,030 --> 00:04:00,000
up to the current date I'm recording this on.
45
00:04:00,080 --> 00:04:01,310
So this is the date picker,
46
00:04:01,340 --> 00:04:06,500
right now we're not doing anything with the value the user might have picked,
47
00:04:06,500 --> 00:04:11,930
no matter if we cancel or if we confirm with OK, we're not doing anything with the value and that will
48
00:04:11,930 --> 00:04:17,270
be of course the next thing we want to do, we want to save the date the user picked. Now for that, you have
49
00:04:17,270 --> 00:04:22,940
to know that show date picker, this method you're calling here actually returns a so-called future. We
50
00:04:22,940 --> 00:04:29,710
haven't worked with futures thus far. Future is a class built into Dart, not into Flutter but into Dart
51
00:04:30,460 --> 00:04:37,760
and it's a very important class there, futures are classes that allow us to create objects which will
52
00:04:37,760 --> 00:04:40,880
give us a value in the future.
53
00:04:40,880 --> 00:04:46,190
So you use a future for example also for HTTP requests where you need to wait for a response
54
00:04:46,190 --> 00:04:52,970
to come back from the server, here we wait for the user to pick a value. So show date picker, immediately
55
00:04:52,970 --> 00:04:57,890
when we call it returns a future but it can't immediately give us the date the user picked right because
56
00:04:57,890 --> 00:05:03,110
we just opened the picker, we don't know when the user is going to choose a date and click OK. So we get
57
00:05:03,110 --> 00:05:07,740
back that future which will then trigger once the user picked a date.
58
00:05:08,000 --> 00:05:13,940
Now to be informed about that when the user chose a date, we can add a method on the value returned by
59
00:05:13,940 --> 00:05:16,170
show date picker which is that future,
60
00:05:16,310 --> 00:05:23,150
so on a future we can add the then method. Then simply allows us to provide a function which is executed
61
00:05:23,210 --> 00:05:25,760
once the future resolves to a value,
62
00:05:25,820 --> 00:05:27,910
so once the user chose a date.
63
00:05:28,010 --> 00:05:33,730
So here we can pass in an anonymous function which will be triggered once the user chose a date.
64
00:05:33,800 --> 00:05:39,020
Please note that code execution in your app will not pause and wait for this to happen,
65
00:05:39,020 --> 00:05:45,170
the cool thing about futures is that the function we pass in here is stored in memory and the other
66
00:05:45,170 --> 00:05:49,970
code after show date picker if we had a print statement here.
67
00:05:49,970 --> 00:05:55,820
This will still execute immediately and will not wait for this future to resolve, which is great because
68
00:05:55,820 --> 00:06:00,730
it would be bad if we would block the entire app just because we're waiting on some user input.
69
00:06:01,100 --> 00:06:08,770
So therefore now here, this function will be called once the user chose a date and there, we will get the
70
00:06:09,970 --> 00:06:15,610
picked date as an argument in the end. This function is of course called by Flutter for us and Flutter
71
00:06:15,610 --> 00:06:17,800
will give us the date the user picked
72
00:06:17,800 --> 00:06:23,020
and there, we first of all can check if picked date, should be date not data,
73
00:06:23,170 --> 00:06:29,110
if that is equal to null because if that's the case, the user pressed cancel and then I just want to return
74
00:06:29,200 --> 00:06:32,670
in this anonymous function and not continue with any other code.
75
00:06:32,860 --> 00:06:35,380
Otherwise if we make it past this if statement,
76
00:06:35,470 --> 00:06:40,960
so if we don't go in there and return because the user did pick a date, then of course we can use that
77
00:06:40,960 --> 00:06:47,020
date in our app and for example, we can store it in a variable, that would be a good start.
78
00:06:47,020 --> 00:06:51,730
So here we have the title and the amount controller and these also should have an underscore at the beginning
79
00:06:51,730 --> 00:06:55,450
now that I see it because they are properties in our class here,
80
00:06:55,450 --> 00:07:01,810
so also all places where we use them should now add an underscore of course, also down there in the widget
81
00:07:01,810 --> 00:07:02,680
tree
82
00:07:02,980 --> 00:07:08,110
but again just as before with the submit data method, the core thing is not that I wanted to change these
83
00:07:08,500 --> 00:07:10,790
variables here, these properties, instead
84
00:07:10,810 --> 00:07:14,230
now I'll add a new property which is of type datatime
85
00:07:14,230 --> 00:07:19,510
the selected date and this is not final because this will change,
86
00:07:19,510 --> 00:07:23,470
it has no value initially and it will receive a value once the user chose a date,
87
00:07:23,650 --> 00:07:25,540
so it's not final.
88
00:07:25,540 --> 00:07:28,510
So the selected date here should be set equal to the pick date
89
00:07:28,510 --> 00:07:36,510
if we make it past this if statement here, so selected date equals picked date, makes sense I guess
90
00:07:36,890 --> 00:07:44,120
and it will also be nice to output that date down there in that text where I say no date chosen.
91
00:07:44,630 --> 00:07:50,990
So here, I want to check if selected date is equal to null, in which case I want to show no date chosen
92
00:07:51,410 --> 00:07:56,960
but if it's not null, then we do have a date and then I want to output the formatted date.
93
00:07:57,070 --> 00:08:04,160
Now to format that, we need to bring in that intl package which gives us that date formatting functionality,
94
00:08:04,510 --> 00:08:11,150
so let's import intl.dart from the intl package here at the top of new_transaction.dart
95
00:08:11,320 --> 00:08:20,830
and with that imported down there in the else case of our ternary expression, we can use date format and now
96
00:08:20,830 --> 00:08:22,720
it's up to you how you want to format the date,
97
00:08:22,780 --> 00:08:30,340
I will use the yMd format which is a relatively short one and insert my selected date here to output
98
00:08:30,340 --> 00:08:32,090
that.
99
00:08:32,240 --> 00:08:35,860
So now with that, we should save any chosen date and output it here,
100
00:08:35,870 --> 00:08:42,230
so if I save that and I go back here, open this, if I click cancel, nothing happens but if I choose let's
101
00:08:42,230 --> 00:08:46,060
say yesterday, also nothing happens,
102
00:08:46,070 --> 00:08:54,250
do you know why? Because I didn't do one important thing. Setting selected date here is nice and it will
103
00:08:54,250 --> 00:08:56,220
change the property in the class
104
00:08:56,380 --> 00:09:01,480
but to also update the UI and rerun build, we need to wrap this into set state.
105
00:09:01,660 --> 00:09:07,780
Remember that this is your trigger to tell Dart or to tell Flutter that a stateful widget updated
106
00:09:07,930 --> 00:09:09,570
and build should run again.
107
00:09:09,640 --> 00:09:15,340
So once we change the selected date in set state, we should have a setup that will reflect a selected
108
00:09:15,340 --> 00:09:17,110
date on the screen.
109
00:09:17,160 --> 00:09:18,680
So now back in the app,
110
00:09:18,880 --> 00:09:23,330
if you bring up that date picker again and now I choose yesterday,
111
00:09:23,330 --> 00:09:24,730
now I get an error,
112
00:09:24,730 --> 00:09:27,510
datetime is not a subtype of type string.
113
00:09:27,530 --> 00:09:28,500
So what's wrong here?
114
00:09:31,050 --> 00:09:37,800
Well my problem is down there where I format that date, just as before, of course
115
00:09:37,800 --> 00:09:38,760
mistake,
116
00:09:38,760 --> 00:09:43,020
I don't have to pass the date into this constructor, instead that constructor gives me an object where
117
00:09:43,020 --> 00:09:45,990
I can call format to which I then pass my date.
118
00:09:46,020 --> 00:09:50,430
So always format takes a date, not the constructor here.
119
00:09:50,580 --> 00:09:52,480
So don't repeat that mistake here
120
00:09:52,500 --> 00:09:54,500
as I did, with that however,
121
00:09:54,540 --> 00:09:56,910
now you see the date is output there
122
00:09:57,060 --> 00:10:01,830
and now we can also of course choose a different date and overwrite this if we want to.
123
00:10:05,390 --> 00:10:06,910
Maybe it looks a bit nicer
124
00:10:07,100 --> 00:10:16,400
if we add some string concatenation here and we say picked date: and then we wrap this expression
125
00:10:16,400 --> 00:10:22,340
where we transform the date into some string interpolation with ${} so that we
126
00:10:22,340 --> 00:10:26,370
have a bit of a more meaningful output and we inform the user what this date here means,
127
00:10:26,390 --> 00:10:28,570
it's the date you picked afterall.
128
00:10:28,850 --> 00:10:34,680
Last but not least, I want to move choose date all the way to the right here and that can be done since
129
00:10:34,680 --> 00:10:43,010
we're in a row by wrapping our text here into flexible with Flexfit.tight or as you learned, into expanded
130
00:10:43,460 --> 00:10:48,560
and now this will take as much free space as it can get and only leave the button here as much space
131
00:10:48,590 --> 00:10:49,490
as it needs
132
00:10:49,490 --> 00:10:51,930
which means that the button is now all the way on the right,
133
00:10:52,100 --> 00:10:57,890
plus it's internal padding which it has, as you can see if I tap on it and our output here is all the
134
00:10:57,890 --> 00:11:03,600
way on the left occupying all this free space here. So that is it,
135
00:11:03,600 --> 00:11:08,820
that allows us to choose a date. Of course right now, we're not saving and using that date though when
136
00:11:08,820 --> 00:11:10,200
I add a transaction,
137
00:11:10,200 --> 00:11:11,700
so let's do that next.
15512
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.