All language subtitles for 18. Adding Text Input Widgets (TextField)

For the moment and not for the entire app but just for a moment, I'm done with the styling and the setup

of the content.

Of course you can always tweak this to your requirements

and again, we will all change things later

but for the moment, I'm happy with these styles,

I now want to focus on the next steps which means that users should be able to add transactions here.

And for that, we need some button that allows users to start the process of adding a new transaction,

open up some extra page or some extra input field where we can add a transaction, that would be

pretty sweet. For that,

let's go back to our code here

and first of all, I want to add an area where users can enter transaction data.

Now we have our chart container and below that, we have the column with all our transactions.

Now as a start, I want to make sure that this chart container and our transactions actually are ordered

from top and bottom which they are but that they start at the beginning, that we don't have that space

around setting.

So let's go to the overall wrapping column here and change the main axis alignment to start, which

is the default,

hence we can comment this out,

I'm using a shortcut here in my IDE,

you can simply add two slashes in front of that if you want to.

So now with that, we have all that content pushed up to the top

and now I want to add a new input area. For the moment,

I'll add that input area below the chart and that input area in the end will require a couple of different

text inputs for the title, for the amount and then also some input for the date.

Now since we need multiple widgets, what does this mean?

We need a column or a row

because otherwise we can't have multiple widgets in the same part.

Now of course we already are in a column,

so here we could just add our text inputs.

However it would be nice to also have some styling around these text inputs, maybe a border, maybe

a background color

and therefore here we could add a card to get some default styling, light rounded corners, also

some background color and then in there as a child, I want to have my text inputs. Now as I said, this will

be multiple text inputs which should be all in that card,

so since we will have multiple widgets in there, now we definitely need a column.

You could use a row

but I think it makes more sense to have the text inputs sit on top of each other.

Now how do we create a text input though? There is a special widget in Flutter, the text field widget. Don't

confuse it with the text widget, the text widget which we're using down there is responsible for outputting

text, the text field widget is responsible for receiving user input. So we can add a text field widget

here and if I add, let's say for the moment, two text field widgets here and I save this, then indeed

we see two lines here.

So that's our card,

the card is always a bit hard to see on the white background but there is this card around it.

We can maybe add some elevation here to increase the drop shadow, it's a bit easier to see

but most importantly we see these two lines, that's the most important part here.

So we have these two lines

and if I tap into a line here, indeed the soft keyboard should come up. If you're testing this on an iOS

simulator, you might have to enable 2D soft keyboard in your toolbar at the top under the hardware item.

So the soft keyboard comes up and indeed, we can enter text here,

thankfully we can also enter it with our physical keyboard which makes it easier to test this whilst

we are developing.

So that's pretty nice,

we can enter this here,

we can also close the soft keyboard here on Android and therefore, we can enter text.

However, at the moment it's not clear which text should go into which text field and of course it would

also be nice to have some spacing around the text fields so that they don't stretch the entire width

of our card here,

also spacing top and bottom and in general, improve the layout, the styling and also the information

about our text fields. So to style this, as I said it would be nice to have some spacing around our text

fields.

Now on a card itself, you can only define some margin but no padding, so you can't define inner spacing

between the card edges and the content of the card.

The column also has no padding or margin argument, so we can't add spacing here and you learned what

you can do in this case,

wrap it with a container.

So here, we can again use the refactoring tool to wrap the column here with a container and with that

wrapped here, you can add either a margin or a padding,

here it doesn't matter because we're now inside of the card,

so margin around the container will add some spacing between the card and its content and padding here

will not add spacing between card and content because the content would be the container

but since we don't directly see the container, we would have some spacing between the card edge and then

inside of the container between the container and our text fields.

So both would work

and here I will go for padding and use EdgeInsets.all 10 to add a padding of 10 in all directions.

So now we have some spacing and our text input don't stretch the entire width,

we also have some spacing top to bottom. Now it would also be nice to have some labels on the text fields

and thankfully, you can of course also pass arguments to text field to configure that.

If you hit control space, you'll see there are a lot of things you can set. Feel free to go through these

options on your own,

things like autocorrect and autofocus should be pretty clear, autocorrect enables auto correction

when the user enters text, autofocus makes sure that this gets focused the moment it is focusable.

You have more strange arguments like controller and so on which we'll use later. You can change the cursor

color, so that marker in the text field once the user tapped in there, which color it has, which radius,

which width it has. You can change the decoration which will become important for us

in a second, you can enable or disable it,

so whether the user can tap in there and that keyboard comes up or not and so on. As always, play around with

these settings, dive into the official docs and get a feeling for what's happening there.

At the moment for us, the most interesting part here is the decoration argument where we can add an input

decoration object by instantiating the input decoration class which is provided by Flutter

and there you can for example control whether there is a border around our text field,

by default we have this bottom border here.

You can add a counter that indicates how many characters were entered, you can handle different error

styles and these are also things I will come back to later in this course once we dive deeper into handling the

user input, adding validation and so on. For now, we'll not.