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 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 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 t
han 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/fl
utter-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/fl
utter-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. }
