All language subtitles for 10. Building an App From Scratch

So back in our main.dart file, we have that main function. As you know, this is a function, it returns nothing,

takes no arguments

and right now, we also have nothing in the function body.

Now as you learned, main is a function which automatically is executed when the app starts by Flutter

and Dart because it's in the main.dart file which you therefore also shouldn't rename.

Now in here, we need to add some code that actually brings something onto the screen.

For that, it's important to understand that on the screen, we basically see a bunch of widgets. Flutter

is about widgets,

it's so important to understand this. Every Flutter app you're building is just a bunch of widgets and

widgets are the UI building blocks you see on the screen, things like the app bar, maybe some image,

maybe a list with list items

and as you can see here for example, widgets also often contain other widgets, like that list which has

list items.

So you compose your Flutter app as that tree of widgets which I already mentioned before, which has a

root widget which is your entire app

and in there, you have your other widgets which yet might hold other widgets thereafter, even your entire

page,

so the entire thing that holds all the widgets on your page on your screen is a widget in Flutter. So

since everything in Flutter is a widget

and since the entire app is a widget, we probably need to create such an app widget which then has other

widgets to see something on the screen

and that's 100% correct. Now to create such a widget, we need to create a class because a widget

is a special type of object

so to say and you learned that you need classes to create objects.

So let's add a class here and you can give it any name you want and I will name it MyApp,

following that naming convention which is called pascal case, where you have a capital starting character

and then every word inside the word also starts with a capital starting character, no blanks in between,

no underscores, no dashes, your classes should be named like this. The concrete name if this is MyApp,

MyCoolApp or something else is totally up to you. Now this would be a class but as you probably can

imagine, a widget that really can be seen on the screen is not that trivial to create because in the

end, the pixels on the screen do need to be controlled.

Now thankfully, we don't have to write that logic on our own, Flutter does all of that behind the

scenes and therefore, our class here now uses a feature called inheritance.

That means that it builds up on a base class, gets all the features of that base class and only adds

new features to it.

We do inherit by adding the extends keyword here after the class name before the curly braces and that inform

Dart that this class will be based on some other class

and you can only extend one class at a time. Now the class I do want to extend here is not a class we

will write but a class provided by Flutter.

Now of course in our whole project here, we only have one Dart file in the lib folder and that's our

own Dart file

but please remember that we have that pubspec file where we define which dependencies our application

has or our Dart project has

and here we have one dependency and that's Flutter, the Flutter framework.

Now the files of that framework are not stored here in that project,

instead they're stored somewhere else on your machine, typically in your user folder somewhere but you

can import from these files because the connection is established with the help of this entry in the

pubspec.yaml file.

So now in the main.dart file, we can inform Dart that we want to reach out to some other file,

in this case from the Flutter framework, that gives us the class which we would want to extend here.

We do that by adding the import keyword,

this tells Dart Hey I want some functionality which is not in this file but which is in some other

file. Now you can point at your own files there too and we'll do that later

but you can also point at third-party packages which are part of your project.

You do this by adding package: and then the name of the package, which in this case is Flutter and

then a lot of packages have a lot of files that make up this package. So you can add a slash here and

then point at a concrete file,

in this case this would be material.dart.

That's one of the files the Flutter framework exposes to you,

it has a lot of built-in widgets following the material theming and later, you will also learn how to

make your apps look good on iOS but material themes also work on iOS and besides these prestyled

material looking widgets, the material.dart file also has a base class which allows you to create your

own widgets and that's the stateless widget class.

So we extend stateless widget here and this now turns our class into a class which can be used as a

widget by Flutter.

However, now we've got a new error here that it's missing a correct implementation of

StatelessWidget.build.

Now what does this mean? Now

.build signals that this seems to be some property, so a variable, which is part of that class or maybe

it's a function that's part of the class.

We haven't had a look at this before but besides variables, you can also have functions inside classes.

Now variables inside of classes would be called properties, functions inside of classes are called

methods.

So we have to add a special method here,

now how do I know that it's a method and not a property?

It's just something you have to memorize,

one of the very few things you have to memorize.

So here, this is a method which is missing,

so let's add build here since it's a method and therefore effectively a function, we can add parentheses

here and we have to add them in curly braces to mark the body of that function.

Now functions can take arguments and if we hover over this to read the error here, we actually see that

it isn't a valid override, whatever that means, of the build method and indeed, it should take a build

context as an argument.

So let's add an argument here,

you can name it ctx or context, whatever you want,

it's a special type of object, a special object which will be passed into the build method automatically

because you will never call that method, Flutter will call it whenver it needs to draw something onto

the screen and context is an object into which I'll dive deeper later, in the end it holds some meta information

about our app and about this widget we're building

but for now let's just add it and let's also add a type annotation. The type is build context which is

the end class that is also defined material.dart which is why we can use it here.

So build context is a special object type provided by Flutter in the material.dart file and this context

object is of that type and we get it automatically by Flutter. Now build is also a function or a method

which returns something, it needs to return a widget because you work with the widgets in Flutter, your

entire app as a widget,

we're trying to build an app here,

the build function is what Dart and Flutter will call in the end when they try to draw something onto

the screen

and therefore, the build method here needs to return a widget.

Now just like build context, widget is in the end a class and every class automatically then also is

a type, which is provided by material.dart.

Now we need to return such a widget here inside of MyApp and there, there is a special widget which

we should return

and that's the MaterialApp widget, also provided by material.dart,

that's a widget provided by the Flutter team which does some base setup to turn your combination of

widgets into a real app that can be rendered,

it does a lot of heavy lifting behind the scenes you could say. MaterialApp also takes a couple

of arguments, as you can see it's a pretty long list and all these arguments are so-called named arguments.

Now thus far, we only saw something which are positional arguments, which means the build method takes

an argument, context, because it takes one argument we accept it like this by giving it a name in

the end and the first and only argument which will be passed into build when Flutter calls the build

method will be passed into context or will be available as context. In our example here, we had two positional

arguments in addNumbers, num1 and num2 and what we passed in as a first argument here when we call the

function would end up in num1, what we passed in as the second argument here would end up in num2. Now

MaterialApp uses so-called named arguments which means we don't pass in data in order here

but because that has a lot of possible arguments we can set, which are all optional in the end,

we target an argument by its name and there for the moment we only need the

home argument. Home is basically the core widget which Flutter will bring onto the screen

when this entire app is mounted to the screen and here we could use a text widget which is yet another

widget built into Flutter and you will work a lot with these built-in widgets because thankfully, you

rarely have to reinvent the wheel and all the core UI building blocks you need in modern apps already

exist.

Text takes a string, you learned about that data type which you can create with single or double quotes

as an input

and here we could print Hello.

So now we have that MaterialApp widget which is provided by material.dart with that named argument,

which in case it's not entirely clear is something we'll also use throughout this course and we'll also

create our own functions that take named arguments so that this becomes clearer

and then here, we also have hello which we passed to text. Now as a side note if you're wondering whether

MaterialApp is a function or a class, it is a class

and yet we can pass data to it with a feature called a constructor but that's also something I'll come

back to later.

For now, let's just accept that this is some code which will create something which can be treated as

an app because MaterialApp does a lot of heavy lifting behind the scenes and which should also output

some code.

Now we just need to wire up that main function with this class here.