All language subtitles for 13. First Summary & Additional Syntaxf

So we got our first lines of code that lead to this application which obviously is not the kind

of application we would ship to an app store. Yet

before we dive deeper into building a bit more beautiful of an application, let me briefly sum up what

we learned thus far and yes, it's a repetition but it's so important and crucial that you understand

how this works and what we did.

So we have this main.dart file with the main function and this main function is automatically executed

when our app launches,

that is important. In there, we call run app which is a function provided by the Flutter team in the material.dart

package which we are importing up here.

We can import the Flutter package and there, the material file because we have the connection in the

pubspec.yaml file. Later in the course, we will also add other third-party packages to add even more features which

we don't have to build ourselves.

So with that, we call runApp and runApp is a function which does all the heavy lifting behind the scenes

to take a widget we created and draw it onto the screen, to be precise, what it in the end does is it

calls the build method in our widget because and that's an important rule now,

every widget in Flutter needs to extend stateless widget or stateful widget into which I'll dive later,

so it needs to extend one of these two base widget classes and each of these classes will force you to

add a build method because in the end, Flutter will always call that build method for you,

so you don't call it, Flutter calls it when it is prompted to draw something onto the screen.

runApp prompts Flutter or tells Flutter to draw something onto the screen and therefore Flutter will

do a lot of stuff but also call the build method of the widget you pass to runApp.

The build method is always responsible for returning a new widget which should be drawn onto the screen

and therefore at some point of time, you have to end up with returning one of the base widgets

Flutter ships with because these then will have the nitty-gritty details for really controlling the pixels

so to say. Of course they do a bit more than that but in a nutshell, that is how you can think about that.

So widgets need to return widgets and therefore at some point of time, you will end up returning these

base widgets and in the end, you will build your entire user interface with these base widgets because

there are base widgets for everything you could possibly want to build and you will learn how to work

with them and how to find the right widget for which job, you will learn all of that throughout the course.

Now the build method turns this context argument. Now since Flutter called build for you, it's Flutter's

job to provide the value for context, so you don't have to worry about that, you only have to accept

it here

since you are writing that build method in this place here. Context as I mentioned will be an object of

type build context, so using the build context blueprint which is also provided by Flutter, which holds

some metadata about this widget, its position in the widget tree and your overall application so to say.

This is what's happening here. Now in the MyApp widget build method here, we have the MaterialApp

which I'm returning which in turn is a widget but now it's a widget provided by the Flutter team.

This uses a named argument, home and as a value for this named argument, I pass yet another widget, the

text widget which is also provided by the Flutter package and this uses a so-called positional argument.

So both text and hello are arguments, text is an argument to MaterialApp for the home argument and hello

is an argument to the text widget.

Now both these widgets, MaterialApp and text, are in the end Dart classes, every widget is just a Dart

class which in the end has a build method,

that's something you can remember.

This is what's happening here,

it's also worth pointing out that by adding parentheses after your class name, like we're doing it here,

we're instantiating that class so we're creating a concrete object of that class, here of the MyApp

widget, we're creating an object of that and we're passing that to runApp which then passes it on to Flutter

so to say and that is what in the end brings this here onto the screen.

Now with all of that, we only touched on some of the core fundamentals of the Dart language of course,

there is more than named arguments, variables methods and so on but we will learn all of that step-by-step

and not upfront in front of the course,

instead let's rather dive a bit deeper now and make sure that we see something more beautiful on the

screen.

However before we do that, there's one important annotation which I want to add to this build method

and that is @Override.

Now technically, that's not required,

our app worked without that.

This is a so-called decorator and it's a decorator, which you probably guessed it, is also provided

by Dart and Flutter, so override is actually provided by Dart, not by Flutter but there are other decorators

like that @required thing which I showed you earlier which would be provided by Flutter.

Now what does this decorator thing do though,

it worked without it?

Yes, it works without it,

it's just there to make our code a bit clearer and a bit cleaner.

This makes it really clear that we are deliberately overriding the build method which is provided by

stateless widget,

it exists there but we override it with our own implementation and actually stateless widget forces

us to override it,

we don't have the option of not overriding it, nonetheless,

this is basically a common practice and a good practice.

If you provide a method, which also existed in a class you're extending, then you should add @Override

to make it clear that you are not accidentally overwriting this already existing method but deliberately

because when you add your build method here and stateless widget also had one, then the one of stateless

widget will not be considered for my app but your own one will and that is absolutely something

you have to do here.

It's not an error, you want to do that, you just want to be clear that this was done deliberately. So it's

a tiny, stylistic thing, still something which we'll see throughout the course and which I therefore want to

mention here. And there's one other thing you will see,

for example when you create a new Flutter app. Instead of the main function looking like this, you also

can see something that looks like this,

you have void main, then you have your parentheses, so that's the same as we have it up here but then

instead of curly braces, you have an equals sign and a greater sign,

so an arrow kind of

and then you have runApp MyApp.

So what we had between the curly braces now comes after this arrow without curly braces and that is

valid Dart syntax too,

it's a shorthand for functions which only have one and exactly one expression, so only one line of code

in the function,

then you can omit the curly braces and instead add such an arrow here, which tells Dart this is a

function with only one expression

and this here is the expression,

please execute,

there is nothing else

and the result of this expression here will then also automatically be returned.

Now here, runApp doesn't return anything and therefore our overall function does not return anything

but if runApp would return a value,

then this would automatically be returned by our function here as well.

You can use that for any function with one expression where you then want to execute that expression.

So this is just an alternative syntax to that and it's just something I want to get out of the way here

so that it's clear what this does

if you see that.

But with that, let's now make sure we have a bit of a more beautiful app on the screen.