FadeInImage class Null safety
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).
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
-
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- FadeInImage
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, double? width, double? height, BoxFit? fit, BoxFit? placeholderFit, 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, BoxFit? placeholderFit, 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, BoxFit? placeholderFit, 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
- 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
- fit → BoxFit?
-
How to inscribe the image into the space allocated during layout.
final
- hashCode → int
- The hash code for this object.
- 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
- placeholderErrorBuilder → ImageErrorWidgetBuilder?
-
A builder function that is called if an error occurs during placeholder
image loading.
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.
read-onlyinherited
- 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.protected">@protectedinherited -
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 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.
nonVirtual">@nonVirtualinherited