LottieBuilder class

A widget that displays a Lottie animation.

Several constructors are provided for the various ways that a Lottie file can be provided:

Inheritance
Available extensions

Constructors

LottieBuilder({Key? key, required LottieProvider lottie, Animation<double>? controller, FrameRate? frameRate, bool? animate, bool? reverse, bool? repeat, LottieDelegates? delegates, LottieOptions? options, void onLoaded(LottieComposition)?, LottieFrameBuilder? frameBuilder, ImageErrorWidgetBuilder? errorBuilder, double? width, double? height, BoxFit? fit, AlignmentGeometry? alignment, bool? addRepaintBoundary, FilterQuality? filterQuality, WarningCallback? onWarning, RenderCache? renderCache})
const
LottieBuilder.asset(String name, {Animation<double>? controller, FrameRate? frameRate, bool? animate, bool? reverse, bool? repeat, LottieDelegates? delegates, LottieOptions? options, LottieImageProviderFactory? imageProviderFactory, void onLoaded(LottieComposition)?, Key? key, AssetBundle? bundle, LottieFrameBuilder? frameBuilder, ImageErrorWidgetBuilder? errorBuilder, double? width, double? height, BoxFit? fit, AlignmentGeometry? alignment, String? package, bool? addRepaintBoundary, FilterQuality? filterQuality, WarningCallback? onWarning, LottieDecoder? decoder, RenderCache? renderCache, bool? backgroundLoading})
Creates a widget that displays an LottieComposition obtained from an AssetBundle.
LottieBuilder.file(Object file, {Animation<double>? controller, FrameRate? frameRate, bool? animate, bool? reverse, bool? repeat, LottieDelegates? delegates, LottieOptions? options, LottieImageProviderFactory? imageProviderFactory, void onLoaded(LottieComposition)?, Key? key, LottieFrameBuilder? frameBuilder, ImageErrorWidgetBuilder? errorBuilder, double? width, double? height, BoxFit? fit, AlignmentGeometry? alignment, bool? addRepaintBoundary, FilterQuality? filterQuality, WarningCallback? onWarning, LottieDecoder? decoder, RenderCache? renderCache, bool? backgroundLoading})
Creates a widget that displays an LottieComposition obtained from a File.
LottieBuilder.memory(Uint8List bytes, {Animation<double>? controller, FrameRate? frameRate, bool? animate, bool? reverse, bool? repeat, LottieDelegates? delegates, LottieOptions? options, LottieImageProviderFactory? imageProviderFactory, void onLoaded(LottieComposition)?, ImageErrorWidgetBuilder? errorBuilder, Key? key, LottieFrameBuilder? frameBuilder, double? width, double? height, BoxFit? fit, AlignmentGeometry? alignment, bool? addRepaintBoundary, FilterQuality? filterQuality, WarningCallback? onWarning, LottieDecoder? decoder, RenderCache? renderCache, bool? backgroundLoading})
Creates a widget that displays an LottieComposition obtained from a Uint8List.
LottieBuilder.network(String src, {Client? client, Map<String, String>? headers, Animation<double>? controller, FrameRate? frameRate, bool? animate, bool? reverse, bool? repeat, LottieDelegates? delegates, LottieOptions? options, LottieImageProviderFactory? imageProviderFactory, void onLoaded(LottieComposition)?, Key? key, LottieFrameBuilder? frameBuilder, ImageErrorWidgetBuilder? errorBuilder, double? width, double? height, BoxFit? fit, AlignmentGeometry? alignment, bool? addRepaintBoundary, FilterQuality? filterQuality, WarningCallback? onWarning, LottieDecoder? decoder, RenderCache? renderCache, bool? backgroundLoading})
Creates a widget that displays an LottieComposition obtained from the network.

Properties

