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 new NetworkImage, so that the image appears on screen with a graceful animation rather than abruptly pops 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.

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

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

Prefer a placeholder that's already cached so that it is displayed in one frame. 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).

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

Inheritance

Constructors

FadeInImage({Key key, @required ImageProvider placeholder, @required ImageProvider image, 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, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, bool matchTextDirection: false })
Creates a widget that displays a placeholder while an image is loading then cross-fades to display the image. [...]
const
FadeInImage.assetNetwork({Key key, @required String placeholder, @required String image, AssetBundle bundle, double placeholderScale, double imageScale: 1.0, 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, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, bool matchTextDirection: false })
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, @required String image, double placeholderScale: 1.0, double imageScale: 1.0, 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, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, bool matchTextDirection: false })
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
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
fit → BoxFit
How to inscribe the image into the space allocated during layout. [...]
final
height → double
If non-null, require the image to have this height. [...]
final
image → ImageProvider
The target image that is displayed.
final
matchTextDirection → bool
Whether to paint the image in the direction of the TextDirection. [...]
final
placeholder → ImageProvider
Image displayed while the target image is loading.
final
repeat → ImageRepeat
How to paint any portions of the layout bounds not covered by the image.
final
width → double
If non-null, require the image to have this width. [...]
final
hashCode → int
The hash code for this object. [...]
read-only, inherited
key → Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
runtimeType → Type
A representation of the runtime type of the object.
read-only, inherited

Methods

createState() → State<StatefulWidget>
Creates the mutable state for this widget at a given location in the tree. [...]
override
createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
inherited
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent 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 toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String
Returns 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 ==(dynamic other) → bool
The equality operator. [...]
inherited