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
I want you to click and drag image diamond.png 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.
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. And we’re going to click on this link here where it says ‘Pab 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 ‘Pab 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.