All language subtitles for 45. Getting Started with Date Selection

So enough words about widgets and how to learn and combine them,

let's go back to our application here. At the moment, there are at least two things which are missing,

one is the date picker here.

Right now we have no way of selecting a date and therefore we always use today which is not really

what I want to use. To change this,

let's go to the new transaction and there below by existing text fields,

let's add a new text field but also a button which should open up a date picker because Flutter has

its own built-in date picker widget which opens up as an overlay on the screen.

So in here, I want to add a row actually because I want to have two widgets next to each other, a text

field where the user actually can't type which we only use to output the chosen date and then the date

picker.

So for that, let's use a row, add the children property or argument here and now let's add the two things

I just mentioned.

So we can add a text widget or a text field widget which is disabled, whatever you prefer,

I'll use the text widget here and on that text widget, by default I will say no date chosen.

Then next to that, since it's a row, it's placed next to it automatically,

I can add a FlatButton here with a child of text, choose date and then because it's a button, also

onPressed which for now will be just an empty function which doesn't do anything of course but

which we can soon populate to do more. With that if you save that,

you see this extra input below our other text fields here.

Now we can certainly improve the look of that a bit, for example on the button, let's add a text color

and there, I want to use my primary color based on the theme with the help of theme of, which gives us

access to our theme data.

So now this looks better

and in addition to that, maybe add a bit more height to this whole row here.

Now to add more height to the row,

we can't add height here, the row doesn't have a height property but we can of course wrap the row in

a container and give that container some height.

So in that container, let's maybe use 50 as a height here, maybe 70 actually, yes that now looks better,

now there's a little bit more spacing.

So with that, we have a button to choose a date,

we have the text here. Now I also want to change the style of the button a little bit,

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

a theme style but create a style in line here

so to say and simply give this a font weight of FontWeight.bold and of course it's up to you if

you want that,

I like to have that as a bold text,

I think that's a bit easier to spot and to use then. Now

with that, I think the add transaction button is a bit lost now,

so maybe we now go down there and change this from a FlatButton into a RaisedButton here and change

the color instead of the text color to purple so that the background is purple and now let's make sure

that the text color is white

and for that of course, we could set text color to colors white here but actually, we have two issues

here anyways.

For one, I shouldn't choose purple like this,

instead I want to use my theme. So let's select my context or my theme from my context and choose the

primary color there and instead of setting the color here to white,

we should also get the default button color from the theme and

we can do this with Theme.of context.textTheme.button.color and now since this is still

black and I would rather see white here,

of course you know that we can go back to the main.dart file to set up a general text theme for our button.

So we're setting up the text theme here, here for the title, next to title we can now also set up our button

theme,

set this to a text style here

and since we're still in the copy with mode, whatever we set up here will be merged with the existing

theme

and there we can set up a color and that in my opinion here should be colors white because I'm using

purple here and I personally like white as a contrast,

more on that 700 shade here which is the default by the way that is chosen for the button.

So with that if we now save this, you see now we have that white color here because we manually overrode

this

and the advantage of doing this via the theme here of course is that now whenever we reference this

color here on buttons, we automatically get that and we can always switch it in one central place.

So with that, we're working on that

but of course our main goal was to add a date picker.

So let's make sure that this button now also does something.