Lottie class

A widget to display a loaded LottieComposition. The controller property allows to specify a custom AnimationController that will drive the animation. If controller is null, the animation will play automatically and the behavior could be adjusted with the properties animate, repeat and reverse.

Inheritance

Available extensions

WidgetsExtension

Constructors

Lottie({Key? key, required LottieComposition? composition, Animation<double>? controller, double? width, double? height, AlignmentGeometry? alignment, BoxFit? fit, bool? animate, FrameRate? frameRate, bool? repeat, bool? reverse, LottieDelegates? delegates, LottieOptions? options, bool? addRepaintBoundary, FilterQuality? filterQuality, RenderCache? renderCache}): const

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 composition 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
composition → LottieComposition?: The Lottie composition to animate. It could be parsed asynchronously with LottieComposition.fromBytes.
final
controller → Animation<double>?: The animation controller to animate the Lottie animation. If null, a controller is automatically created by this class and is configured with the properties animate, reverse
final
delegates → LottieDelegates?: A group of callbacks to further customize the lottie animation.
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 Lottie composition into the space allocated during layout.
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 composition to have this height.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
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, requires the composition 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<Lottie>: 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
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

Static Properties

cache → LottieCache: The cache instance for recently loaded Lottie compositions.
no setter
throttleAutoAnimation ↔ bool: Whether the automatic animation (when no controller is given) schedules engine frames at the composition frame rate instead of on every vsync.
getter/setter pair
traceEnabled ↔ bool: getter/setter pair

Static Methods

asset(String name, {Animation<double>? controller, bool? animate, FrameRate? frameRate, bool? repeat, bool? reverse, LottieDelegates? delegates, LottieOptions? options, void onLoaded(LottieComposition)?, LottieImageProviderFactory? imageProviderFactory, 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}) → LottieBuilder: Creates a widget that displays an LottieComposition obtained from an AssetBundle.
file(Object file, {Animation<double>? controller, FrameRate? frameRate, bool? animate, bool? repeat, bool? reverse, 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}) → LottieBuilder: Creates a widget that displays an LottieComposition obtained from a File.
memory(Uint8List bytes, {Animation<double>? controller, FrameRate? frameRate, bool? animate, bool? repeat, bool? reverse, 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}) → LottieBuilder: Creates a widget that displays an LottieComposition obtained from a Uint8List.
network(String url, {Client? client, Map<String, String>? headers, Animation<double>? controller, FrameRate? frameRate, bool? animate, bool? repeat, bool? reverse, 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}) → LottieBuilder: Creates a widget that displays an LottieComposition obtained from the network.