颤动动画闪屏（gif）答案

【问题标题】：flutter animated splash screen (gif)颤动动画闪屏（gif）
【发布时间】：2019-12-26 18:48:37
【问题描述】：

在可绘制文件夹中我添加了 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 图像？
我看到了如何制作启动画面，但几乎他们制作了其他类（如 MyApp）并使用 navigator 但对我来说，在运行应用程序之前我需要 http 调用和位置请求。所以在运行应用程序之前我需要 slpash 屏幕。

【问题讨论】：

标签： flutter splash-screen

【解决方案1】：

我只使用一种颜色作为 iOS 和 Android 的原生闪屏，并使用 Flutter 制作动画闪屏。事实上，我用 Flare 制作了 Splash Animation（并将 Flare 运行时放入 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),

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

【讨论】：

如何在线或离线编辑“*.flr”文件？

【解决方案2】：

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

本质上，这就是 iOS Twitter 应用程序在您启动它时所做的事情。这是它的动画“闪屏”。

【讨论】：