adding splash screen in flutter with custom color and img but it is still showing blank white screen on app startup

I am trying to add a splash screen in flutter instead of a blank white screen that shows on startup... I followed this youtube tutorial video. But unfortunately, this method is not working for me.

I added color and image location in android/app/src/main/res/drwable

<?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="@color/red" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/randa" />
    </item>
</layer-list>

and then I added color value in android/app/src/main/values/color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#FF0000</color>
</resources>

Here is a screenshot - launch_background xml and color xml

As I am new in flutter development and I don't have much knowledge about XML.. any help will greatly be appreciated

Note- I tried every answer from google but nothing seems to be working for me. :-(

Solution 1: Aizaz ahmad

The Blank Screen showing on start time in Flutter. Because you are running your app on Debug mode. Try to make custom splash screen . and then run your app on release by typing this command ( Flutter run --release ). Code For Custom Splash Screen Call This Class From main.dart screen and edit this for your self.

import 'dart:async';
import 'package:flutter/material.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {

  @override
  void initState() {
    super.initState();

    Timer(Duration(seconds: 4), () {
      getNextScreen();
    });
  }
  void getNextScreen(){
    Navigator.push(
     context,
     MaterialPageRoute(builder: (context) => HomeScreen()),
   );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Image.asset("your_image.jpeg",fit: BoxFit.cover),
      ),
    );
  }
}

Solution 2: Rafiq Nazir

I also had the same problem. As @Aizaz ahmad suggested you can use a custom splash screen, but it is not advisable to use in production.

There is a package called flutter_native_splah install it in pubspec.yaml.

This is how you should do it.

In pubspec.yaml

Go to dev_dependencies and add flutter_native_splash as below:

dev_dependencies:

  flutter_test:

    sdk: flutter

  flutter_native_splash: ^1.1.5+1

flutter_native_splash:

  color: "#90EE90"

  image: assets/splash_image.jpg

PS: make sure that you have linked your asset folder.