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

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

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

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

without needing an internet connection.
4

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

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

and we're going to create a new directory.
7

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

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

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

.png
11

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

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

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

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

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

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

assets to your application.
18

We have to create an asset section like this.
19

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

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

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

we're going to add images/
23

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

And this tells our Flutter project about this particular asset.
25

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

in our Flutter project.
27

Now you'll notice that inside this pubspec.yaml
28

the comments don't start with two forward slashes.
29

And in fact you tried that,
30

it doesn't actually work.
31

That's not treated as a comment.
32

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

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

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

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

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

It relies really heavily on indentations.
38

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

the gutter right in the left.
40

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

they don't have any spaces
42

next to the left.
43

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

in another section. Like this.
45

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

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

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

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

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

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

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

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

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

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

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

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

is two spaces.
58

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

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

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

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

your Flutter project,
63

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

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

screen.
66

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

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

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

these files into our project, ready for use.
70

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

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

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

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

use a different type of image.
75

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

are defined in our configuration file.
77

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

here.
79

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

going to be images/diamond.png
81

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

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

it to the configuration pubspec.yaml file.
84

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

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

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

of our app.
88

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

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

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

of spaces?
92

That's quite painful right.
93

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

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

everything that's inside that folder into my project.
96

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

changed.
98

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

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

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

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

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

So makes you life a little bit easier.
104

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

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

Flutter, unless we update the app icon.
107

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