How to add images to your Flutter application
A simple walkthrough of the different methods and how to properly implement them
--
Images are fundamental to every app. They can provide crucial information by serving as visual aids or simply improve the aesthetic of your app. There are many ways to add an image to your Flutter application. This article will provide a comprehensive guide to the different methods along with detailed examples and sample code.
Image.asset:
Though it requires some setup, this is the most convenient way to add a photo. To begin, create an assets folder. This folder should contain any external media that you wish to add, such as images, videos, gifs, or JSON files. If your app will feature multiple types of assets, it is recommended that you create separate subfolders for each. The assets folder should be located in the same directory as the pubsec.yaml file in your project.
Once the image has been added to the assets folder, the pubsec.yaml file needs to be edited to incorporate the image. Any external resource or package in your program must similarly be included in the pubsec.yaml file.
Now that the necessary setup has been completed, the image can be added to the code:
Image.asset(‘assets/tree.jpg’)If you decided to use subfolders to split your assets:
Image.asset(‘assets/images/tree.jpg’)Here is code for a simple app that uses Image.asset to display an image:
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Image Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Image Demo'),
),
body: new Container(
color: Colors.grey[200],
child: new Image.asset('assets/tree.jpg'),
alignment: Alignment.center,
),
),
);
}
}
Image.network
To display an image that is found on the internet rather than one stored locally, you must use Image.network. After checking the desired image’s license and copyright, simply copy its image address. Whether you are testing your app on an emulator or a physical device, ensure that it has a connection to the internet, or it will throw an error.
With the image address, the image can be added to the code:
Image.network('https://images.pexels.com/photos/1525043/pexels-photo-1525043.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',)Here is code for a simple app that uses Image.network to display an image:
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Image Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Image Demo'),
),
body: new Container(
color: Colors.grey[200],
child: new Image.network(
'https://images.pexels.com/photos/1525043/pexels-photo-1525043.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
),
alignment: Alignment.center,
),
),
);
}
}
Note: This method also works with gifs. Simply replace the image address with the address of the gif.
Image.file
To load images from the file system in the target device, you must use Image.file. However, you must first ensure that the app has the proper permissions to access the device’s external storage. Open and edit your project’s AndroidManifest.xml file to request these permissions:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package= "flutter.image.demo">
<uses-permission android:name =
"android.permission.READ_EXTERNAL_STORAGE"/>
<application
...
</application>
</manifest>Find the image you wish to add and view its details to determine the image’s file path.
With the file path, the image can be added into the program code:
Image.file(new File('/storage/emulated/0/Download/forest.jpg'))Here is code for a simple app that uses Image.file to display an image:
Note that you must also import the ‘dart:io’ library to use the File class.
import 'package:flutter/material.dart';
import 'dart:io';void main() => runApp(MyApp());class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Image Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Image Demo'),
),
body: new Container(
color: Colors.grey[200],
child: Image.file(
new File('/storage/emulated/0/Download/forest.jpg')),
alignment: Alignment.center,
),
),
);
}
}
Image.memory
To load an image from memory, you must use Image.memory. This method requires encoding and decoding an image into base 64 format. You can find a good website for encoding and decoding here. Keep in mind that the base 64 representation for images can get lengthy, especially with larger images. For practical purposes and to avoid making this article obnoxiously long, I have put ‘replace-with-base-64-representation’ in place of the image’s actual base 64 representation. However, you can view the file containing the string for the sample image here and download the file here.
To start, take the image you wish to add and encode it into base 64. Decode this message using the base64 class and put it inside the Image.memory constructor:
Image.memory(base64.decode('replace-with-base-64-representation'))Here is code for a simple app that uses Image.memory to display an image:
Note the extra packages you must import.
import 'dart:convert';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Image Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Image Demo'),
),
body: new Container(
color: Colors.grey[200],
child: Image.memory(
base64.decode('replace-with-base-64-representation')
),
alignment: Alignment.center,
),
),
);
}
}
Final Look
Loading times (least to greatest) for the user generally follow this order:
Image.memory → Image.asset → Image.file → Image.network
However, speed isn’t always everything. Each method comes with its own set of advantages and disadvantages:
Image.asset requires adding your images to an assets folder before adding it to your program. The photos are then included in the app’s installation package, increasing its size. Though it can be convenient, this method may not be ideal for developers looking to create a light app.
Image.network is used to display images from the web. Though this can reduce the size of the file’s package, the user experiences a longer loading time. This method may be ideal for developers who prioritize reducing app size for slower loading seed.
Image.file is used to access and display images that are stored locally on the target device. However, this access results in slower loading times for the user. In addition, many uses of Image.file are preceded by an Image picker method, leading to even slower leading times.
Image.memory can require encoding and decoding between base 64 and several lines of disruptive code, but it also yields the fastest loading time.
I hope you were able to find this article helpful in teaching you the different ways to add an image to your Flutter application, along with each method’s unique advantages and disadvantages.
All the code used in this article (and other articles) can be found in my GitHub repo.
If you found this article helpful, consider tapping the 👏 button and giving a few claps! Follow me for more Flutter articles and leave any feedback or comments below!
