Contents

Fade in images with a placeholder

Contents

When displaying images using the default Image widget, you might notice they simply pop onto the screen as they're loaded. This might feel visually jarring to your users.

Instead, wouldn't it be nice to display a placeholder at first, and images would fade in as they're loaded? Use the FadeInImage widget for exactly this purpose.

FadeInImage works with images of any type: in-memory, local assets, or images from the internet.

In this example, use the transparent_image package for a simple transparent placeholder.

dart
FadeInImage
.
memoryNetwork
(

  placeholder: kTransparentImage,

  image: 
'https://picsum.photos/250?image=9'
,

),

dart
import
 'package:flutter/material.dart'
;

import
 'package:transparent_image/transparent_image.dart'
;


void
 main
() {

  runApp
(
const
 MyApp
());

}


class
 MyApp
 extends
 StatelessWidget
 {

  const
 MyApp
({
super
.key});


  @override

  Widget
 build
(
BuildContext
 context) {

    const
 title = 
'Fade in images'
;


    return
 MaterialApp
(

      title: title,

      home: 
Scaffold
(

        appBar: 
AppBar
(

          title: 
const
 Text
(title),

        ),

        body: 
Stack
(

          children: <
Widget
>[

            const
 Center
(child: 
CircularProgressIndicator
()),

            Center
(

              child: 
FadeInImage
.
memoryNetwork
(

                placeholder: kTransparentImage,

                image: 
'https://picsum.photos/250?image=9'
,

              ),

            ),

          ],

        ),

      ),

    );

  }

}

Fading In Image Demo

You can also consider using local assets for placeholders. First, add the asset to the project's pubspec.yaml file (for more details, see Adding assets and images ):

 flutter:

   assets:

+    - assets/loading.gif

Then, use the FadeInImage.assetNetwork() constructor:

dart
FadeInImage
.
assetNetwork
(

  placeholder: 
'assets/loading.gif'
,

  image: 
'https://picsum.photos/250?image=9'
,

),

dart
import
 'package:flutter/material.dart'
;


void
 main
() {

  runApp
(
const
 MyApp
());

}


class
 MyApp
 extends
 StatelessWidget
 {

  const
 MyApp
({
super
.key});


  @override

  Widget
 build
(
BuildContext
 context) {

    const
 title = 
'Fade in images'
;


    return
 MaterialApp
(

      title: title,

      home: 
Scaffold
(

        appBar: 
AppBar
(

          title: 
const
 Text
(title),

        ),

        body: 
Center
(

          child: 
FadeInImage
.
assetNetwork
(

            placeholder: 
'assets/loading.gif'
,

            image: 
'https://picsum.photos/250?image=9'
,

          ),

        ),

      ),

    );

  }

}

Asset fade-in

Fade in images with a placeholder

In-Memory

Complete example

From asset bundle

Complete example