Launch Screen with gif image in android flutter

Question

This is NOT about creating a "Splash Screen" which is loaded after app loads.

I am trying to make animated gifs work in android's launch screen (Section "Define a launch theme")

When I add a non animated image, launch_background.jpg it appears fine. But when I add a gif image with animation (launch_background.gif), it appears as static image.

I followed these steps but when I run the flutter app, I get this error:

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

My app/src/main/res/values/styles.xml looks like this:

<?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>

And I have a launcher_image.gif in res/mipmap-hdpi folder.

I would be happy if I could make this android plugin work, or if I could figure out a way to make animated gif work in the "Launch Screen". Google is full of tutorials about "Splash Screen" gif animations. But very few address the issue of doing it in a "Launch Screen" on android.

score 5 · Answer 1 · answered Feb 20 '20 at 07:23

In your case you need to put a full screen gif image as a splash screen for your application. First I will share you some of the things I found while trying to do this in my application. Flutter is providing us with default splash screen for both android and IOS. The reason for this is is any flutter application to run it need some time for the device to load the dart and set up device for running flutter application .if you didn't do anything in android and ios native code to customize this the application will show a black screen instead of splash screen. To avoid that and add a splash screen with logo you can just customize you launch_background.xml file in android

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

Check the code

<?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>

after this you can customize you main.dart file to show your gif file.

Check the code

  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
      )
      ));
      } 
      }

After this run your application with release build. then you can see your application shows a white screen with app logo for first time for just a second and start showing your gif animation which is to be your splash screen and after that it will go to your applications first screen.

Please try this to show your desired gif file as yopur splash screen.

score 3 · Answer 2 · answered Dec 24 '19 at 03:57

3

Image widget Supports GIF.

You can do it like :

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

answered Dec 24 '19 at 03:57

Niraj

903
8
23

ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ · Answer 3 · 2022-02-17T11:19:27.917

1

Simply use this and include it in assets(pubspec)

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

edited Feb 17 '22 at 11:19

answered Feb 11 '21 at 16:36

ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ

464
4
18

score 0 · Answer 4 · answered Jun 26 '20 at 11:08

you can add a GIF splash like this code bellow:

first you have to add splashscreen: ^1.2.0 to pubspeck.yaml file of your project.
run this command: flutter pub get

import 'package:flutter/material.dart';

import 'package:splashscreen/splashscreen.dart' as prefix0;

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,
            ),
          ),

        );
  }
}

score 0 · Answer 5 · answered Jul 17 '23 at 08:13

you can add a GIF splash like this code bellow:

// ignore_for_file: unnecessary_new, prefer_const_constructors

import 'dart:async';
import 'package:flutter/material.dart';
import '../registration.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState`enter code here`();
}

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

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

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jul 19 '23 at 21:09

Launch Screen with gif image in android flutter

5 Answers5