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:06,530
So enough words about widgets and how to learn and combine them,
2
00:00:06,530 --> 00:00:12,890
let's go back to our application here. At the moment, there are at least two things which are missing,
3
00:00:12,890 --> 00:00:14,990
one is the date picker here.
4
00:00:14,990 --> 00:00:22,130
Right now we have no way of selecting a date and therefore we always use today which is not really
5
00:00:22,130 --> 00:00:24,860
what I want to use. To change this,
6
00:00:24,860 --> 00:00:31,040
let's go to the new transaction and there below by existing text fields,
7
00:00:31,040 --> 00:00:37,820
let's add a new text field but also a button which should open up a date picker because Flutter has
8
00:00:37,820 --> 00:00:42,290
its own built-in date picker widget which opens up as an overlay on the screen.
9
00:00:43,190 --> 00:00:47,420
So in here, I want to add a row actually because I want to have two widgets next to each other, a text
10
00:00:47,420 --> 00:00:53,600
field where the user actually can't type which we only use to output the chosen date and then the date
11
00:00:53,600 --> 00:00:54,830
picker.
12
00:00:54,830 --> 00:01:01,550
So for that, let's use a row, add the children property or argument here and now let's add the two things
13
00:01:01,550 --> 00:01:02,720
I just mentioned.
14
00:01:02,870 --> 00:01:07,540
So we can add a text widget or a text field widget which is disabled, whatever you prefer,
15
00:01:07,580 --> 00:01:16,920
I'll use the text widget here and on that text widget, by default I will say no date chosen.
16
00:01:17,440 --> 00:01:22,330
Then next to that, since it's a row, it's placed next to it automatically,
17
00:01:22,330 --> 00:01:34,000
I can add a FlatButton here with a child of text, choose date and then because it's a button, also
18
00:01:34,000 --> 00:01:40,570
onPressed which for now will be just an empty function which doesn't do anything of course but
19
00:01:40,570 --> 00:01:45,080
which we can soon populate to do more. With that if you save that,
20
00:01:45,340 --> 00:01:50,050
you see this extra input below our other text fields here.
21
00:01:50,050 --> 00:01:55,810
Now we can certainly improve the look of that a bit, for example on the button, let's add a text color
22
00:01:56,140 --> 00:02:02,290
and there, I want to use my primary color based on the theme with the help of theme of, which gives us
23
00:02:02,320 --> 00:02:04,060
access to our theme data.
24
00:02:04,060 --> 00:02:05,860
So now this looks better
25
00:02:05,860 --> 00:02:11,740
and in addition to that, maybe add a bit more height to this whole row here.
26
00:02:11,740 --> 00:02:13,470
Now to add more height to the row,
27
00:02:13,480 --> 00:02:19,480
we can't add height here, the row doesn't have a height property but we can of course wrap the row in
28
00:02:19,480 --> 00:02:22,300
a container and give that container some height.
29
00:02:22,300 --> 00:02:31,920
So in that container, let's maybe use 50 as a height here, maybe 70 actually, yes that now looks better,
30
00:02:31,920 --> 00:02:34,190
now there's a little bit more spacing.
31
00:02:34,410 --> 00:02:36,540
So with that, we have a button to choose a date,
32
00:02:36,540 --> 00:02:43,320
we have the text here. Now I also want to change the style of the button a little bit,
33
00:02:44,380 --> 00:02:50,710
so on that text widget in there, the style of the text I mean, I'll add the style key and I'll now not use
34
00:02:50,710 --> 00:02:54,400
a theme style but create a style in line here
35
00:02:54,400 --> 00:03:01,990
so to say and simply give this a font weight of FontWeight.bold and of course it's up to you if
36
00:03:01,990 --> 00:03:02,650
you want that,
37
00:03:03,160 --> 00:03:06,220
I like to have that as a bold text,
38
00:03:06,220 --> 00:03:12,110
I think that's a bit easier to spot and to use then. Now
39
00:03:12,120 --> 00:03:15,870
with that, I think the add transaction button is a bit lost now,
40
00:03:15,870 --> 00:03:25,590
so maybe we now go down there and change this from a FlatButton into a RaisedButton here and change
41
00:03:25,590 --> 00:03:31,550
the color instead of the text color to purple so that the background is purple and now let's make sure
42
00:03:31,550 --> 00:03:33,610
that the text color is white
43
00:03:33,740 --> 00:03:39,710
and for that of course, we could set text color to colors white here but actually, we have two issues
44
00:03:39,710 --> 00:03:40,460
here anyways.
45
00:03:40,490 --> 00:03:42,650
For one, I shouldn't choose purple like this,
46
00:03:42,650 --> 00:03:48,920
instead I want to use my theme. So let's select my context or my theme from my context and choose the
47
00:03:48,920 --> 00:03:53,150
primary color there and instead of setting the color here to white,
48
00:03:53,150 --> 00:03:56,640
we should also get the default button color from the theme and
49
00:03:56,870 --> 00:04:06,170
we can do this with Theme.of context.textTheme.button.color and now since this is still
50
00:04:06,170 --> 00:04:09,320
black and I would rather see white here,
51
00:04:09,320 --> 00:04:14,820
of course you know that we can go back to the main.dart file to set up a general text theme for our button.
52
00:04:15,200 --> 00:04:20,900
So we're setting up the text theme here, here for the title, next to title we can now also set up our button
53
00:04:21,170 --> 00:04:22,000
theme,
54
00:04:22,040 --> 00:04:24,740
set this to a text style here
55
00:04:24,740 --> 00:04:29,630
and since we're still in the copy with mode, whatever we set up here will be merged with the existing
56
00:04:29,630 --> 00:04:30,620
theme
57
00:04:30,620 --> 00:04:36,860
and there we can set up a color and that in my opinion here should be colors white because I'm using
58
00:04:36,890 --> 00:04:42,200
purple here and I personally like white as a contrast,
59
00:04:42,200 --> 00:04:48,190
more on that 700 shade here which is the default by the way that is chosen for the button.
60
00:04:48,200 --> 00:04:53,780
So with that if we now save this, you see now we have that white color here because we manually overrode
61
00:04:53,780 --> 00:04:54,340
this
62
00:04:54,500 --> 00:05:00,950
and the advantage of doing this via the theme here of course is that now whenever we reference this
63
00:05:01,580 --> 00:05:08,270
color here on buttons, we automatically get that and we can always switch it in one central place.
64
00:05:08,330 --> 00:05:10,790
So with that, we're working on that
65
00:05:10,790 --> 00:05:14,000
but of course our main goal was to add a date picker.
66
00:05:14,120 --> 00:05:16,730
So let's make sure that this button now also does something.
7046
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.