Original subtitles

In the last section, we finished up our custom widget of app, we're going to come back to this file

in just a little bit and do a better review of exactly what we accomplished in here, complete with

a couple of diagrams to give you a better idea of exactly what's going on here.

But right now, I just want to get our application working.

I'm not going to flip back over to my main dart file.

So inside of this file, we want to import that new app widget that we just created and then pass that

app widget off to the run app function, which the recall takes a widget and shows it on the screen

of our mobile device.

So in order to get access to that custom app widget we just created, we have to add an import statement

to the main dart file.

We've already spoken about import statements when we are importing files from an outside package, but

this time around we are importing a file that is defined inside of our own local project.

To do so, we're going to write out a slightly different import statement than what than the one we

did before.

Let's first start off by taking a look at a quick diagram to give you a better idea of how we're going

to write this import.

OK, so this right here is the complete story around imports, this covers the three different types

of import statements that we're going to write inside of our flutter applications.

It covers the case in which we are importing code from the standard library in which we are importing

a file in our live directory to another file inside of our directory.

So essentially importing a file that you and I wrote ourselves and then importing something into our

live directory from a package that has been installed into our project.

So let's first start with the one down here, because this is the one that we just took care of.

So, again, if we want to import something in to our Leyb folder or into a file in our live folder

from anything outside that live folder.

So an example, this would be some outside package.

Then we would write import the word package, a colon, the package name and then the name of the file

that we want from that package.

So, again, this is the one that we've already done.

Now, let's go up to the very top, because this is another very easy import statement, if we want

to import anything from the standard library and we just try to import the word dart, a colon, and

then the name of the module from the standard library that we want to import into our current file,

we're going to have to write one of these import these import statements very shortly.

So we'll come back to these in just a moment.

So what we're going to do right now falls into this second case.

We are trying to import something from our live directory or in other words, a file in our live directory

that you and I wrote into another file inside our live directory that you and I wrote to do.

So all we write out is the word import.

The path to that file, like the relative path to that file and then the name of the file that we are

importing and so forth is import statements, right here are examples of how we would import a sibling

file.

Now that starts to get a little bit complicated.

So let's just flip back over to our code editor and I'll show you how we do this import statement for

our particular case right now.

OK, so back over here, we are in a file inside of our live directory, the main file, and we want

to import another file inside of our live directory.

Yes, it's nested inside of SIRC, but ultimately the file is inside the Lib directory.

So we're going to write out import.

Then the path or the relative path to the fire that we're trying to impart.

So I want to look into the SIRC directory and find the app dot dart file like so and that's it.

So we're inside the main theater directory.

We're going to go into Sarsae and find the dirt file.

OK, so that's pretty much it, that's the second case right here, and we're going to see an example

of this first case up here in just a moment.

So we'll come back to this diagram at that point.

All right, so now back over here.

The last thing we have to do now that we are importing our custom app widget, we're going to make sure

that our run app function right here attempts to show an instance of our app widget.

So I'm going to remove this VA app because we don't really need to define our app ahead of time.

And then into run app, I will pass app with a set of princes like so so again, this takes our app

class, creates a new instance out of it, and then we pass that instance off to run app.

All right, so let's save this file.

I'll go back over to my terminal.

I'm going to do a full reload with Schifter, and then I'm just going to expect to see the exact same

content up here on the screen.

At this point, there should be no changes except for the fact I think my button should probably go

back to a plus down here because we just reverted that back to the icon ad and there we go.

So there's my ad icon and my oops, my ad just successfully restarted.

So this looks pretty good.

We have now created our own custom widget to find inside of a separate file.

We then import it back to the main dirt file and successfully showed it on the screen.

So the steps we just went through was just a little confusing, so let's take a quick pause.

We're going to come back to the next section and we're just going to look at a diagram or two that's

going to model out the current state of our application.

So I'll see you in just a second.