All language subtitles for 15. Building a Widget Treef

To get a more beautiful app, it would be a good start to have a white background and maybe not this reddish

text with the double yellow underline and we only get this here because I'm outputting the text widget

in the MaterialApp and that is enough to bring something onto the screen but it has no default stylings

for our mobile app.

It does not have any background or any appBar because for Flutter, you have to configure that all manually.

Keep in mind that Flutter controls the entire UI, all the pixels on the screen are controlled by your

Flutter app in the end, by the Flutter framework.

It does not take an existing mobile app and just mix in some widgets or some components,

it controls the entire app instead and therefore you also have to give clear instructions about

every detail,

what should be the background color, should there be an appBar?

And to do that, there is a little helper widget which you can use and I'll replace my text widget here

with it and that's scaffold. Now scaffold is yet another widget which is baked into material.dart.

It's made available there and scaffold has the job of creating a base page design for

your app, so it will give you a basic design and structure and color scheme or coloring for

giving you a UI that looks more like a regular mobile app page. Scaffold also has a couple of named arguments

and you can always hit control space to get some auto completion in the IDE and get a list of the

named arguments that are supported

and here you can also cycle through with the arrow keys to get some help and some explanation of

what each of these named arguments does and

there are tons of arguments and typically, you only use a few of them for each widget you are creating

and here for example we could add an appBar and then a body, body is basically the main content of the

page and appBar as the name suggests is the bar at the top.

So here, we can add appBar and now again appBar if we hover over that takes a preferred size widget.

Now what's a preferred size widget?

Well, it's a special kind of widget you could say, you could build it on your own but since the appBar

is such a typical and specific thing in any application, you can simply pass in a pre-built widget which

is also named appBar. appBar again is a widget provided by material.dart and as always, all widgets

are classes,

so here we are instantiating a class but this is a class which extends stateless or a stateful

widget in the end and appBar

then again take some configuration. So here if I hit control space while being within the parentheses with

my cursor,

I get some explanation on what I can pass here and you can pass a bunch here.

You can pass actions which would be buttons in your appBar, you can pass some of the bottom tabs if

you want to add some tabs in there.

You can change the background color but for now, I only want to set my title,

title is a named argument that allows me to set a title for this page

and here we could add my first app as a title.

However title does not take some text but if we have a look at it,

title actually takes a widget and can always hover over that to see what goes in there.

So it takes a widget, not some text but it takes the text widget and now

this could be confusing but the text widget is not some plain text but this is actually a widget which

takes some plain text, which takes a string

therefore as a positional first argument and then it outputs some text on the screen, the text we're passing

in here but text is a widget, not the plain text.

This here with the quotes,

that is plain text.

So now I'm passing in my text widget, which in turn takes that plain text as a widget for the title argument

in my appBar widget and we already see a bunch of widgets here and whilst this can be confusing initially,

this is how Flutter works, you compose your user interface by mixing multiple widgets together.

So here we have our overall app widget, which then uses a scaffold widget to get some basic page styling,

which then has an appBar widget for its appBar which then takes a text widget.

Now of course, we might not just want an appBar here but also a body, so we can add body here.

Now that's on the scaffold widget, so make sure you are adding this on the right level, outside of the

appBar and outside of the text widget arguments

but on the scaffold arguments, here we can add body and the body here

again could be our text, like this is my default text.

Now one recommendation I have here, always add a comma after closing parentheses because this will allow

you to autoformat this in a very readable way and

that's just a feature the Flutter extension for Visual Studio Code and also for Android Studio offers.

You can format your document with a certain key binding and you can find that if you go to keyboard

shortcuts

and there, you search for format document in Visual Studio Code,

then you should find a key binding which you can also change if you're not happy with the default and with

that key binding if you press that, you auto format your code to be a bit more readable

and with these trailing commas at the end of every line, Flutter is able to format this nicer. If I would

remove this comma after my body argument here,

you'll see now it formats this a bit more unstructured and for short snippets like this, this is

fine but the longer your widget trees get, the easier and nicer it is to read this with these trailing

commas which improve the auto formatting but that's just a tiny hint for writing clean code.

So with that, we finished our scaffold widget which we didn't create ourselves but which is provided

by Flutter and

we passed an appBar and a body.

And now if we save this, it should automatically rebuild and hot reload your application. Hot reload means

that it didn't need to restart the app, which means it keeps the current state, if we change any

data in there, it wouldn't restart and override that,

instead it keeps the app as it was and just injects our new code into it, which is some magic managed

by Flutter during development and therefore if we go back, now this looks way better. Instead of that

ugly hello which was red with a black default, with a black background,

we now have our nicer page look here with an appBar, with a little drop shadow, with a blue background,

with our title that automatically has a color that contrasts against the background

and then here we have

this is my default text which we output in the body,

so in the main area of this page. And this is how we build Flutter apps, how we work with these widget

trees and how we can also structure our app here in code and that is what I meant when I mentioned in

the first section that with Flutter and Dart, we build mobile apps by building the user interface in

code. We're not using a drag and drop editor here,

instead we're writing some code which defines what should end up on the screen.

And now we have these basic set,

let's take the next step towards our first, a little bit more realistic course application.