flutter 动画启动画面 (gif)

Question

在可绘制文件夹中我添加了 gif 图片文件(splashscreen.gif)

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/splashscreen" />

    <!-- You can insert your own image assets here -->
    <!-- <item>
        <bitmap android:gravity="center" android:src="@mipmap/launch_image" />
    </item> -->
</layer-list>

然后我这样补充。但只显示 gif 的第一张图片。我如何使用动画启动画面或 gif 图像？
我看到了如何制作启动画面，但几乎他们制作了其他 class（如 MyApp）并使用 navigator 但对我来说，我需要在运行应用程序之前进行 http 调用和位置请求。所以在运行 app.

之前我需要 slpash 屏幕

Answer 1

您不能添加动画启动画面，启动画面必须是静态图像。您可以将 .gif 的第一张图像添加为初始屏幕，然后导航到与初始屏幕图像具有相同起始视图的另一个页面，请求网络服务所需的内容，等待响应，然后从那里。

本质上，就是 iOS Twitter 应用程序在您启动时执行的操作。这是它的动画 "splash screen".

Answer 2

我只使用一种颜色作为 iOS 和 Android 的原生启动画面，并使用 Flutter 制作了动画启动画面。事实上，我用 Flare 制作了 Splash Animation（并将 flare runtime 放入 flutter 中）并简单地使用了该代码：

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

class SplashScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color.fromRGBO(250, 224, 61, 1.0),
        body: Center(
          child: Container(
              child: FlareActor(
                "assets/flare/splash.flr",
                callback: (nameOfAnimation) =>
                    Navigator.pushReplacementNamed(context, "/login"),
                fit: BoxFit.none,
                animation: "splash",
              )),
        ));
  }
}

这里重要的是要具有与此代码中相同的原生启动颜色，即：const Color.fromRGBO(250, 224, 61, 1.0),

动画完成后调用回调，路由到登录屏幕。

flutter 动画启动画面 (gif)

flutter animated splash screen (gif)

splash-screen

flutter