Flutter：启动动画Lottie

实现启动动画方案：

js 复制代码

# 动画
lottie: ^3.1.3
# 启动动画
animated_splash_screen: ^1.3.0


dependency_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实现动画

js 复制代码

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,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<StartController>(
      init: StartController(),
      id: "start",
      builder: (_) {
        return Scaffold(
          backgroundColor: const Color.fromARGB(255, 188, 84, 84),
          body: _buildView(),
        );
      },
    );
  }
}

js 复制代码

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((_) {
      // 是否首次打开app
      if (!ConfigService.to.isAlreadyOpen) {
        // 第一次打开app，标记已打开
        ConfigService().setAlreadyOpen();
      }
      var token = Storage().getString('token');
      if (token.isNotEmpty) {
        Get.offAllNamed('/');
      } else {
        Get.offAllNamed('/loginPage');
      }

      
      
    });
  }




  @override
  void onReady() {
    super.onReady();
    _initData();
  }

}

Lottie官网

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