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

时间：2019-12-24 00:26:35

标签： android flutter

这与创建加载应用程序后加载的“启动画面”无关。

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

当我添加非动画图像时，launch_background.jpg看起来不错。但是，当我添加带有动画（launch_background.gif）的gif图像时，它显示为静态图像。

我遵循了these steps，但是当我运行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]: 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工作的方法，我将感到非常高兴。 Google充满了有关“启动画面” gif动画的教程。但是很少有人解决在android的“启动屏幕”中执行此操作的问题。

4 个答案:

答案 0 :(得分：2)

在您的情况下，您需要放置全屏gif图像作为应用程序的初始屏幕。首先，我将与您分享我在应用程序中尝试执行此操作时发现的一些内容。 Flutter为我们提供了针对Android和IOS的默认启动屏幕。原因是要运行任何flutter应用程序，设备都需要一些时间来加载飞镖并设置设备以运行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初始屏幕。

答案 1 :(得分：1)

图片小部件支持GIF。

您可以这样做：

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

答案 2 :(得分：0)

您可以像下面的代码一样添加GIF启动画面：

  • 首先，您必须在项目的pubspeck.yaml文件中添加启动画面：^ 1.2.0。
  • 运行此命令：flutter pub get

导入“ package：flutter / material.dart”；

将'package：splashscreen / splashscreen.dart'导入为prefix0; 

 data <- data.frame(x=1:100, y=cumsum(runif(n = 100, min = -20 ,max = 30)))

highlight <- data[sample(1:100, 15, replace = F),]
highlight$TextToDisplay <- sample(c("Type A", "Type B", "Type C"), 15, replace=TRUE)
highlight$col[highlight$TextToDisplay == "Type A"] <- "#FF0000"
highlight$col[highlight$TextToDisplay == "Type B"] <- "#00FF00"
highlight$col[highlight$TextToDisplay == "Type C"] <- "#FFFF00"
highlight$pch[highlight$TextToDisplay == "Type A"] <- 2
highlight$pch[highlight$TextToDisplay == "Type B"] <- 4
highlight$pch[highlight$TextToDisplay == "Type C"] <- 7


fig <- plot_ly(data, 
               x= ~x, 
               y = ~y, 
               type = 'scatter', 
               mode = 'lines', 
               showlegend=FALSE) %>% 
  add_trace( x    =  highlight$x,
             y    =  highlight$y,
             col  = ~highlight$col,
             pch  = ~highlight$pch,
             mode = "markers",
             marker = list(color   = highlight$col, 
                           symbol  = highlight$pch, 
                           size    = 12),
             showlegend = TRUE
  ) %>% 
  layout(legend = list(x = 5, y = 5))
fig

答案 3 :(得分：0)

只需使用它并包含在assests(pubspec)中

child：Image.asset("assets/app_related/logo.gif", 适合：BoxFit.fil， ),

相关问题
最新问题