Adding Assets

[00:00:00]
>> Now that we have that little code ready, actually, we're not going to use grid anymore, we can keep it there. It's not going to be part of our app, we're going to start start building our coffee masters application. So if you're following along the companion website, we will start with chapter three, creating the offers section.

[00:00:25]
First, we will need some assets, mostly images that we are going to use now. They are not so many, probably three images only, okay, that we need. These are actually part of the assets that you can download from this website. So, how assets work in Flutter. Where should I put my assets?

[00:00:49]
So if I go back to Xcode, [INAUDIBLE] sorry, if I go back to Visual Studio code, I don't have like an assets folder or an image folder. Well, actually, I can create one. You can create folders here without any problem, not in the live, in the root, right?

[00:01:13]
So be careful with that. Live is for our data files only, so such as images. But how does the Flutter framework know that we have added that folder and we are expecting Flutter to include the assets in that folder for our users? We need to set up that in the YAML configuration file pubspec.yaml, okay?

[00:01:40]
So if you go to pubspec.yaml, we need to scroll a little bit and there is a place here that says, to add assets to your application, add an asset section like this. And it's give you an example here that you can comment if you want. It's not a big deal, you can just, it's assets column and then a new line with several declarations with a dash.

[00:02:12]
You can add images one by one or the whole folder and you are saying here, hey, when you compile the app, I want to put all the files that I have here in the images folder in whatever container you're using. It can be the Android application, the AUS application, the executable Windows or it can be the output folder for the web.

[00:02:33]
Okay, makes sense? So, now what I need when you save the pubspec.yaml, it will run a tool that checks if there are changes in dependencies and blah blah blah, but in this case, nothing has changed actually. So, now that I have the images folder, I have declare my images in the assets, I need to put the images, okay?

[00:02:57]
So, if you go to the zip folder, that I share with you, I have here this, there is a folder there with the name assets. So what we need is to put all these files in the images folder that we have just created. But before doing that, I wanna explain to you what are those folders that we have there.

[00:03:24]
So, this is going to be our logo, so let me show you the logo, you can see it, so that's the logo. So, the thing is that today on the mobile space and also on desktop, but mainly on the mobile space, we have devices with different resolutions, okay?

[00:03:38]
So it's pretty common to have a low resolution ,middle resolution ,high resolution device. So, that means that we cannot use the same PNG. I mean, if you're a web designer or web developer, you know the same problem exists there, that's why you have SR set, so SR set for example, or the picture element.

[00:03:59]
So you need to provide several bitmaps. Flutter lets you define several versions of the same file for different resolutions if you're using these folders, 2.0x, 3.0x, 4.0x and then files with the same name. Actually what you will do on different platforms, we'll use different techniques. It will pick the right one for the particular device based on the device resolution, so actually the 4.0x file is bigger, In pixels, okay?

[00:04:36]
So we have more resolution for high resolution Android devices. Okay, make sense? So when you are creating assets for Flutter, you need to use PNG most of the time and you need to provide all these versions. If you don't provide one version, it will pick the closest one to the one that is needed.

[00:04:56]
Okay, make sense? So after saying that, then I'm going to take all these assets and then I'm going to arrange them, put them within images, okay? Like so. So, now we can actually use what we have here. So, you should open a images and you should see something like this, okay?

[00:05:19]
Make sense? Yeah.
>> That background and black coffee PNG is not gonna be used at all if you have the 2x, 3x ,4x already there?
>> Lemme see if I get it, so the black coffee is not in the 4x ,3x and 2x, right? That is what you mean?

[00:05:37]
So the background, we have the same file with the same name on different folders. It's the same file but in different resolutions. For the black coffee, I didn't create different resolutions, we will take just the same one because it's just a dummy image that we will use in a minute ,it's that one.

[00:05:54]
And because we don't want to actually make different versions, that's not worth the time, so that what I want to emphasize with that is that you actually don't need to have all the files in the subfolders. On each situation you will check, do you have alternative versions are not?

[00:06:13]
And if you have them it will use it, if not it will just use the only version that you have. Okay?
>> And what are the sizes of them because I see, I look there I can't know?
>> The size, it's your size, so there are no standard sizes.

[00:06:31]
So it's up to you. It's up to the design that you're making. The only thing is that, the one that says 2x multiplies by two does the original size by three by four. Okay, make sense?
>> Is there a resolution that maps to the 2x?
>> Unfortunately, that's a good question, so typically, designer tools prepare for doing this for iOS native development.

[00:07:00]
They have the same problem but they solve this in a different way and they have tools to export Android PNGs that are also similar but different. So the main graphic solutions out there that are Adobe Photoshop or Illustrator or XD, experience designer or sketch. All these tools for doing mobile app design they don't have a Flutter export system.

[00:07:29]
There are a couple of online tools that you can use, I mean, you upload the asset and it will return you a zip file with all these subfolders, but not from the from the region and tools, okay, unfortunately. They prepare for native development but not for Flutter, for some reason, but you can do a plugin, I guess.

[00:07:47]
>> So we just make the 2x 3x and 4x folders and then make the files, how do we know which device is gonna use which one or do we not? You don't need to care actually, so I can tell you because it depends on the device. So actually, for example, on the iPhone side you have here, you have today, devices on 2x, devices on 3x, for example the Pro and the pro Max will actually take the 3x.

