Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
image_fade cover
Package detailsv0.6.2

image_fade

A widget that displays a placeholder and optional progress indicator while an image loads, then cross-fades to the loaded image. Improves on FadeInImage. Compatible with CachedNetworkImageProvider.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
8K
Likes
87
Pub points
150

Install package

flutter pub add image_fade

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

ImageFade is a Flutter widget that enhances image loading experiences by displaying a placeholder and optional progress indicator until the image is fully loaded. It then smoothly cross-fades into the final image, providing a polished visual transition. Built as an improvement over FadeInImage, it supports CachedNetworkImageProvider and works across all major platforms including Android, iOS, Web, macOS, Windows, and Linux. Ideal for applications where visual feedback during image loading is crucial.

Use cases

  • Loading images with visual feedback
  • Enhancing UI transitions during image rendering
  • Displaying placeholders during network image loading
  • Improving perceived performance in image-heavy apps
  • Using with cached network images
  • Creating smooth image fade effects

Key features

  • Cross-fade animation on image load
  • Support for placeholder widgets
  • Optional progress indicator
  • Compatibility with CachedNetworkImageProvider
  • Smooth transitions across platforms
  • Lightweight and easy to integrate

Suitable for

  • Apps with frequent image loading
  • Developers seeking better image loading UX
  • Projects using CachedNetworkImage
  • UI-focused Flutter applications
  • Teams prioritizing visual polish

Considerations

  • Requires additional setup for progress indicator
  • May need custom styling for placeholders
  • Not ideal for static or non-dynamic images
  • Depends on external image caching solutions
  • Limited customization beyond basic fade behavior

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

ImageFade

A widget for Flutter that displays a placeholder widget while a specified image loads, then cross-fades to the loaded image. Also handles progress and errors. It uses Image.opacity when appropriate for improved performance.

If image is changed, it will cross-fade to the new image once it is finished loading. Setting image to null will cross-fade back to the placeholder.

example image

You can set duration and curve, as well as most Image properties: width, height, fit, alignment, repeat, matchTextDirection, excludeFromSemantics and semanticLabel.

Use loadingBuilder and errorBuilder to display load progress or error states. Optionally specify syncDuration to use a different (usually faster) duration for fading in a synchronously loaded image, error, or placeholder.

ImageFade(
  // whenever the image changes, it will be loaded, and then faded in: 
  image: NetworkImage(url),

  // slow fade for newly loaded images:
  duration: const Duration(milliseconds: 900),

  // if the image is loaded synchronously (ex. from memory), fade in faster:
  syncDuration: const Duration(milliseconds: 150),

  // supports most properties of Image:
  alignment: Alignment.center,
  fit: BoxFit.cover,
  
  // shown behind everything:
  placeholder: Container(
    color: const Color(0xFFCFCDCA),
    alignment: Alignment.center,
    child: const Icon(Icons.photo, color: Colors.white30, size: 128.0),
  ),
  
  // shows progress while loading an image:
  loadingBuilder: (context, progress, chunkEvent) =>
    Center(child: CircularProgressIndicator(value: progress)),

  // displayed when an error occurs:
  errorBuilder: (context, error) => Container(
    color: const Color(0xFF6F6D6A),
    alignment: Alignment.center,
    child: const Icon(Icons.warning, color: Colors.black26, size: 128.0),
  ),
)

Image Caching

ImageFade is compatible with CachedNetworkImageProvider.

Installing

The published version of this package is availble on pub.dev.

Example

See the example directory for a simple example.

Categories

Image

Source repository

Projects using this package