flutteranimationlottie

How to expand this lottie animation to fill the whole screen - Flutter


It doesnt fill the complete screenI am currently working on having a gradient background animation in my app... I am doing so with the help of a lottie animation! I have tried to enclose it in a container and have succeeded in doing so. However there is one issue, I am not able to make the container bigger than a certain amount despite me changing the height to something even bigger than 2000... I really dont know what to do to make sure that there are no whitespaces in the screen and that this gradient fills the screen in all devices. Here is the code. I have also added in a screenshot of how it looks so that you get an idea of whats happening.

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class WelcomeScreen extends StatefulWidget {
  @override
  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(0),
        child: Container(
          height: 1000,
          width: 1000,
          child: Lottie.asset('assets/gradient-background.json'),
        ),
      ),
    ));
  }
}

I am new to flutter development so please forgive me if this is a very silly mistake! Thanks a lot and i really appreciate your help!


Solution

  • First of all, i would like to thank you all for your help. Special thanks to Nehal because he made me aware about the fit property which turns out to be a feature of a lottie asset animation! Thanks so much and this is the correct code:

    import 'package:flutter/material.dart';
    import 'package:lottie/lottie.dart';
    
    class WelcomeScreen extends StatefulWidget {
      @override
      _WelcomeScreenState createState() => _WelcomeScreenState();
    }
    
    class _WelcomeScreenState extends State<WelcomeScreen> {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
          body: Container(
            height: double.infinity,
            width: double.infinity,
            child:
                Lottie.asset('assets/gradient-background.json', fit: BoxFit.cover),
          ),
        ));
      }
    }