Question 136881 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to give GIF image on the native splash screen

I’m creating a splash screen using the native splash screen package.

I tried to give a GIF image in the background of the splash screen. But it didn’t work. Is there a way to render a GIF image in a full splash screen?

Code:

  flutter_native_splash: ^2.2.17

flutter_native_splash:
  color: "#94f301"
  android_12:
    color: "#94f301"
  backgoround_image_android: assets/images/splash.gif
  fullscreen: true
Tags:

2

Answers


  1. 0

    you can use flutter_native_splash (https://pub.dev/packages/flutter_native_splash)

    and this is how to use it:

    Add the flutter_native_splash package to your pubspec.yaml file and run flutter pub get to install it:

    flutter_native_splash: ^2.2.19

    In the pubspec.yaml file, add the following lines to define the splash screen settings:

    flutter_native_splash:
  image: assets/images/splash.gif
  color: "#2b2b2b"
  android: true
  ios: true
  scale: "fill"

    Run flutter pub run flutter_native_splash:create to generate the native splash screen files for Android and iOS.

    In your main.dart file, add the following lines to import the flutter_native_splash.dart file and initialize the splash screen:

    import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.show(
    splashScreen: MySplashScreen(),
    duration: 3000,
  );
  runApp(MyApp());
}

    Build and run your app to see the GIF image displayed on the native splash screen.

    Note: Make sure to test the splash screen on actual devices, as some emulators may not display the native splash screen correctly.

    Login or Signup to reply.
  2. 0

    Add This package flutter_native_splash

    dependencies:
  flutter_native_splash: ^1.2.0

    Add this into android/app/src/main/res/values

       <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="splash_color">#FFFFFF</color>
    </resources>
Also Add this into **android/app/src/main/res/drawable**
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/splash_color"/>
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash"/>
    </item>
</layer-list>

    Add the following code to the flutter_native_splash section of your pubspec.yaml file:

    flutter_native_splash:
  color: "#FFFFFF"
  image: assets/images/splash.gif
  android: true
  ios: false
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search