Dart - Apply lottie animation over text

user_4646416 0
Viewed 49

I am trying to display a lottie confetti animation when a user enters a valid coupon code. I want the animation in front of the screen without taking any space of its own (like position absolute in CSS).

if (isApplyCouponSuccess)
                Stack(
                    children: <Widget>[
                      Lottie.asset(
                        'assets/images/confetti.json',
                        repeat: true,
                        fit: BoxFit.fitWidth,
                        errorBuilder: (_, __, ___) {
                          return const SizedBox();
                        },
                      ),
                      Positioned(
                        top: 150,
                        left: 0,
                        right: 0,
                        child:
                        Text(
                          couponMsg,
                          style: TextStyle(color: Theme
                              .of(context)
                              .primaryColor),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ]
                ),

The above code gives the following result: enter image description here

lottie dart flutter
1 Answers

Use Positioned widget to position the Lottie animation wherever you want.

Positioned(
  top: 100, <-- Change these values to your likings
   // alignment: Alignment.center,
      child: Lottie.asset(
               'assets/images/confetti.json',
                repeat: true,
                fit: BoxFit.fitWidth,
                errorBuilder: (_, __, ___) {
                return const SizedBox();
               },
             ),
           ),

You need to wrap main widget inside, in the example, it's Column and with Positioned widget you move lottie file anywhere on the screen and even control width and height of the file.


class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter app'),
      ),
      body: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text('Hello world!'),
                Text('Hello world!'),
                Text('Hello world!'),
                Text('Hello world!'),
                Text('Hello world!'),
              ],
            ),
          ),
          Positioned(
            left: 0,
            right: 0,
            // top: 100,
            // alignment: Alignment.center,
            child: Lottie.asset(
              'assets/confetti.json',
              repeat: true,
              fit: BoxFit.fitWidth,
              errorBuilder: (_, __, ___) {
                return const SizedBox();
              },
            ),
          ),
        ],
      ),
    );
  }
}

Result

user_140284770
Related