addRepaintBoundary → bool?
Indicate to automatically add a RepaintBoundary widget around the animation. This allows to optimize the app performance by isolating the animation in its own Layer.
final
alignment → AlignmentGeometry?
How to align the animation within its bounds.
final
animate → bool?
If no controller is specified, this value indicate whether or not the Lottie animation should be played automatically (default to true). If there is an animation controller specified, this property has no effect.
final
controller → Animation<double>?
The animation controller of the Lottie animation. The animated value will be mapped to the progress property of the Lottie animation.
final
delegates → LottieDelegates?
A group of options to further customize the lottie animation.
final
errorBuilder → ImageErrorWidgetBuilder?
A builder function that is called if an error occurs during loading.
final
filterQuality → FilterQuality?
The quality of the image layer. See FilterQuality FilterQuality.high is highest quality but slowest.
final
fit → BoxFit?
How to inscribe the animation into the space allocated during layout.
final
frameBuilder → LottieFrameBuilder?
A builder function responsible for creating the widget that represents this lottie animation.
final
frameRate → FrameRate?
The number of frames per second to render. Use FrameRate.composition to use the original frame rate of the Lottie composition (default) Use FrameRate.max to advance the animation progression at every frame.
final
hashCode → int
The hash code for this object.
no setterinherited
height → double?
If non-null, require the lottie animation to have this height.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
lottie → LottieProvider
The lottie animation to load. Example of providers: AssetLottie, NetworkLottie, FileLottie, MemoryLottie
final
onLoaded → void Function(LottieComposition)?
A callback called when the LottieComposition has been loaded. You can use this callback to set the correct duration on the AnimationController with composition.duration
final
onWarning → WarningCallback?
A callback called when there is a warning during the loading or painting of the animation.
final
options → LottieOptions?
Some options to enable/disable some feature of Lottie
final
renderCache → RenderCache?
Opt-in to a special render mode where the frames of the animation are lazily rendered and kept in a cache. Subsequent runs of the animation will be cheaper to render.
final
repeat → bool?
Specify that the automatic animation should repeat in a loop (default to true). The property has no effect if animate is false or controller is not null.
final
reverse → bool?
Specify that the automatic animation should repeat in a loop in a "reverse" mode (go from start to end and then continuously from end to start). It default to false. The property has no effect if animate is false, repeat is false or controller is not null.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
width → double?
If non-null, require the lottie animation to have this width.
final

Methods

alignAtBottomCenter({Key? key, double? heightFactor, double? widthFactor}) → Align

Available on Widget, provided by the WidgetsExtension extension

Aligned to the bottom center.
alignAtBottomLeft({Key? key, double? heightFactor, double? widthFactor}) → Align

Available on Widget, provided by the WidgetsExtension extension

Aligned to the bottom left.
alignAtBottomRight({Key? key, double? heightFactor, double? widthFactor}) → Align

Available on Widget, provided by the WidgetsExtension extension

Aligned to the bottom right.
alignAtCenter({Key? key, double? heightFactor, double? widthFactor}) → Align

Available on Widget, provided by the WidgetsExtension extension

Centered.
alignAtCenterLeft({Key? key, double? heightFactor, double? widthFactor}) → Align

Available on Widget, provided by the WidgetsExtension extension

Aligned to the center left.
alignAtCenterRight({Key? key, double? heightFactor, double? widthFactor}) → Align

Available on Widget, provided by the WidgetsExtension extension

Aligned to the center right.
alignAtLERP(Alignment a, Alignment b, double t, {Key? key, double? heightFactor, double? widthFactor}) → Align

Available on Widget, provided by the WidgetsExtension extension

Aligned between a and b at t (0 = a, 1 = b).
alignAtTopCenter({Key? key, double? heightFactor, double? widthFactor}) → Align

Available on Widget, provided by the WidgetsExtension extension

Aligned to the top center.
alignAtTopLeft({Key? key, double? heightFactor, double? widthFactor}) → Align

Available on Widget, provided by the WidgetsExtension extension

Aligned to the top left.
alignAtTopRight({Key? key, double? heightFactor, double? widthFactor}) → Align

Available on Widget, provided by the WidgetsExtension extension

Aligned to the top right.
alignXY(double x, double y, {Key? key, double? heightFactor, double? widthFactor}) → Align

Available on Widget, provided by the WidgetsExtension extension

