frameBuilder property

A builder function responsible for creating the widget that represents this lottie animation.

If this is null, this widget will display a lottie animation that is painted as soon as it is available (and will appear to "pop" in if it becomes available asynchronously). Callers might use this builder to add effects to the animation (such as fading the animation in when it becomes available) or to display a placeholder widget while the animation is loading.

To have finer-grained control over the way that an animation's loading progress is communicated to the user, see loadingBuilder.

Lottie(
  ...
  frameBuilder: (BuildContext context, Widget child) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: child,
    );
  }
)

In this example, the widget hierarchy will contain the following:

Center(
  Padding(
    padding: EdgeInsets.all(8.0),
    child: <lottie>,
  ),
)

{@tool snippet --template=stateless_widget_material}

The following sample demonstrates how to use this builder to implement an animation that fades in once it's been loaded.

This sample contains a limited subset of the functionality that the FadeInImage widget provides out of the box.

@override
Widget build(BuildContext context) {
  return DecoratedBox(
    decoration: BoxDecoration(
      color: Colors.white,
      border: Border.all(),
      borderRadius: BorderRadius.circular(20),
    ),
    child: Lottie.network(
      'https://example.com/animation.json',
      frameBuilder: (BuildContext context, Widget child) {
        if (wasSynchronouslyLoaded) {
          return child;
        }
        return AnimatedOpacity(
          child: child,
          opacity: frame == null ? 0 : 1,
          duration: const Duration(seconds: 1),
          curve: Curves.easeOut,
        );
      },
    ),
  );
}

{@end-tool}

Implementation

LottieBuilder class