[Flutter] All my lottie files with .json extension are visually corrupted in my flutter...

I have a splash screen as you can see below: splash_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_story_application/helper/global.dart';
import 'package:flutter_story_application/screen/home_screen.dart';
import 'package:flutter_story_application/widget/custom_loading.dart';

class SplashScreen extends StatefulWidget {
const SplashScreen({super.key});

@override
State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
Future.delayed(const Duration(seconds: 2), () {
Navigator.of(context)
.pushReplacement(MaterialPageRoute(builder: (_) => HomeScreen()));
});
}

@override
Widget build(BuildContext context) {
//initializing device size
mq = MediaQuery.sizeOf(context);
return Scaffold(
body: SizedBox(
width: double.maxFinite,
child: Column(
children: [
const Spacer(
flex: 2,
),
Card(
color: Colors.black,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Padding(
padding: EdgeInsets.all(mq.width * .05),
child: Image.asset(
"assets/images/logo.png",
width: mq.width * .45,
),
),
),
const Spacer(),
//
const CustomLoading(),
const Spacer(),
],
),
),
);
}
}


In this code you can see the CustomLoading() page. In this page i am using my lottie file. custom_loading.dart

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

class CustomLoading extends StatelessWidget {
const CustomLoading({super.key});

@override
Widget build(BuildContext context) {
return Lottie.asset("assets/lottie/loading.json", width: 75);
}
}


I also made my definition in pubspec.yaml. So there is no problem in that part either.

This is the original lottie animation: https://lottiefiles.com/free-animation/rip-dead-emsw96QtJP?color-palette=true

but my images look like this:



Continue reading...