All language subtitles for 4. Combining Widgets

I'm here in a brand new Flutter project, just a bit cleaned up,

I removed all the comments and I converted this homepage widget into a stateless widget and you find

this main.dart file attached to this video in case you want to replace yours with it.

I have no other widgets in this project right now, I haven't added any custom widgets, I haven't added

anything,

this is my basic setup and now the goal is to get started and we'll basically build this application

as I just sketched it out and we'll add new widgets as we need them or dive into the widgets Flutter

gives us as we need them. Now,

what will we need to build this application?

Remember that we had this chart area at the top and below that, we had a list of our transactions.

So what we certainly have is at least two widgets sit next or above each other,

we have that chart and below that, a list of transactions,

that list of course also means that we have more than one item in there

but we can take care about that in a separate step. For the moment,

let's start basic

and let's make sure that therefore on the body of our scaffold here, which is rendering that page of our

app, that there

we have a column because we will have two items in there.

Hence we should add the children

key here to the column and in there, I want to have these as a set, two arrays.

Now for the moment, I'll add a card here and card is a built-in widget which is this pre-styled container

I mentioned earlier, I'll add a card here to later hold my chart. For the moment the child which I add

in the card, so the widget that is wrapped by that pre-styled container,

that will be a text widget where I say chart, simply as a placeholder of course, we'll add a real chart

there later.

Now below that card, I want to have that list of transactions.

So for now, let's add another card here where we say list of tx, tx for transactions simply. Let's save

that and let's see if that works and for that,

I'll start my app in without debugging, so I pressed the shortcut for this option here, start without

debugging and I want to see whether that works.

So let's wait for that to build and launch and with this launched, this is what we get.

You might barely be able to see the card effect here, if you watch really close on your own screen probably,

you'll see that the text is inside of a tiny container with a white background and a little drop

shadow there.

So this is certainly not the final look you want here but at least we have two widgets sit on top of

each other.

Now since we use that card and since the card is one of the more important base widgets Flutter gives

you,

let's see how we can make sure that this looks a bit better, that this also takes up more space

and for that here, let's press control space and see what we can configure on the card. We could set the

color, the background color,

we can also set the elevation which simply is a double which controls how strong that drop shadow is.

We can also add a margin which add some space around it and the other fields here aren't that helpful

to us right now.

So let's maybe go with elevation and set this to five and let's see how this changes things.

Now we can see a bit of a more stronger drop shadow on that first widget or on this first card

but what we haven't changed at all is the size. For this you have to know that the card by default

assumes the size of its child.

So if we want to change the size of that card here, then we need to change the size of child.

Now text on the other hand is a widget which by default only takes as much space as this text needs

and if you want to change the size of text, you need to change the size of its parent.

So what can we do here

since this card depends on the child and this text depends on the parent?

We have a dependency which is kind of hard to break, right,

how can we increase the overall size of the card?

There are two ways of breaking that -

one is that we wrap that text with a widget where we can set a size and

we can do it with the refactoring shortcut which you can find in the key bindings in case you forgot it

and there we can wrap the text with a container because container is the most universal styling positioning

sizing widget you have. With a container, you can control almost anything when it comes to how something

is sized or how something is aligned and styled,

at least if we talk about things like background colors and so on and therefore, once I wrap the text

with a container, we can use the fact that on the container we can set a width and we could set this to

100

and this means the container will now have the width of 100 device pixels which is a unit

that always gives us the same size even on differently sized phones or devices.

So now we can see that this container is a bit bigger,

this becomes even clearer if I give that card a color, which is the background color, of let's say blue.

If we do that, then we see it more clearly.

So we can change the size of the card by increasing the size or in this case, the width of the child

because now the child is a container, the direct child of the card is a container, on that

we can set the width and therefore we make sure that the card no longer depends on the width of this

text, which is just as big as it needs to be but instead on the width of the container which we can control.

You could also set this to double.infinity which is a special value which means take as much width

as you can get

and here this means the container will take the entire width of the device

since there is no other surrounding element or widget around our card that would restrict the overall

width the card can take.

So that is how we could break this.

Another option would be that we don't wrap our text here in a container but the card. Again with the

refactoring tool, we can add a container around card

and now here we can also set the width to double.infinity

for example. If we do that, we also have a card that takes the entire width and that has one important

implication. The important implication is that card by default depends on the size of its child,

unless you have a parent or a card like container, which has its own clearly defined width. This also

means that column doesn't seem to be such a parent

because when we just hit column around our card, the card didn't expand to take the full available width

and indeed column is a widget which only takes as much width as its children need.

Now with container, we give column a child that says please give me all the width I can get

and it takes all the width it can get and therefore column sizes itself after that

and also now takes the full available width because column always has the width of its broadest, of its

widest child and card now does not take the width of its child but since it has a parent that sets a

clearly defined size, card actually takes the parent as a measurement and takes the width of the parent.

Now when you hear something like this the first time, it sounds like something that is incredibly hard

to learn because it sounds like you have to remember all these combinations by heart,

you have to remember that a card takes the child width unless there is a parent that sets a clearly defined

width. Now two important points here - for one, you have the official docs and things like that are typically

noted in there,

so you can take you official docs to learn how widgets behave regarding their size

and in addition and this is really the best advice I can give you, don't learn such things by heart, learn

them by doing, experiment with things.

If you have a card that doesn't have the size you want, start wrapping in a container,

see what happens if you set a width or height there,

start wrapping it with a column,

see if that changes things, start wrapping the child of the card with a container and so on.

So simply try things out because you will have no chance of learning these things by heart,

there are way too many combinations and widgets to do that,

that's also why I don't provide a cheat sheet with all possible combinations because that would be too

many and too many to learn anyways,

try such things out. Build a dummy application where you can simply play around with widgets just like

we're doing it here and you will get a feeling for how you can combine widgets to get a certain result

and also important in Flutter, there always is more than one way of getting a certain result, just as

you see it here.

We could have added the container around the card or inside the card, here

the result is the same even though these are two different setups.