Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

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

Autoplay

    Load an Image in a Flutter App with the Image Class

    nader dabitnader dabit
    flutterFlutter
    dartDart
    androidAndroid
    iosiOS

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

    Code

    Code

    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
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

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