Lottie not centering while getting expanded

Question

I need a Lottie to be fitted to the whole screen, so I set Lottie height and width to double.infinity. But the Lottie getting expanded from top left corner instead of from centre making the centre of lottie slightly moved to the right bottom direction, No matter the alignment. Also tried wrapping in Center and Align

Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Lottie.asset(
          'splash_logo.json',
          alignment: Alignment.center,
          repeat: true,
          height: double.infinity,
          fit: BoxFit.cover,
          width: double.infinity,
        ),
      ),
    );
  }

How to expand it keeping the centre of the Lottie at the Centre of the screen

Answer 1

You could try to wrap the Lottie animation in a Container and set the height and width of the Container to double.infinity. This will allow the Container to fill the entire screen, and the animation will be centered within this Container.

Example;

Widget build(BuildContext context) {
 return Scaffold(
   body: Container(
     height: double.infinity,
     width: double.infinity,
     child: Center(
       child: Lottie.asset(
         'splash_logo.json',
         alignment: Alignment.center,
         repeat: true,
         height: double.infinity,
         fit: BoxFit.cover,
         width: double.infinity,
       ),
     ),
   ),
 );
}

Another way is to use the OverflowBox widget to allows its child to overflow the parent's box, which can help with alignment issues.

Widget build(BuildContext context) {
 return Scaffold(
   body: OverflowBox(
     minHeight: 0.0,
     minWidth: 0.0,
     maxHeight: double.infinity,
     maxWidth: double.infinity,
     child: Center(
       child: Lottie.asset(
         'splash_logo.json',
         alignment: Alignment.center,
         repeat: true,
         height: double.infinity,
         fit: BoxFit.cover,
         width: double.infinity,
       ),
     ),
   ),
 );
}

Edit

You could also try the Stack widget which allow to stack multiple children widgets on top of each other.

Example;

Widget build(BuildContext context) {
 return Scaffold(
   body: Stack(
     children: [
       Lottie.asset(
         'splash_logo.json',
         repeat: true,
         height: double.infinity,
         fit: BoxFit.cover,
         width: double.infinity,
       ),
       Center(child: Container()),
     ],
   ),
 );
}

Also, I add this Align that you've already use, maybe the approach here become different;

Widget build(BuildContext context) {
 return Scaffold(
   body: Align(
     alignment: Alignment.center,
     child: Lottie.asset(
       'splash_logo.json',
       repeat: true,
       height: double.infinity,
       fit: BoxFit.cover,
       width: double.infinity,
     ),
   ),
 );
}

If neither of these solutions work, it's possible that the issue here is the Lottie itself. The animation might have been created in a way that it's not centered. If so, you might need to recreate the animation or edit it.