Set BoxFit Cover for Lottie animation

Question

Hi I want my Flutter App to have a fullscreen StartUp Animation. I use Lottie to display the animation, however I can't get the framing and fit right.

I want the Animation to fit the whole screen. In case the screen is too big to have the animation fullscreen, I want to "zoom in" and crop the Edges off (Default BoxFit.cover behaviour).

This is my current Code:

Widget build(BuildContext context) {
return BaseWidget<StartUpViewModel>(
  model: StartUpViewModel(),
  builder: (context, model, child) {
    return Scaffold(
        body: SizedBox(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Lottie.asset(
                "assets/lottie/dummy.json",
                fit: BoxFit.cover,
                controller: animationController,
                onLoaded: (comp) {
                animationController
                ..duration = comp.duration
                ..forward();
           },
        ),
     ));
  },
);

} }

However, if I use this code, the animation is not centered. It scales up the animation but alignes the left side of the animation with the screen, and crops away the right side by doing so.

Sharpie

Answer 1

After some trial and error I found out! I'll leave this here because it is very unintuitive and someone might need this in the future:

Widget build(BuildContext context) {
return BaseWidget<StartUpViewModel>(
  model: StartUpViewModel(),
  builder: (context, model, child) {
    return Scaffold(
      body: SizedBox.expand(
        child: FittedBox(
          fit: BoxFit.cover,
          child: Lottie.asset(
            "assets/lottie/dummy.json",
            fit: BoxFit.fill,
            controller: animationController,
            onLoaded: (comp) {
              animationController.addStatusListener((status) {
                if (status == AnimationStatus.completed) {
                  print("AnimationComnpleze");
                  setState(() {});
                }
              });
              animationController
                ..duration = comp.duration
                ..forward();
            },
          ),
        ),
      ),
    );
  },
);

} }

Sharpie