android flutter 中带有 gif 图像的启动屏幕

Question

这不是要创建一个在应用程序加载后加载的“启动屏幕”。

我正在尝试使 gif 动画在 android 的启动屏幕中工作（“定义启动主题”部分）

当我添加非动画图像时，launch_background.jpg它看起来很好。但是，当我添加带有动画 ( ) 的 gif 图像时launch_background.gif，它显示为静态图像。

我按照以下步骤操作，但是当我运行 flutter 应用程序时，出现此错误：

Launching lib\main.dart on SM J610F in debug mode...
Initializing gradle...

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeDebugResources'.
> java.util.concurrent.ExecutionException: com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource compilation failed
  Output:  E:\flutterProjects\app_name\app_name\build\app\intermediates\incremental\mergeDebugResources\merged.dir\values\values.xml:179: error: :pl.droidsonroids.gif.GifTextView>.

  Command: C:\Users\r\.gradle\caches\transforms-1\files-1.1\aapt2-3.2.1-4818971-windows.jar\15cdf2a9fa9e4ee473d47c95fa8e0c69\aapt2-3.2.1-4818971-windows\aapt2.exe compile --legacy \
          -o \
          E:\flutterProjects\app_name\app_name\build\app\intermediates\res\merged\debug \
          E:\flutterProjects\app_name\app_name\build\app\intermediates\incremental\mergeDebugResources\merged.dir\values\values.xml
  Daemon:  AAPT2 aapt2-3.2.1-4818971-windows Daemon #1
  Output:  C:\Users\r\.gradle\caches\transforms-1\files-1.1\core-1.0.0.aar\e2765643361afa85f13c55b475d0d315\res\values\values.xml:167:5-117: AAPT: error: :pl.droidsonroids.gif.GifTextView>.

  Command: C:\Users\r\.gradle\caches\transforms-1\files-1.1\aapt2-3.2.1-4818971-windows.jar\15cdf2a9fa9e4ee473d47c95fa8e0c69\aapt2-3.2.1-4818971-windows\aapt2.exe compile --legacy \
          -o \
          E:\flutterProjects\app_name\app_name\build\app\intermediates\res\merged\debug \
          E:\flutterProjects\app_name\app\build\app\intermediates\incremental\mergeDebugResources\merged.dir\values\values.xml
  Daemon:  AAPT2 aapt2-3.2.1-4818971-windows Daemon #1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 16s
*******************************************************************************************
The Gradle failure may have been because of AndroidX incompatibilities in this Flutter app.
See https://goo. gl/CP92wY for more information on the problem and how to fix it.
*******************************************************************************************
Resolving dependencies...
Running Gradle task 'assembleDebug'...
Finished with error: Gradle task assembleDebug failed with exit code 1



  [1]: https://flutter.dev/docs/development/add-to-app/android/add-splash-screen
  [2]: /sf/answers/2791005451/

我的app/src/main/res/values/styles.xml看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
<!--        <item name="android:windowBackground">@drawable/launch_background</item>-->
        <pl.droidsonroids.gif.GifTextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@mipmap/launcher_image"
            />
    </style>
</resources>

我在 res/mipmap-hdpi 文件夹中有一个 launcher_image.gif 。

如果我能让这个 Android 插件工作，或者我能找到一种方法让动画 gif 在“启动屏幕”中工作，我会很高兴。Google 上有很多关于“Splash Screen”gif 动画的教程。但很少有人解决在 Android 上的“启动屏幕”中执行此操作的问题。

Answer 1

在您的情况下，您需要将全屏 gif 图像作为应用程序的启动屏幕。首先，我将与您分享我在应用程序中尝试执行此操作时发现的一些事情。Flutter 为我们提供了 Android 和 IOS 的默认启动屏幕。原因是任何运行 flutter 应用程序的设备都需要一些时间来加载 dart 并设置运行 flutter 应用程序的设备。如果您没有在 android 和 ios 本机代码中执行任何操作来自定义此应用程序，显示黑屏而不是闪屏。为了避免这种情况并添加带有徽标的启动屏幕，您可以在 android 中自定义 launch_background.xml 文件

(C:\Users\XYZ\Desktop\project\nameapp\android\app\src\main\res\drawable\launch_background.xml)

检查代码

<?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="@android:color/white" />
 <!-- You can insert your own image assets here -->
  <item>
   <bitmap
    android:gravity="center"
    android:src="@mipmap/logo" />
   </item> 
   </layer-list>

之后，您可以自定义 main.dart 文件来显示您的 gif 文件。

检查代码

  import 'dart:async'; import 'package:app/ui/login_screen.dart'; 
  import 'package:flutter/material.dart';

   void main() { runApp(new MaterialApp( home: new MyApp(), )); }

   class MyApp extends StatefulWidget { 

   @override _MyAppState createState() => new _MyAppState(); 
   }

   class _MyAppState extends State { 
    @override void initState() { 
    super.initState(); 
    new Future.delayed( const Duration(seconds: 4), () =>
    Navigator.pushReplacement( context, 
    MaterialPageRoute(builder: (context) => LoginScreen()),
       ));
     }

    @override 
     Widget build(BuildContext context) {
     return new Scaffold( 
      backgroundColor: Colors.white, 
       body: Container( 
       height: double.infinity, 
       width: double.infinity, 
      child: Image.asset("assets/yourgif.gif", 
      gaplessPlayback: true, 
      fit: BoxFit.fill
      )
      ));
      } 
      }

之后，使用发布版本运行您的应用程序。然后你可以看到你的应用程序第一次显示带有应用程序徽标的白屏一秒钟，并开始显示你的 gif 动画，这将是你的启动屏幕，之后它将进入你的应用程序的第一个屏幕。

请尝试此操作以将您想要的 gif 文件显示为 yopur 启动屏幕。