Fade in images with a placeholder

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.

To use a single-pixel, transparent PNG as the placeholder image, complete the following steps:

1. Create the transparent image data.

   Import dart:convert and dart:typed_data, then decode the image from a Base64-encoded string:

   dart

   import 'dart:convert';
   import 'dart:typed_data';
   final Uint8List transparentImage = base64Decode(
     'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4'
     'nGMAAQAABQABDQottAAAAABJRU5ErkJggg==',
   );
   

   content_copy

2. Use the image data as a placeholder.

   Pass the decoded image data to the placeholder parameter:

   dart

   FadeInImage.memoryNetwork(
     placeholder: transparentImage,
     image: 'https://picsum.photos/250?image=9',
   ),
   

   content_copy

import 'dart:convert';
import 'dart:typed_data';
​
import 'package:flutter/material.dart';
​
final Uint8List transparentImage = base64Decode(
  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4'
  'nGMAAQAABQABDQottAAAAABJRU5ErkJggg==',
);
​
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: transparentImage,
                image: 'https://picsum.photos/250?image=9',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

To use a local image asset as the placeholder image, complete the following steps:

1. Add the placeholder to the asset bundle.

   Add a placeholder image to the project's assets directory, such as assets/loading.gif. Then, declare the asset in the project's pubspec.yaml file. For more details, see Adding assets and images.

   yaml

   flutter:
     assets:
       - assets/loading.gif
   

   content_copy

2. Use the asset as a placeholder.

   Pass the asset path to the placeholder parameter of the FadeInImage.assetNetwork constructor:

   dart

   FadeInImage.assetNetwork(
     placeholder: 'assets/loading.gif',
     image: 'https://picsum.photos/250?image=9',
   ),
   

   content_copy

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',
          ),
        ),
      ),
    );
  }
}