All language subtitles for 28. First Styling & Layouting Stepfs

So let's style our question text and for this, here on text, we can actually pass more than just the text

that should be output.

That is the positional argument of the text widget which is built into Flutter and the material.dart file,

however this also is a couple of named arguments,

for example the style argument. The style argument if you hover over it, takes a text style object

and now this is not a widget but a normal object based on the TextStyle class which in turn is provided

by material.dart.

You simply create a new instance by instantiating text style like this, like you always instantiate classes

right,

you always do that by using the class names and adding parentheses, let's add a comma here and now text style

in turn takes a couple of named arguments that allow you to configure the text style,

for example you can set a font size.

Now as always, you can hit control space to get a list of things you can set,

you can for example change the color and so on but here, I'll set the font size

and I just want to set this to let's say 28. If we do that and we save this,

you see now that's way bigger

and that's already better I'd say.

It would also be nice if that were centered.

We can easily do that, not with the help of style but with the help of another named argument on the

text widget and that would be text align.

Here we can set text align and this requires a text align value.

Now here you could instantiate text align but actually, this now works a bit differently,

there you can just use text align without parentheses and then dot

and here you have a couple of default values, for example center.

So what's that text align center thing here?

It's a so-called enum which is a list of predefined values

you could say. The idea here simply is that there are different kind of values you can assign for alignment

like center, left, right and so on

and these are encoded as numbers and instead of using 0, 1 and 2 which are very meaningful to computer

of course, they're not that meaningful to you as a developer, as a human

and therefore we have this enum thing which is a different data type in Dart, which simply assigns labels

to these different options, to these different numbers.

So it's always a good solution if you have like different options and you want to use a human readable

label and behind the scenes, you only basically need a number that identifies an option.

We'll have a look at the source code behind that in a second.

Now how do I know such things? Well from the official documentation

and I'll dive into that together with you later in this module because of course, it is important that

you are also able to find out such things on your own.

I'll come back to that later, for now let's just use text align center here,

if we now save that, you will see that the text is not just bigger but that it also should be centered.

Doesn't really work, right?

The reason for that is that by default the text widget only allocates as much space as the text needs.

We can change this however by wrapping our text here in another widget and that would be container

widget for example. Container can be wrapped around our text here, so open and close parentheses after

text and container takes a child named argument which now is the text,

so that is now the widget that's wrapped into container. Container by default is pretty invisible, doesn't

have anything that you would see on the screen, if you save that, doesn't change right, it's the same as

before. So what we can do with container however is there we can set a width and you can set this to

double.infinity, .infinity gives you basically a width that ensures that the container takes as

much size, as much width as it can get,

so by default the full width of the device

and now we see this is centered,

why?

Because the container takes the full width of the screen now and the text now automatically takes the

full width of the container.

So now the text does not use its text as a measurement for how big it should be but the surrounding

widget and that's just the default behavior of Flutter and you'll get into such behaviors and get a feeling

for them as you work with Flutter and as you build apps.

So no worries if that is a lot of new information right now, that is something which will become familiar

the more you work with Flutter.

So now the text takes the full width of the container, which in turn takes the full width of the device and

therefore now we see that centering effect.

Now let's wrap up this first little styling excursion here by also adding another named argument to

container and that would be margin. Margin is spacing around the container

and for that, you have to understand that the container widget is a special widget which actually has

a bunch of settings that allow you to space things and to align things.

The core of the container always is the child,

in our case that's the text widget. Around that however, we can set up some padding, that is internal spacing

inside of the container.

Now inside means that container also may have a border which marks the border of the container

and that border can be drawn such that you can see it, you can give it a color and so on and outside

of the border, you have that margin thing,

so that's the spacing around the container, between the container and neighboring elements.

So that overall makes up the container and it's just important that you keep this in mind,

child in the middle, padding around it

if you have one, border around that if you have one and margin around all of that

if you have a margin. Now here on this container, I'm not setting a border, not setting a padding but I'm

setting a margin and the margin is of type EgeInsetsGeometry,

actually created by calling EdgeInsets and then dot one of these options.

Now these are basically additional constructors,

a class can have more than one default constructor and you can call them as methods on the object.

It's not something we have learned about yet,

I'll dive a bit deeper into this in the next lecture,

for now let's just take it for granted,

these basically allow us to create different variants of one and the same object, for example with

EdgeInsets.all, we can assign a certain value as a margin in all directions around the container. With

only, we could target one specific direction, for example only to the top or only to the bottom. So here,

I'll actually use all

and now to all, you simply pass a double value, so here we could add 10

and now this will take 10 device pixels of margin around the container, which is why we now see

a little bit more spacing around our title. So that were obviously a lot of new things,

container, margin, new types of constructors, static fields like here text align center but these all show

us that now we have that logic, this a little bit more complex widget in our own widget which hides that

complexity when we use it here in the main.dart file and

this is now a great proof of why you want to split your app into your custom widgets because it ensures

that no file gets too big because in the main.dart file, we would have a way longer code if we had

all that code in there and instead, we really have different custom widgets which can focus on certain

tasks,

for example here the task is to output a question in a nicely styled way.

Now with that, let's dive into special constructors in the next lecture.