Install the Flutter SDK & Create Your First Project

Flutter Project Walkthrough

Run a Flutter App on iOS

Run a Flutter App on Android

Walkthrough of the Default Flutter Application Boilerplate

Style a Flutter Text and Container Widget

Using Themes in Flutter to Share Colors and Font Styles

Load an Image in a Flutter App with the Image Class

Building Layouts in Flutter with Layout Widgets

Creating, Importing & Using Dynamic Widgets from Other Files in a Flutter Application

Creating & Updating State in a Flutter Application

Getting Started with Navigation in Flutter

Building Dynamic Lists in Flutter with ListViews

Navigation with Named Routes in Flutter

Getting Started with Flutter

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.

Load an Image in a Flutter App with the Image Class

Share this video with your friends

Course

Getting Started with Flutter