Android 上的 Flutter Lottie 动画启动画面

Question

我想在 Flutter Android 应用程序中添加 Lottie 动画作为启动屏幕。我希望它在 Flutter 绘制第一帧之前启动，所以我正在考虑在本地执行此操作。

我在网上找到了两个例子，但它们都使用了 Flutter 的 deprecated SplashScreen：

• flutter_animated_splash_screen
• flutter_lottie_splash_app

我在构建过程中收到以下警告消息：

W/FlutterActivityAndFragmentDelegate(23263): A splash screen was
provided to Flutter, but this is deprecated. See
flutter.dev/go/android-splash-migration for migration steps.

有没有办法制作像这个视频这样的启动动画：

1. 接受 Lottie 格式
2. 在 Flutter 绘制第一帧之前的冷启动期间可见
3. 不使用已弃用的 Flutter SplashScreen

尝试过但不起作用的事情：

• Android 12 SplashScreen的文档似乎仅适用于动画矢量可绘制 (AVD) 格式的动画。
• flutter_native_splash包尚不支持 Lottie 动画格式，尽管文档指出他们会接受 PR 添加支持。

视频由flutter_animated_splash_screen提供。

Answer 1

使用lottie包

创建一个有状态的启动屏幕：

现在将其用作：

  import 'package:lottie/lottie.dart';
  import 'package:flutter/material.dart';
        
  class Example extends StatefulWidget {
          const Example({Key? key}) : super(key: key);
        
         @override
      State<Example> createState() => _ExampleState();
    }
    
    class _ExampleState extends State<Example> {


 String loadingString = 'Loading.....';
  Duration delayInterval = const Duration(milliseconds: 2000);

          @override
          Widget build(BuildContext context) {
            return Container(
              child: Lottie.asset('images/ex.json'),
            );
          }
        }

现在initState，您可以调用一个函数，该函数可以根据用户的状态或您的用例导航到主/登录屏幕。

例如：

  void gotoaPage() async {
    dynamic cookie = global.prefs!.getString('something');
    if (cookie != null) {
      loadingString;
      await Future.delayed(delayInterval);
      Future(
        () => Navigator.of(context).pushReplacementNamed('/home'),
      );
    } else {
      await Future.delayed(delayInterval);
      Future(
        () => Navigator.of(context).pushReplacementNamed('/login'),
      );
    }
  }

致电gotoaPage()​initState