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

Question

这不是关于创建在应用加载后加载的“启动画面”。

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

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

我关注了these steps，但是当我运行颤振应用程序时，我收到了这个错误：

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]: https://stackoverflow.com/a/39871506/1291122

我的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 在“启动屏幕”中工作，我会很高兴。谷歌充满了关于“闪屏”gif动画的教程。但很少有人解决在 android 上的“启动屏幕”中执行此操作的问题。

Answer 1

图像小部件支持 GIF。

你可以这样做：

new Image(image: new AssetImage("assets/splash.gif"))

Answer 2

在您的情况下，您需要将全屏 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 启动画面。

Answer 3

只需使用它并将其包含在 assets(pubspec) 中

child: Image.asset("assets/app_related/logo.gif",
                      fit: BoxFit.fil,
                    ),

Answer 4

您可以像下面的代码一样添加 GIF 飞溅：

• 首先您必须将 splashscreen: ^1.2.0 添加到项目的 pubspeck.yaml 文件中。
• 运行这个命令：flutter pub get

导入'package:flutter/material.dart';

import 'package:splashscreen/splashscreen.dart' 作为前缀0；

void main() {
  runApp(new MaterialApp(debugShowCheckedModeBanner: false,
      home: new DrivingLicence()));
}

class DrivingLicence extends StatefulWidget {
  @override
  _DrivingLicenceState createState() => new _DrivingLicenceState();
}

class _DrivingLicenceState extends State<DrivingLicence> {
  @override
  Widget build(BuildContext context) {
    final Shader linearGradient = LinearGradient(
      colors: <Color>[Colors.redAccent , Colors.redAccent],
    ).createShader(Rect.fromLTWH(150.0, 70.0, 70.00, 200.0));

    return Container(
        color: Colors.white,
        margin: EdgeInsets.only( top: MediaQuery.of(context).size.height * 0.05 ) ,
        child: new
        prefix0.SplashScreen(
          seconds: 3,
          image: Image.asset("assets/images/splash.gif",fit: BoxFit.fill,),
          navigateAfterSeconds: AfterSplash(),
          photoSize: MediaQuery.of(context).size.height * 0.30,
          loaderColor: Colors.black,
        )
    );

  }
}

class AfterSplash extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return SafeArea (
      child: Scaffold(
        appBar: AppBar(
          elevation: 30.0,
            ),
          ),

        );
  }
}