All language subtitles for 027 Working with Assets in Flutter & the Pubspec file.en_US

Now in the last lesson, we've already created the main structure of our app.

But in this lesson, I want to show you how you can work with image assets that you load into your app,

so you don't have to fetch it from the Internet and you'll be able to use it anywhere inside your app

without needing an internet connection.

So first things first, we're going to click on the project folder so you can see our project here is

called 'I Am Rich' and it's the root of all of our other folders. And we're going to right click on that,

and we're going to create a new directory.

We're going to call this directory, images. Inside this folder is where we're gonna put all of the images

that we're going to use to work with our app.

And if you look inside this current lesson you should be able to see a downloadable file called diamond

.png

And once you've downloaded that image, I want you to click and drag that image into that images folder

that we created just now. And it'll have a little red line around the folder so that you know that it's

going into the right one. And then we're going to go ahead and click OK to move that file into there.

So now that we've incorporated that image into our project, it's time to tell Flutter that the image

exists. And to do that, we're going to go into the configuration file, which is our pubspec.yaml

file. And if you scroll down, you'll see that it even tells you in a comment, that this is how you add

assets to your application.

We have to create an asset section like this.

So let's go ahead and uncomment this by holding down COMMAND + /.

And we now have a assets section. Now inside our assets section,

we're going to add our image. Instead of a.burr.jpeg

we're going to add images/

So that refers to our images folder, and then /diamond. png

And this tells our Flutter project about this particular asset.

And once it knows about it, we'll be have to use it inside our main.dart or any other code files that's

in our Flutter project.

Now you'll notice that inside this pubspec.yaml

the comments don't start with two forward slashes.

And in fact you tried that,

it doesn't actually work.

That's not treated as a comment.

And this is because this is a special type of file.

It's a YAML file, and YAML stands for YAML Ain't Markup Language.

It's meant to be this very human readable type of language that machines can also understand, to interpret

how you want to configure certain things, such as our Flutter project.

Now that's all very well and good but there's just one problem.

It relies really heavily on indentations.

So for example every section inside this configuration file is right next to an up to the margin or

the gutter right in the left.

You can see that the name of our project or the description for our project,

they don't have any spaces

next to the left.

And if they did, they wouldn't be treated as a new section. They would be treated as a child embedded

in another section. Like this.

So if you have two spaces next to something, then this is treated as a child inside this thing.

So that means we have to be really careful when we're writing code in our pubspec.yaml because

as it is, this doesn't work. So well we can do to make our lives just a little bit easier is to actually

delete all of these comments that came in the configuration file. And a lot of these comments are useful

because the Flutter team is trying to tell us what we can do with the configurations here, but it also

clutters up the page and makes it really hard to see at a glance, what's actually going on.

And so if we take a look now, you can see that we've got several top level properties such as the name

of the project, description or version. And then we've got other things which are children of these top

level items. Over here, we've got a couple of settings for our Flutter app.

One is that it uses material design and the other are the assets that it wants to use.

Now you can see that this asset is kind of out of sync with the indentation. It's currently indented by

one, two, three spaces, and that doesn't actually mean anything in YAML because each indentation level,

is two spaces.

So if we hit backspace and move it back just by one, so that it's now indented by two spaces, from the

top level Flutter key, then this is now pretty much valid YAML code.

And this tells our configuration file that our assets are children of our Flutter project.

So here's a top tip. When you're working with the pubspec.yaml file, your configuration file for

your Flutter project,

be really careful about the indentation. And remember that every indent is two spaces.

So when your coding along with me, make sure that you have the same indentation levels as you see on

screen.

Otherwise you might get into trouble that you don't really need.

Now that we've set up our configuration file to tell our project that we want to use assets, and our

assets live in a folder called images, and the file is called diamond.png then we're ready to incorporate

these files into our project, ready for use.

So we're going to hit save with COMMAND + S or CONTROL + S. Aand we're going to click on this link here

where it says 'Packages get' and that will incorporate the images that's inside our project ready for

use within our main.dart or any of our other project files.

So now, we can head back to our main.dart file, and instead of using a network image, we're going to

use a different type of image.

We're going to use an asset image. And as you can imagine, an asset image comes from our assets, which

are defined in our configuration file.

So we're now able to provide the name of the asset which is going to be exactly what we specified in

here.

So now let's head back into our main.dart file and we can specify the name of our image. And it's

going to be images/diamond.png

And that is all we need to do to be to use the image that we've incorporated under the images folder

with the name of diamond.png and it will know what images/diamond.png is, because we added

it to the configuration pubspec.yaml file.

So now all we have to do is run our app and test it.

So let's click the play button, and you can see our app now has our image asset that comes from our images

folder namely the diamond.png image incorporated into our image placeholder in the center of the body

of our app.

Now for the cute minds amongst you, you might realize a slight problem.

What if you had a 20 or 30 or 40 images inside your images folder?

Are you really going to write them out line by line making sure that you've indented the correct number

of spaces?

That's quite painful right.

What you can also do, is instead of specifying the precise file name, you can also just specify the folder

where all of your image files are located, and then add a '/' to say that I want to incorporate

everything that's inside that folder into my project.

And if you go ahead and run 'Packages get' again, and you run your app then absolutely nothing should have

changed.

Everything should have been exactly the same because we're saying now we are adding everything inside

the images folder as an asset that we're going to use inside our app. So as long as your images go into

the folder that's called images, and not inside say a sub folder or you know, a folder of a folder.

As long as they're inside the images folder, then you will be able to use it like so.

And that also means you won't have to touch these indents after the first time you make them.

So makes you life a little bit easier.

Now this just one last thing that we need to fix which is when we take a look at our app icon. It still

has the Flutter default app icon. And this will get placed for every single app that you create with

Flutter, unless we update the app icon.

So to learn how to do that and more, I will see you on the next lesson.