Question 285113 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Lottie not centering while getting expanded

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

Tags:

2

Answers


  1. 0

    You can make use of a Stack with Positioned.fill() to make the Lottie animation expand keeping its center at the center of the screen. Also, to ensure proper scalability wrap the animation with FittedBox. Something like:

     Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned.fill(
            child: FittedBox(
              fit: BoxFit.cover,
              child: SizedBox(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                child: Lottie.asset(
                  'assets/splash_logo.json',
                  repeat: true,
                  alignment: Alignment.center,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
    Login or Signup to reply.
  2. 0

    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,
       ),
     ),
   ),
 );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search