In this lesson we’ll learn how to render both local & network images in a Flutter application using 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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!