image_fade

Description:

image fade

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.

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),
),
)
copied to clipboard
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.