Flutter Images

 

In this section, we are going to see how we can display images in Flutter. When you create an app in Flutter, it includes both code and assets (resources). An asset is a file, which is bundled and deployed with the app and is accessible at runtime. The asset can include static data, configuration files, icons, and images. The Flutter supports many image formats, such as JPEG, WebP, PNG, GIF, animated WebP/GIF, BMP, and WBMP.

Displaying images is the fundamental concept of most of the mobile apps. Flutter has an Image widget that allows displaying different types of images in the mobile application.

How to display the image in Flutter

To display an image in Flutter, do the following steps:

Step 1: First, we need to create a new folder inside the root of the Flutter project and named it assets. We can also give it any other name if you want.

Step 2: Next, inside this folder, add one image manually.

Step 3: Update the pubspec.yaml file. Suppose the image name is tablet.png, then pubspec.yaml file is:

1. assets:  
2.     - assets/tablet.png  
3.     - assets/background.png  

If the assets folder contains more than one image, we can include it by specifying the directory name with the slash (/) character at the end.

1. flutter:  
2.   assets:  
3.     - assets/  

Step 4: Finally, open themain.dart file and insert the following code.

1. import 'package:flutter/material.dart';  
2.   
3. void main() => runApp(MyApp());  
4.   
5. class MyApp extends StatelessWidget {  
6.   @override  
7.   Widget build(BuildContext context) {  
8.     return MaterialApp(  
9.       home: Scaffold(  
10.         appBar: AppBar(  
11.             title: Text('Flutter Image Demo'),  
12.         ),  
13.         body: Center(  
14.           child: Column(  
15.             children: <Widget>[  
16.               Image.asset('assets/tablet.png'),  
17.               Text(  
18.                   'A tablet is a wireless touch screen computer that is smaller than a notebook but larger than a smartphone.',  
19.                   style: TextStyle(fontSize: 20.0),  
20.               )  
21.             ],  
22.           ),  
23.         ),  
24.       ),  
25.     );  
26.   }  
27. }  

Step 5: Now, run the app. You will get something like the screen below.

Display images from the internet

Displaying images from the internet or network is very simple. Flutter provides a built-in method Image.network to work with images from a URL. The Image.network method also allows you to use some optional properties, such as height, width, color, fit, and many more. We can use the following syntax to display an image from the internet.

1. Image.network(  
2.   'https://picsum.photos/250?image=9',  
3. )  

The Imag.Network gives one useful thing that supports animated gifs. We can use the following syntax for displaying gifs from the internet.

1. Image.network(  
2.   'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',  
3. );  

Let us understand how to display an image from the network with the following example:

1. import 'package:flutter/material.dart';  
2.   
3. void main() => runApp(MyApp());  
4.   
5. class MyApp extends StatelessWidget {  
6.   @override  
7.   Widget build(BuildContext context) {  
8.     return MaterialApp(  
9.       home: Scaffold(  
10.         appBar: AppBar(  
11.             title: Text('Flutter Image Demo'),  
12.         ),  
13.         body: Center(  
14.           child: Column(  
15.             children: <Widget>[  
16.               Image.network(  
17.                   'https://static.javatpoint.com/tutorial/flutter/images/flutter-creating-android-platform-specific-code3.png',  
18.                   height: 400,  
19.                   width: 250  
20.               ),  
21.               Text(  
22.                   'It is an image displays from the given url.',  
23.                   style: TextStyle(fontSize: 20.0),  
24.               )  
25.             ],  
26.           ),  
27.         ),  
28.       ),  
29.     );  
30.   }  
31. }  

Output

When you run the app in Android Emulator, the following screen appears. Here, you can see the image of the given url.

Display Fade-In Images

When we display an image, it simply pops onto the screen as they are loaded. It does not assume useful between the users. To overcome this issue, the Image uses a FadeInImage widget that shows a placeholder image while the target image is loading, then fades in the new image when it loads. The FadeInImage can work with various types of images, such as local assets, in-memory, or images from the internet.

From asset bundle

Flutter also allows us to use local assets for placeholders. To use local assets, you need to add the asset in your project pubspec.yaml file.

1. flutter:  
2.    assets:  
3.     - assets/loading.gif  

Let us see the following example, which helps you to understand it more clearly. Open the main.dart file and insert the following code.

1. import 'package:flutter/material.dart';  
2.   
3. void main() => runApp(MyApp());  
4.   
5. class MyApp extends StatelessWidget {  
6.   @override  
7.   Widget build(BuildContext context) {  
8.     return MaterialApp(  
9.       home: Scaffold(  
10.         appBar: AppBar(  
11.           title: Text('Flutter FadeInImage Demo'),  
12.         ),  
13.         body: Center(  
14.           child: Column(  
15.             children: <Widget>[  
16.               FadeInImage.assetNetwork(  
17.                 placeholder: 'assets/tablet.png',  
18.                 image: 'https://static.javatpoint.com/tutorial/flutter/images/flutter-creating-android-platform-specific-code3.png',  
19.                   height: 400,  
20.                   width: 250  
21.               ),  
22.               Text(  
23.                 'It is an image displays from the given url.',  
24.                 style: TextStyle(fontSize: 20.0),  
25.               )  
26.             ],  
27.           ),  
28.         ),  
29.       ),  
30.     );  
31.   }  
32. }  

Output

Now, run the app, it will give the laptop image (placeholder) before the image displayed from given url.

 

In-Memory

Let us understand it with the following example where FadeInImage works with In-Memory. Here, you must have to use a transparent_image package for transparent placeholder and update the dependencies of pubspec.yaml file as below:

1. transparent_image: ^1.0.0  

Now, open the main.dart file and insert the following code. When you run the app, it will give a transparent image as a placeholder.

1. import 'package:flutter/material.dart';  
2. import 'package:transparent_image/transparent_image.dart';  
3.   
4. void main() => runApp(MyApp());  
5.   
6. class MyApp extends StatelessWidget {  
7.   @override  
8.   Widget build(BuildContext context) {  
9.     return MaterialApp(  
10.       home: Scaffold(  
11.         appBar: AppBar(  
12.           title: Text('Flutter FadeInImage Demo'),  
13.         ),  
14.         body: Center(  
15.           child: Column(  
16.             children: <Widget>[  
17.               FadeInImage.memoryNetwork(  
18.                 placeholder: kTransparentImage,  
19.                 image: 'https://static.javatpoint.com/tutorial/flutter/images/flutter-creating-android-platform-specific-code3.png',  
20.                 height: 400,  
21.                 width: 250  
22.               ),  
23.               Text(  
24.                 'It is an image displays from the given url.',  
25.                 style: TextStyle(fontSize: 20.0),  
26.               )  
27.             ],  
28.           ),  
29.         ),  
30.       ),  
31.     );  
32.   }  
33. }