Original subtitles

With that, it's time to really dive into the code and for that, let's look into the only Dart file we have

at the moment in our lib folder.

It's the main.dart file and since this is the only Dart file we have right now

and since I mentioned that this is the folder in which we will write our entire application in the end,

this has to be the file that is responsible for giving us the output we're seeing here,

so for giving us this application and indeed, that's the case. This single file holds all the code that

renders this application onto the screen

and how does it do that

because overall, this is a pretty lean file,

it doesn't have that much code.

All these green lines here with the double slashes at the beginning are just comments,

so this is not even code that does something, it's just there for you to explain what happens thereafter.

So in the end,

this is a really lean file,

what is

this file doing here?

We will rewrite this file to create an application from scratch

but before we do that, I want to briefly walk you through it so that you get an understanding, a basic

understanding of how such a Flutter application works and what Flutter does for you. Flutter as you already

learned or as I already mentioned is both a toolset and a framework, a programming framework for the

Dart language and in the end, a Flutter app is an application where you, the developer, build a UI by adding

widgets. Widgets are components, the building blocks of your user interface, like this button here in

the bottom right corner,

that would be a widget,

the text here, that would be a widget,

the appBar here at the top and that title in there, that would be widgets

and that's what you can see in the code here.

Even if we don't understand all that code, if we scroll down a little bit here to this build method in

that MyHomePageState thing which is totally unclear for now but if we scroll down there, we

can identify things like appBar or things like text and another text or things like a floating action

button

and even if you don't really understand Dart and Flutter, it probably makes sense that this floating

action button is kind of related to that floating button we have here in the bottom right corner and

the two text pieces we have here,

text and text, where we see you have pushed a button this many times, that seems to be responsible for

giving us this text here in the middle

and indeed, that is how it is works.

These are widgets which we didn't create ourselves but which are built into Flutter, which ship with

the Flutter framework, which we can use to put some text onto the screen or to add a button

to the screen

and of course we got way more widgets than these two different kinds of widgets.

We got widgets for different kinds of buttons, for dropdowns, for images, for lists which we can scroll,

for so many things and that is how Flutter works.

You work with these built-in widgets and you build your user interface based on them and you can configure

all these widgets to change their colors

or for example here, to change the text size and you can also build your own widgets which take these

built-in widgets and group them together to build a brand new custom widget which you can then put

somewhere.

For example you could be combining this smaller and this bigger text and then have your my custom output

widget which always prints or draws this smaller and bigger text on the screen

if you would need this combination in other places of your app too. And we'll dive into all of that throughout

the course and I will explain Dart and how Flutter works and how you create such widgets whilst we are

diving into that,

no worries. Here in this starting code, we can already see that here we seem to be doing something with

a widget,

so maybe this is code that does create a custom widget and indeed we're doing that here

but again, I think it makes more sense and it's easier to understand this if we do that step-by-step

and for that, let's actually select the entire code in the main.dart file and delete it.

Now why am I doing that?

Because I want to create a complete app with you from scratch.

I could just give you the instructions on

okay

now add this, add this,

now let's do that

and you would have a working application but you would learn nothing about how it works

and it's super important to understand how it works and why you write which code not only to learn Dart

but also to learn how Flutter works

and that is what you need to build your own Flutter apps because otherwise, you can only build exactly

the same app

I show you but I want you to be able to build any app and for that, you need to learn it from scratch.

Let's remove all that code in main.dart, let's save the file, it now automatically rebuilds the app and

syncs it back and therefore this now crashes because we're not starting anything here and we get an

error here at the bottom and that is all right,

we will now write our own code here.