Flutter：启动动画Lottie

实现启动动画方案：

# 动画
lottie: ^3.1.3
# 启动动画
animated_splash_screen: ^1.3.0dependency_overrides:# 启动图适配 android 11 及以下, 12 以上，IOS
# 生成：dart run flutter_native_splash:create
# 删除：dart run flutter_native_splash:remove
flutter_native_splash:web: false# color_android: "#ffffff"background_image_android: "assets/icons/background.png"background_image_ios: "assets/icons/background.png"# image_ios: "assets/icons/android.png"android_12:image: "assets/icons/android12.png"# icon_background_color: "#324ea1"

1、第一祯

flutter_native_splash默认生成一张静态图，app首次启动时第一祯显示的画面，这个时常根据手机性能的不同，可能需要1-3秒左右。

2、flutter加载完毕后，进入自己写的欢迎页，这里用lottie+animated_splash_screen实现动画

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:lottie/lottie.dart';import 'index.dart';class StartPage extends GetView<StartController> {const StartPage({super.key});// 主视图Widget _buildView() {return Container(color: const Color.fromARGB(255, 188, 84, 84),child: Center(child: SizedBox(width: 300,height: 300,child: LottieBuilder.asset('assets/json/dancing.json',fit: BoxFit.contain,),),),);}@overrideWidget build(BuildContext context) {return GetBuilder<StartController>(init: StartController(),id: "start",builder: (_) {return Scaffold(backgroundColor: const Color.fromARGB(255, 188, 84, 84),body: _buildView(),);},);}
}

import 'package:lingoaix/common/index.dart';
import 'package:get/get.dart';class StartController extends GetxController {StartController();_jumpToPage() {// 延迟1秒Future.delayed(const Duration(seconds: 1)).then((_) {// 是否首次打开appif (!ConfigService.to.isAlreadyOpen) {// 第一次打开app，标记已打开ConfigService().setAlreadyOpen();}var token = Storage().getString('token');if (token.isNotEmpty) {Get.offAllNamed('/');} else {Get.offAllNamed('/loginPage');}});}@overridevoid onReady() {super.onReady();_initData();}}

Lottie官网

将保存的json文件 放到assets/json目录下，即可实现启动动画页面。