All language subtitles for 006 Creating Widgets_en

In the last section, we added an important statement to our main dirt file and we had a brief discussion

of what it's doing for us.

We're not going to continue on to step two where we define our main function.

So inside of here, I'm going to write out our main function, absolutely identical to how we wrote

it out previously back over in Dart Pad.

So I'm going to write out Void Main, a set of parentheses, and then my curly braces like so.

Now, remember, this means that the name of the function is main and the void word right here means

that we are returning nothing from this function.

Now, steps three and four are going to be done inside of our main function, so I'm going to take both

those comments and I'm going to paste them inside the main function like so.

OK, it looks better.

OK, so now inside of our main function, we're going to move directly on to step number three, so

we need to create a text widget in order to show some text on the screen.

To do this, I'm going to first write out a new variable that I will call simply app.

And then inci or assigning to this, I'm going to create a brand new instance of a widget and I'm going

to assign it to that variable, so I'm going to say material app is the name of the widget that I'm

trying to create and then I'm going to pass it exactly one named parameter.

So I'm going to write out a named parameter of home.

And I'm going to assign to that name parameter a text widget.

And to the text widget, I'm going to pass in the text that I ultimately want to show on the screen

of my mobile device.

So for me, I'm just going to say hi there like so.

OK, so before we talk too much about what a material gap is or what text is or what this home thing

is right here, there's one quick thing I want to tell you about.

And this is something that is going to just haunt your days for as long as your building flutter applications.

So if you have a code that looks identical to mine right here, I want you to save the file.

Now, when you say the file, you might see something like that happen.

You might see your code automatically collapse.

So when we are working on flutter projects, if you're using visual studio code.

Visual Studio Code is going to try to reformat your code every single time you save the file.

Sometimes it's going to collapse your code to what you see right here.

It's going to collapse it to be in as few lines as possible.

But very often when we're building flutter applications, we want everything to be indented or we want

to have a little bit of vertical structure so that we can more easily read our code.

However, if you just save the file, it's always going to collapse itself.

So in order to keep our code in this more vertical fashion, which is much easier to read, we're going

to put a comma at the end of that line, the comma right here, make sure that this line does not collapse.

So if I now save the file, it does not collapse anymore.

Now, this might seem like a very small distinction right now, but over time, we're going to end up

with some very heavily nested function calls.

And you're going to want to make sure that those stay on separate lines so that it maintains its legibility.

So in practice, I'm going to be adding on commas to the end of many lines of code that we put together.

And I'll do my best to point them out just to make sure that you get a better idea of how they work.

OK, so now a little bit more onto what's going on with the code, with these three lines of code right

here, we are creating an instance of a dart class or what we call a widget that creates a material

app widget.

A material app widget is kind of like a very core level widget of our application.

When we create a material app, it automatically sets up a lot of functionality inside of our application

for us, such as the ability to navigate between different screens inside of our application.

So it is somewhat common to see the one of the very core or widgets of your application be a material

app because it sets up a lot of very default functionality that many different apps need out of the

box.

When we create the material app, we pass in a named parameter of home, the name parameter of home

is used as the default route or the default widget to show on the screen when the application first

starts up.

So home right here, you can think of as many, like home screen or home widget is the first thing that's

going to show up when our application first puts up.

Then to the home parameter, we are assigning a text widget, a text, which it does exactly what you

might think it does, it gets some text to show up on the screen, and that's pretty much it.

OK, so that's this line of code right here, let's again take a very quick pause.

We're going to come back to the next section and we're going to take that widget we just created and

assigned to this variable right here.

And we're going to get it to show up on the screen of our mobile device.

So a quick break and I'll see you in just a minute.