Become a member
to unlock all features

Save 40% this week only!

Access all courses & lessons on egghead today and lock-in your price for life.


    Load an Image in a Flutter App with the Image Class

    nader dabitnader dabit

    In this lesson we’ll learn how to render both local & network images in a Flutter application using the Image class.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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.