Load an Image in a Flutter App with the Image Class

Instructor: [00:00] There are two main ways to work with images in a Flutter project, loading the asset image locally and loading a network image. In this video, we'll take a look at how to do both. We'll start off with a pretty basic Flutter project, and work within a container.

[00:17] Here, we'll give the container a child of image.network to load a network image. The first argument to image.network should be a string referencing the URL of the image you'd like to load. Next, we'll pass in some additional configuration to specify a width and a height for the image.

[00:38] Now, when we save and refresh, we see the image load in our application. To work with local asset images, we have to do two things. First, we need to make sure the image is available in our asset path. Second, we need to specify the image in our pubspec.yaml. The image I'll be using is in lib/natur.jpg.

[00:57] In the pubspec.yaml under the Flutter attribute, we can also specify an assets attribute. Here, we can list all of the assets we'd like to have available in our application. I'll specify the location of the image, which is natur.jpg.

[01:26] Now, we can update our image to be image.asset, and specify the location of the image we'd like to load.