5 Quick Steps to Add Image in Flutter [2022 Code]

“A picture is worth a thousand words”. Isn’t it true? Pictures/Images help us understand complex things in an easy manner. In fact, the Internet would be a boring place without images. Every app/product that we use is incomplete without images. You might have started working on your new project or your new project might be completely based on images. So in this tutorial, we’ll learn how to add image in Flutter app.

Here’s what we’ll cover:

• Steps to Add Image in Flutter (Local Image)
• Adding/Showing Image from the Internet
• Caching Images
• Preloading Images

Steps to Add Image in Flutter (Local Image)

To add image in Flutter app, first of all, create an assets/images folder then add the actual images inside the folder. After this, Add the image path in pubspec.yamland then display it using the Image.asset() widget.

Here are the step by step instructions to add image in Flutter:

Step 1: At the root of your project, create a new folder called assets.

Step 2: Inside the root folder, create another folder called images. You can give any name to this folder such as pictures, graphics, etc.

Step 3: Add your images inside the assets/images folder.

Step 4: Provide the image path in pubspec.yamlfile as below.

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets: <-- SEE HERE
    - assets/images/lion.png

IMP Note: For all the images that you use in the app, a path must be provided here. To provide the path of multiple images at once, add all your images inside the assets/images folder and give it a path in the pubspec.yaml file as below.

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets: 
    - assets/images/ <-- SEE HERE

Step 5: Display image using the Image.asset() widget.

Column(
  children: [
    Image.asset('assets/images/lion.png'), // <-- SEE HERE
  ],
)

Output:

Adding/Showing Image from the Internet

To add or show images from the internet:

Step 1: Add the Image.network() to your page.

Step 2: Inside the Image.network(), write the URL for the online image.

Step 3: Restart your app.

Code Example:

Column(
  children: [
    Image.network( // <-- SEE HERE
      'https://picsum.photos/id/1074/400/400',
    ),
  ],
)

Output:

Caching Images

Sometimes, it’s convenient to save the images when they’re downloaded from the internet. This helps you show the images even in offline mode.

To cache images:

Step 1: Add the cached_network_image package.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  cached_network_image: ^3.2.0 <-- SEE HERE

Step 2: Display the image using CachedNetworkImage widget.

CachedNetworkImage(
  placeholder: (context, url) => const CircularProgressIndicator(),
  imageUrl: 'https://picsum.photos/id/1074/400/400',
)

Step 3: Restart the app.

Note: Setting the placeholder widget allows you to show the alternate visual while the image loads.

Preloading Images

To reduce the loading time of high-res images, your can also preload images as soon as the app starts.

To preload images:

Step 1: Create a class called AppImages.

class AppImages {
 static const String imagesPath = “assets/images/”;
 static const String lion = imagesPath + “lion.png”;
}

Step 2: Get the Image reference.

Image myImage;
@override
void initState() {
 super.initState();
 myImage = Image.asset(AppImages.lion); <-- SEE HERE
}

Step 3: Prefetch image using a function called precacheImage().

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  precacheImage(myImage.image, context); // <-- SEE HERE
}

Step 4: Display images as usual.

Column(
  children: [
    Image.asset('assets/images/lion.png'), // <-- SEE HERE
  ],
)

Step 5: Restart the app.

Note: You should find the loading time difference in the release mode only.

Conclusion

In this tutorial, we learned how to add image in Flutter app with practical examples. We also explored how to add/show an image from the internet and cache them so that the image is available in offline mode. We also learned how to preload images to reduce the initial image load time.

Would you like to check other interesting Flutter tutorials?