[00:08:11]
The iPhone, the iPhone 13, the mini, the SE will take you the 2x. iPhone will never take 4 this as of today, as of shooting this video, so we don't have the issues with 4x resolution. On the Android side, it depends on the device. The cheaper the device, the lower the resolution.

[00:08:31]
So Galaxy s22 will use 4 and so on, but actually, you don't need to care too much about that, so this is managed by platform. Because in terms of pixels on your screen, they are the same. You are just changing the resolution, so how many pixels do you have within your pixel?

[00:08:55]
The same happens on the web today, by the way, if you're doing a website, unless you're using SVG, if you want a high resolution logo, you need to provide several versions of your PNG file or JPEG files. We do that with SRC set in the IMG tag, for example, okay?

[00:09:15]
Cool. Well, now that we have those images, we are ready to start creating our app or at least to make it look like our app, okay? So first, if we go to up, I'm still on main.dart, so for a while we are keeping ourselves in in mind.dark. So, if I scroll a little bit, we have my app that has a title and also my homepage has a title, so we need to start changing this.

[00:09:45]
So instead of Flutter demo, we're going to use coffee masters. The title of the material app is actually being used in the operating system. So when you see for example, all the open windows in the operating system, IOS, Android or desktop, that's the title that you will see.

[00:10:02]
And the title that you see here it's actually going to be used for the visible screen, okay, does it make sense? What is this title actually? My homepage does not exist in the Flutter framework, it's just in a class that was created here and it has a property final, so it's an immutable variable, okay?

[00:10:28]
It's a final string title, it's an immutable variable and it's receiving that title as a name argument. Actually, I'm going to delete it because this is part of the template, but I don't think I need it, so I'm going to delete it from here. I'm going to delete the reference in the constructor and also the property, okay?

[00:10:52]
So now I'm getting an error here at some point because it's okay, we don't have a title. Well anyway, because here what they want is actually to put the image, okay, the logo. I wanna see the logo instead of a text. How to render an image. Well, it's not a text, so I don't need the text with it, I will use an image with it.

[00:11:15]
The image with it has actually a constructor with a lot of possibilities, but it also has name constructor, remember name constructor? I select dot and then they can create an image, from an asset, from a file, from memory or from network. I remember someone asked if we are forced to use the from prefix, it's not being used here.

[00:11:40]
So I can create an image widget from an asset and I just need to put. The path suggests emushes/logo.png. Okay? If I save this, let's see, let's rearrange my Windows a little bit. Like so, I have Chrome here somewhere, the other Chrome, that one, it says unable to load assets, so we are seeing an error there, okay?

[00:12:11]
So what's going on? Every time you change assets, so anytime you change things that are not actually part of the lib folder, you need to make a full reload. So you need to like stop and run again, because it's not taking the changes on those external folders. So if I'm changing the asset, okay, it's not going to take it, okay?

[00:12:32]
Doesn't make sense and by the way, I'm here. If you follow here at the bottom, at some point you have, I think it's in the previous example, you have how to add the image anyway. So, now I'm going to run this again. Wait for it, remember when you see one Chrome instance, that's your browsing navigation context and not actually the one that we are waiting for, it takes some seconds.

[00:13:07]
Okay, there we are. It's slowing, I'm going to open the inspector has to turn on the device mode so I can see a smaller window so it fits there on the screen. So, you can see that my logo is there, so it's working. Maybe it's not the right background color.

[00:13:26]
So, how to change the background color. By default is that blue, that has to do with a material, material theme. Material design, we are using that design and it has something known as primary swatch. These currently on blue. So of course maybe you're thinking, well, we can add any color here.

[00:13:48]
Yeah, we could add any color but material design wants us to use one of the colors from the system, okay? I mean we can create our own swatch of colors but I wanna show you that it's actually pretty pretty good. If I go here to the companion website, I think I will move to the next lesson.

[00:14:13]
I think it's here. Here you how how to create an image. You have two links here, the material color website and the material palette. The first one is official and the other one is from the community. This is all the colors that are actually provided with the material design or the swatches and they are optimized for better contrast automatically, so we don't need to deal with contrast.

[00:14:41]
But for example, when we put one of those in the background for the foreground it picks one that actually works. So when you said blue it's not just one blue or the blue, it's actually going to use one of these subversions automatically. So, yeah and here you can pick one of those and see how your app will look like with that one, okay?

[00:15:03]
And because we are talking about coffee, we're going to use brown as our main color swatch, okay? So that's the one on won, I just gonna come here and change color blue with color brown and now it looks better. Again, do you wanna create your own color swatches, you can, okay?

[00:15:25]
But, the advantage of using material design is that it was already prepared by professional designers and they, unless you really have your own colors from your own company, it's a good idea to stay with safe colors.
>> Can you repeat that again about how that automatically chooses to color?

[00:15:47]
You said something about automatic.
>> So, if you look here, I'm not saying primary color, I'm saying primary swatch. So what is that? Every color has a swatch. Swatch means, it has that same brown color in different shades. That it's actually what we see here, it's the same color in different shades.

[00:16:08]
Now when we define the swatch, the material theme, the material designer will actually pick the right color on each place. So, here we have examples on how it will look like. So if you see here, it's using one brown at the top and the header, another kinda brown here, another here.

[00:16:28]
So, based on the widget that you're using and the behavior of that widget, it will use different swatches automatically. Okay? So you then you select the swatch and then the framework will do its work for you, so it will look like this, okay? So you don't need to go element by element and setting the color.