Aligned at x, y from -1 to 1. child.alignXY(0, -0.5)
card({Color? backgroundColor, double? elevation, EdgeInsetsGeometry? margin}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Material Card around it. child.card(elevation: 2)
center() → Widget

Available on Widget, provided by the WidgetsExtension extension

Centered in the available space. child.center()
chip({required Color backgroundColor, double? width, double? height, Alignment? alignment, double borderWidth = 1, double radius = 12, Color borderColor = Colors.transparent, EdgeInsets padding = const EdgeInsets.symmetric(horizontal: 8, vertical: 6), EdgeInsetsGeometry? margin, BoxConstraints? constraints}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Pill-shaped colored box, e.g. for tags. Text("New").chip(backgroundColor: Colors.green.shade100)
clipCircle() → Widget

Available on Widget, provided by the WidgetsExtension extension

Clips to a circle. avatar.clipCircle()
clipRadius(double radius) → Widget

Available on Widget, provided by the WidgetsExtension extension

Rounds the corners by clipping. image.clipRadius(12)
container({double? width, double? height, Alignment? alignment, Color? backgroundColor, double borderWidth = 1, double radius = 1, Color borderColor = Colors.transparent, EdgeInsetsGeometry? padding, EdgeInsetsGeometry? margin, BoxConstraints? constraints}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Box with background, border and rounded corners. child.container(backgroundColor: Colors.white, radius: 12)
createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<LottieBuilder>
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.
override
disabled(bool disabled, {double opacity = 0.5}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Greys out and blocks taps when disabled. form.disabled(isSaving)
expanded({int flex = 1}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Takes the remaining space in a Row/Column. child.expanded()
fadeSlideIn({int milliseconds = 1000, double offset = 24}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Fades and slides up once when first shown. card.fadeSlideIn()
fit({Alignment alignment = Alignment.center}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Shrinks to fit the space (never grows). Text(long).fit()
flexible({int flex = 1}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Can shrink in a Row/Column but does not have to fill. child.flexible()
form(GlobalKey<FormState> key) → Widget

Available on Widget, provided by the WidgetsExtension extension

Wraps in a Form with key. column.form(formKey)
hero(Object tag) → Widget

Available on Widget, provided by the WidgetsExtension extension

Hero animation between pages with the same tag. image.hero("product-$id")
ltr() → Widget

Available on Widget, provided by the WidgetsExtension extension

Forces left-to-right (numbers, phone numbers, code). Text(phone).ltr()
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
onDoubleTap(GestureTapCallback? onPressed) → Widget

Available on Widget, provided by the WidgetsExtension extension

Double tap. image.onDoubleTap(like)
onLongPress(GestureTapCallback? onPressed) → Widget

Available on Widget, provided by the WidgetsExtension extension

Long press. child.onLongPress(showOptions)
onPress(VoidCallback onTap, {double pressedScale = 0.9, Duration duration = const Duration(milliseconds: 120)}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Tap with a press-down shrink animation. card.onPress(open)
onTap(GestureTapCallback? onPressed) → Widget

Available on Widget, provided by the WidgetsExtension extension

Tap without ripple. child.onTap(open)
onTapInk(GestureTapCallback? onPressed) → Widget

Available on Widget, provided by the WidgetsExtension extension

Tap with a Material ripple (needs a Material ancestor). tile.onTapInk(open)
opacity(double opacity) → Widget

Available on Widget, provided by the WidgetsExtension extension

Makes it see-through (0 = invisible, 1 = solid). child.opacity(0.5)
pAll(double padding) → Widget

Available on Widget, provided by the WidgetsExtension extension

Same padding on every side. child.pAll(16)
pLTRB(double left, double top, double right, double bottom) → Widget

Available on Widget, provided by the WidgetsExtension extension

Padding left, top, right, bottom. child.pLTRB(8, 4, 8, 4)
pOnly({double left = 0.0, double top = 0.0, double right = 0.0, double bottom = 0.0}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Padding on chosen sides. child.pOnly(top: 8)
position({double? left, double? top, double? right, double? bottom, double? width, double? height}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Positioned inside a Stack. badge.position(top: 0, right: 0)
pSymmetric({double horizontal = 0.0, double vertical = 0.0}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Horizontal and/or vertical padding. child.pSymmetric(horizontal: 16)
rotate(double scale) → Widget

Available on Widget, provided by the WidgetsExtension extension

Rotates by scale radians. arrow.rotate(pi / 2)
rtl() → Widget

Available on Widget, provided by the WidgetsExtension extension

Forces right-to-left. child.rtl()
safeArea() → Widget

Available on Widget, provided by the WidgetsExtension extension

Keeps it out of the notch and system bars. body.safeArea()
scale(double scale) → Widget

Available on Widget, provided by the WidgetsExtension extension

Scales the paint (layout size unchanged). icon.scale(1.5)
scrollable({Axis scrollDirection = Axis.vertical}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Makes it scroll when it does not fit. column.scrollable()
showMenus(List<PopupMenuEntry<int>> items) → Widget

Available on Widget, provided by the WidgetsExtension extension

Shows a popup menu where the user taps; items return their int value. child.showMenus([PopupMenuItem(value: 1, child: Text("Edit"))])
sized({double? width, double? height}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Fixed width and/or height. logo.sized(width: 48, height: 48)
skeleton(bool loading) → Widget

Available on Widget, provided by the WidgetsExtension extension

Draws a shimmering loading placeholder in its shape while loading. Text("Name").skeleton(isLoading)
sliver() → Widget

Available on Widget, provided by the WidgetsExtension extension

Lets a normal widget sit inside a CustomScrollView. header.sliver()
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
tooltip(String message) → Widget

Available on Widget, provided by the WidgetsExtension extension

Shows message on long press / mouse hover. icon.tooltip("Delete")
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → 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
translate(Offset offset) → Widget

Available on Widget, provided by the WidgetsExtension extension

Moves the paint by offset (layout unchanged). child.translate(const Offset(0, -4))
visible(bool visible, {bool maintainSize = false}) → Widget

Available on Widget, provided by the WidgetsExtension extension

Shows it only when visible; with maintainSize it keeps its space. saveButton.visible(isDirty)

Operators

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