All language subtitles for 002 Boilerplate App Code_en

In the last section, we started talking about the next application we're going to be working on.

I'm now back at my terminal, still inside of my kind of workspace directory.

I'm going to change into the login stateful that we just created, login stateful folder excuse me,

that we just created.

And then I will start at my code editor inside there, I'll then flip back over to my terminal and I'm

going to execute the command that will get our application running on our emulator as well.

So inside of my log stateful directory, I will run, flutter, run.

OK, so it's going to start up new application we just generated and install it onto the emulator.

We'll let that kind of run for just a little bit while that's going.

I'll flip back over to my code editor and we'll get started on our project.

Now we have all these different files and folders that were automatically generated for us again, but

as usual, all the code that you and I are going to write is can be placed inside this Leyb directory

inside there.

We have that main file that was automatically generated for us now as have as was the case in the last

project.

I don't really like using all this default code that we get for free.

So I'm going to select everything inside of here and delete it and we'll just start 100 percent from

scratch.

Now, at the top of this file, I'll first begin by importing that material thought dirt file from the

flutter library, so I'll do import package flutter material like so.

From this material dirt file, we get access to that run app function.

Remember, the run out function is how we get some initial widget to appear on the screen of our device.

So inside of here, I'll define my main function and then I will call run app.

And of course, we need to pass in some widget right here to be rendered on the screen.

When we first started off our last project, we wrote a lot of widget code first directly into this

main file, but we eventually came to realize that, yeah, we should probably separate out all those

widgets into different files inside of our live directory.

So I'm going to immediately create a new file that's going to house a new widget that's going to serve

kind of as the root widget of our application to do so in my live directory.

I'll make a new folder called Sarsae.

And then inside there, I'll make a new file called App Darte.

Great, it's now inside of Abu Dhabi is where you and I are going to create our kind of default widget

or the first widget that will be rendered on the screen.

At the top will first again import our package of flutter.

Material that darte.

I'll create a new class that I'm going to call app, and that's going to extend the stateless widget.

Then we'll define the one method that we are required to define inside of here, which is the build

method, and this is where we're going to return some other widgets that will be displayed on the screen.

The build method is always called with that context argument, which again, I know said it many times,

but we're going to talk about what that's for here pretty soon.

And then inside of here, I'm going to create a new material app.

I'll give it a title of something like Log me in.

And I'll give it a home.

That is a scaffold widget.

And inside there, I'll put some text or some body, I'll give it some text of show a form here like

so.

OK, so now we got something to at least show up on the screen, let's flip back over to our main dirt

file.

We will import this and then make sure that we pass it off to the run app function.

So back inside of me and start at the top.

I will import SIRC Abdah Dirt and it will pass that thing off to the runout function like so.

OK, so we just went through all that pretty quickly, but it's all the very similar stuff to what we

did in our last application, we've now got a main file.

We've got an important file.

The app creates a material app when we create a material app that gives us a couple of very default

elements that we would expect to have in any mobile application, such as navigation.

And we say our scene right here that we want the default component to show up on the screen to be a

scaffold that has a body of some amount of text.

So if I now go back over to my terminal.

I should be able to hit shift are to do a full restart at the application.

Wait for our reload and it's kind of hidden up there, but you can definitely see that it says show

form here.

So good place to get started.

Let's come back in the next section and we'll talk about the login form that we're going to be working

on.