All language subtitles for 33. Adding Images to the App

Custom fonts are great,

what about custom images?

Let's say if we have no transactions, I want to show some image that indicates that we have no content,

that we're waiting for new content. For that,

first of all let's make sure that we can have no content by going to the main.dart file and there,

let's remove or comment out these two default transactions.

Now with that if we reload this, we'll have a pretty empty space over here, so there's nothing there and

there, I want to show an image now.

For that, we first of all need an image.

Now you can also add images that are stored somewhere in the web but of course you can also include

local images

and here I want to use a local image. For that in our assets folder, next to the fonts folder,

I'll add an images folder.

The name is up to you, just as it was with the fonts folder, you just should have some strategy or idea

for storing images

and I'll copy an image into that folder.

Here is a file, you find it attached to this lecture, waiting.png,

it's a couple of Zs over here.

So we have that image

and now I want to include that image here instead of my list of transactions,

so instead of this widget if we have no transactions. I'll actually write the logic for that inside

of the transaction list

so that our main widget tree here doesn't get too huge, too large. So in transaction list here,

I only want to render this ListView builder widget with all its list items if we have no transactions,

otherwise I want to render some text where I say no transactions added yet

and that image. Since we have a either or decision here, we in the end need a ternary expression. So let's

add one, we receive our transactions here

so I want to check if transactions is empty,

in that case here, I want to render my text and that image, otherwise after the colon, the list of transactions.

So here I need a column because I want to have the text and above and below the text, I want to have

the image. So let's add first of all the text and there, I'll say no transactions added yet, with

lowercase t and that can be a title

so why don't we give it a style of theme of context.textTheme.title which is what you learned

about in the last lectures and below that,

let's add an image and for this, we can use the image widget

and there we have a couple of constructors for the different sources

the image could be coming from. There is asset, if it's provided as an asset in our project, file would

be good for images that are in files that you obtained in a different way

but by streaming in some image, something like this. Network is great

if you have a URL for the image,

so if it's not stored as part of your project but it's a web image

but here of course it's part of our project

so we need asset. And then you need the path to the image here

and that's assets/images/waiting.png.

Now just like fonts, adding an image here isn't enough,

you also need to include it in your pubspec.yaml file. There,

you should already have a section that shows you how to add it. You add an assets key and then a path to

all the assets, the none font assets you want to use in your app.

In this case, that's assets/images

and by the way, it's important that you have assets here just because this key is named like this does

not mean that it goes into your assets folder automatically,

it's a pure coincidence that this folder is named assets and this key is named assets.

So here you need to add the full path which is assets/images/waiting.png. Typical image

formats like jpg, png and and gif are supported. So with that, we added the image and now just as before, you

need to quit that and then fully restart your application after you added this new file here.

So now this file will be included in your bundle

and thanks to image assets here in the transaction list widget, it should also be displayed,

so the image should also be displayed then.

So let's wait for this build process to finish

and here we are.

So we see the image but as it seems, it's too big. We get this warning that some content is overflowing

its boundaries and that's the case here because our transaction list actually only gets a container

with height 300 and that image simply is bigger than that.

Of course we could provide a smaller image but maybe on bigger screens, on bigger devices, we want a bigger

image

because maybe at some point in the future, we calculate this height dynamically.

We're not doing this right now but we'll later learn about tools that allow us to do that.

So it would be great if we could squeeze the image into that container and tell Flutter that it should

size the image appropriately and you can do that. On the image here,

you can add a fit key and set that to a BoxFit value. BoxFit is an enum and gives you a couple of options

and cover is a great option that respects the boundaries of the surrounding container and fits the image

into there.

The problem with that just is that we have no boundaries here.

We have the container

but the direct parent of the image is not the container but the column

and you learned that columns take as much height as they can get.

So the image is not able to infer the size into which I should squeeze the image from the column,

it would need access to the container but that's outside of the column.

Solution is simple,

we can wrap our image here into another widget, for example into a container

and now that image is wrapped in there, we can give this container a height of let's say 200 and once

we do that, now the image fits in there because now BoxFit here is able to take the height of its direct

parent and squeeze the image in there and this gives us this look.

Now what I would like to have is some spacing between our title here and the image and there is

another widget which makes this super simple. Below the text, above our image container here,

you can add a sized box.

We haven't seen that widget before,

sized box does what the name suggests,

it allows us to add a box with a specific size. You can add a child in here, so you can add content

in here and actually we could replace this container here with a sized box because all we do is assign

a height

and that's exactly something you can do in sized boxes too,

you can set widths and heights.

The cool thing is you can also not define a child here and therefore sized boxes are also a common

way of using them as separators, as to provide some spacing between elements because this will be an

empty box which we don't see on the screen but which still occupies its space, it still occupies 10 pixels

of vertical space here and therefore now we have some spacing, a little bit more spacing between the

image and the title and

of course you can ramp up that spacing to increase that distance.

So this is good

now we have that waiting picture

and as soon as we do add a transaction here like new shoes,

that actually disappears and we see our transactions then, as it should be the case.

So now we also saw how we can add our own images.