FadeInImage class

An image that shows a placeholder image while the target image is loading, then fades in the new image when it loads.

Use this class to display long-loading images, such as NetworkImage.new, so that the image appears on screen with a graceful animation rather than abruptly popping onto the screen.

If the image emits an ImageInfo synchronously, such as when the image has been loaded and cached, the image is displayed immediately, and the placeholder is never displayed.

The fadeOutDuration and fadeOutCurve properties control the fade-out animation of the placeholder.

The fadeInDuration and fadeInCurve properties control the fade-in animation of the target image.

Prefer a placeholder that's already cached so that it is displayed immediately. This prevents it from popping onto the screen.

When image changes, it is resolved to a new ImageStream. If the new ImageStream.key is different, this widget subscribes to the new stream and replaces the displayed image with images emitted by the new stream.

When placeholder changes and the image has not yet emitted an ImageInfo, then placeholder is resolved to a new ImageStream. If the new ImageStream.key is different, this widget subscribes to the new stream and replaces the displayed image to images emitted by the new stream.

When either placeholder or image changes, this widget continues showing the previously loaded image (if any) until the new image provider provides a different image. This is known as "gapless playback" (see also Image.gaplessPlayback).

link 
FadeInImage(
  // here `bytes` is a Uint8List containing the bytes for the in-memory image
  placeholder: MemoryImage(bytes),
  image: const NetworkImage('https://backend.example.com/image.png'),
)

Inheritance

Constructors

FadeInImage({Key? key, required ImageProvider<Object> placeholder, ImageErrorWidgetBuilder? placeholderErrorBuilder, required ImageProvider<Object> image, ImageErrorWidgetBuilder? imageErrorBuilder, bool excludeFromSemantics = false, String? imageSemanticLabel, Duration fadeOutDuration = const Duration(milliseconds: 300), Curve fadeOutCurve = Curves.easeOut, Duration fadeInDuration = const Duration(milliseconds: 700), Curve fadeInCurve = Curves.easeIn, Color? color, BlendMode? colorBlendMode, Color? placeholderColor, BlendMode? placeholderColorBlendMode, double? width, double? height, BoxFit? fit, BoxFit? placeholderFit, FilterQuality filterQuality = FilterQuality.low, FilterQuality? placeholderFilterQuality, AlignmentGeometry alignment = Alignment.center, ImageRepeat repeat = ImageRepeat.noRepeat, bool matchTextDirection = false})
Creates a widget that displays a placeholder while an image is loading, then fades-out the placeholder and fades-in the image.
const
FadeInImage.assetNetwork({Key? key, required String placeholder, ImageErrorWidgetBuilder? placeholderErrorBuilder, required String image, ImageErrorWidgetBuilder? imageErrorBuilder, AssetBundle? bundle, double? placeholderScale, double imageScale = 1.0, bool excludeFromSemantics = false, String? imageSemanticLabel, Duration fadeOutDuration = const Duration(milliseconds: 300), Curve fadeOutCurve = Curves.easeOut, Duration fadeInDuration = const Duration(milliseconds: 700), Curve fadeInCurve = Curves.easeIn, double? width, double? height, BoxFit? fit, Color? color, BlendMode? colorBlendMode, Color? placeholderColor, BlendMode? placeholderColorBlendMode, BoxFit? placeholderFit, FilterQuality filterQuality = FilterQuality.low, FilterQuality? placeholderFilterQuality, AlignmentGeometry alignment = Alignment.center, ImageRepeat repeat = ImageRepeat.noRepeat, bool matchTextDirection = false, int? placeholderCacheWidth, int? placeholderCacheHeight, int? imageCacheWidth, int? imageCacheHeight})
Creates a widget that uses a placeholder image stored in an asset bundle while loading the final image from the network.
FadeInImage.memoryNetwork({Key? key, required Uint8List placeholder, ImageErrorWidgetBuilder? placeholderErrorBuilder, required String image, ImageErrorWidgetBuilder? imageErrorBuilder, double placeholderScale = 1.0, double imageScale = 1.0, bool excludeFromSemantics = false, String? imageSemanticLabel, Duration fadeOutDuration = const Duration(milliseconds: 300), Curve fadeOutCurve = Curves.easeOut, Duration fadeInDuration = const Duration(milliseconds: 700), Curve fadeInCurve = Curves.easeIn, double? width, double? height, BoxFit? fit, Color? color, BlendMode? colorBlendMode, Color? placeholderColor, BlendMode? placeholderColorBlendMode, BoxFit? placeholderFit, FilterQuality filterQuality = FilterQuality.low, FilterQuality? placeholderFilterQuality, AlignmentGeometry alignment = Alignment.center, ImageRepeat repeat = ImageRepeat.noRepeat, bool matchTextDirection = false, int? placeholderCacheWidth, int? placeholderCacheHeight, int? imageCacheWidth, int? imageCacheHeight})
Creates a widget that uses a placeholder image stored in memory while loading the final image from the network.

Properties

alignment → AlignmentGeometry
How to align the image within its bounds.
final
color → Color?
If non-null, this color is blended with each image pixel using colorBlendMode.
final
colorBlendMode → BlendMode?
Used to combine color with this image.
final
excludeFromSemantics → bool
Whether to exclude this image from semantics.
final
fadeInCurve → Curve
The curve of the fade-in animation for the image.
final
fadeInDuration → Duration
The duration of the fade-in animation for the image.
final
fadeOutCurve → Curve
The curve of the fade-out animation for the placeholder.
final
fadeOutDuration → Duration
The duration of the fade-out animation for the placeholder.
final
filterQuality → FilterQuality
The rendering quality of the image.
final
fit → BoxFit?
How to inscribe the image into the space allocated during layout.
final
hashCode → int
The hash code for this object.
no setterinherited
height → double?
If non-null, require the image to have this height.
final
image → ImageProvider<Object>
The target image that is displayed once it has loaded.
final
imageErrorBuilder → ImageErrorWidgetBuilder?
A builder function that is called if an error occurs during image loading.
final
imageSemanticLabel → String?
A semantic description of the image.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
matchTextDirection → bool
Whether to paint the image in the direction of the TextDirection.
final
placeholder → ImageProvider<Object>
Image displayed while the target image is loading.
final
placeholderColor → Color?
If non-null, this color is blended with each placeholder image pixel using placeholderColorBlendMode.
final
placeholderColorBlendMode → BlendMode?
Used to combine placeholderColor with the placeholder image.
final
placeholderErrorBuilder → ImageErrorWidgetBuilder?
A builder function that is called if an error occurs during placeholder image loading.
final
placeholderFilterQuality → FilterQuality?
The rendering quality of the placeholder image.
final
placeholderFit → BoxFit?
How to inscribe the placeholder image into the space allocated during layout.
final
repeat → ImageRepeat
How to paint any portions of the layout bounds not covered by the image.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
width → double?
If non-null, require the image to have this width.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<FadeInImage>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited