ProgressiveImage class

A image that gracefully fades from a blurred thumbnail to the target image. placeholder is displayed initially until the thumbnail loads.

Sequence of occurrence: placeholder > thumbnail > image

Use this class to display long-loading images, such as a NetworkImage, so that a relatively smaller sized thumbnail appears on screen as a blurred version of the target image which is relatively larger in size.

It forces the thumbnail to be resolved completely before even the target image starts to be fetched for better use experience.

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

thumbnail {https://en.wikipedia.org/wiki/Thumbnail} can be an extremely smaller version of the target image which loads faster and helps in a better first UI impression.

The width and height properties are required for enlarging the thumbnail to a specified width and height

The fadeDuration property controls the fading duration of the placeholder, thumbnail and target image

The blur property controls the intensity of the blur applied to the thumbnail image.

ProgressiveImage(
  placeholder: AssetImage('assets/example.jpg'),
  thumbnail: NetworkImage('https://backend.example.com/thumbnail.png'),
  image: NetworkImage('https://backend.example.com/image.png'),
  height: 300,
  width: 500,
);
Inheritance

Constructors

ProgressiveImage({Key? key, required ImageProvider<Object>? placeholder, required ImageProvider<Object> thumbnail, required ImageProvider<Object> image, required double width, required double height, BoxFit fit = BoxFit.fill, double blur = 20, Duration fadeDuration = const Duration(milliseconds: 500), AlignmentGeometry alignment = Alignment.center, ImageRepeat repeat = ImageRepeat.noRepeat, bool matchTextDirection = false, bool excludeFromSemantics = false, String? imageSemanticLabel})
Creates a widget that gracefully fades from a blurred thumbnail to the target image. placeholder is displayed initially until the thumbnail loads.
ProgressiveImage.assetNetwork({Key? key, required String placeholder, required String thumbnail, required String image, required double width, required double height, AssetBundle? bundle, double? placeholderScale, double thumbnailScale = 1.0, double imageScale = 1.0, BoxFit fit = BoxFit.fill, double blur = 20, Duration fadeDuration = const Duration(milliseconds: 500), AlignmentGeometry alignment = Alignment.center, ImageRepeat repeat = ImageRepeat.noRepeat, bool matchTextDirection = false, bool excludeFromSemantics = false, String? imageSemanticLabel})
Creates a widget that uses a placeholder image stored in an asset bundle while loading the thumbnail and target image from the network.
ProgressiveImage.custom({Key? key, required WidgetBuilder? placeholderBuilder, required ImageProvider<Object> thumbnail, required ImageProvider<Object> image, required double width, required double height, BoxFit fit = BoxFit.fill, double blur = 20, Duration fadeDuration = const Duration(milliseconds: 500), AlignmentGeometry alignment = Alignment.center, ImageRepeat repeat = ImageRepeat.noRepeat, bool matchTextDirection = false, bool excludeFromSemantics = false, String? imageSemanticLabel})
Creates a widget that gracefully fades from a blurred thumbnail to the target image. placeholderBuilder is displayed initially until the thumbnail loads.
ProgressiveImage.memoryNetwork({Key? key, required Uint8List placeholder, required String thumbnail, required String image, required double width, required double height, double placeholderScale = 1.0, double thumbnailScale = 1.0, double imageScale = 1.0, BoxFit fit = BoxFit.fill, double blur = 20, Duration fadeDuration = const Duration(milliseconds: 500), AlignmentGeometry alignment = Alignment.center, ImageRepeat repeat = ImageRepeat.noRepeat, bool matchTextDirection = false, bool excludeFromSemantics = false, String? imageSemanticLabel})
Creates a widget that uses a placeholder image stored in memory while loading the thumbnail and target image from the network.

Properties

alignment → AlignmentGeometry
How to align the image within its bounds.
final
blur → double
The intensity of the blur applied on the thumbnail.
final
excludeFromSemantics → bool
Whether to exclude this image from semantics.
final
fadeDuration → Duration
The duration of the fade animation for the placeholder, thumbnail and target 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
The placeholder, thumbnail and target image will acquire this height based on the fit property.
final
image → ImageProvider<Object>
The target image that
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 initially while the thumbnail is loading.
final
placeholderBuilder → WidgetBuilder?
A builder that is displayed in place of placeholder
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
thumbnail → ImageProvider<Object>
The blurred thumbnail that is displayed while the target image is loading.
final
width → double
The placeholder, thumbnail and target image will acquire this width based on the fit property.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → _ProgressiveImageState
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