Android 上的 Flutter Lottie 动画启动画面

发布于 2025-01-16 20:23:51 字数 1556 浏览 3 评论 0原文

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

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

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

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

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

接受 Lottie 格式
在 Flutter 绘制第一个之前的冷启动期间可见框架
不使用已弃用的 Flutter SplashScreen

尝试过的方法不起作用：

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

视频由 flutter_animated_splash_screen 提供。

原文

I want to add a Lottie animation as a splash screen in a Flutter Android app. I would like it to start before Flutter draws its first frame, so I'm thinking about doing it natively.

I found two examples online but they both use Flutter's deprecated SplashScreen:

I get the following warning message during build:

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

Is there any way to do a splash animation like this video that:

Accepts Lottie format
Visible during a cold start before Flutter draws its first frame
Doesn't use the deprecated Flutter SplashScreen

Things tried that didn't work:

The documentation for Android 12 SplashScreen only seems to works for Animated Vector Drawable (AVD) format animations.
The flutter_native_splash package doesn't support the Lottie animation format yet, though the documentation states that they would accept a PR adding support.

Video courtesy of flutter_animated_splash_screen.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南城旧梦 2025-01-23 20:23:51

使用包 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'),
      );
    }
  }

在 initState 中调用 gotoaPage()

Use the package lottie

Create a stateful Splash Screen:

Now use it as :

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

Now in the initState , you can call a function which can navigate to the home/login screen depending on the status of the user or whatever your use-case is.

For eg:

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

Call gotoaPage() in the initState

回复收藏 0 原文

~没有更多了~