Proper project organization will help you keep track of your assets and files. After watching this video, you'll have a few organizational tips and tricks to help you with the housekeeping in your Flutter project.
- [Instructor] 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 thing's 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 going to 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 will 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. But you have to create an asset section, like this. So, let's go ahead and uncomment this by holding down command, and forward slash. And, we now have an asset section. Now, inside our asset section, we're going to add our image. Instead of a dot 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 able 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 try that, it doesn't actually work, that's not treated as a comment. And, this is because, this is a special type of file, its 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 and up to the margin, or the gutter, right on 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, what 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 you're 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 CommandS or Ctrl + S, and 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 able 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 keen eyed amongst you, you might realize a slight problem. What if you had, say, 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 forward slash, to say that I want to incorporate everything that's inside that folder into my project. And if you go ahead and run packages yet 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're adding everything inside the images folder, as an asset, that we are 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 subfolder, 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 it makes your life a little bit easier. Now there's 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.
This course was created by London App Brewery. We are pleased to host this content in our library.