Splash Screen Color not Changing in Flutter

Question

I am new to Flutter and still practicing

I am creating a splash screen but the color of splash screen is not changing

My Code:

-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/black" />
    
        <!-- You can insert your own image assets here -->
        <!-- <item>
            <bitmap
                android:gravity="center"
                android:src="@mipmap/launch_image" />
        </item> -->
    </layer-list>

-main.dart

import 'package:flutter/material.dart';
import 'package:id_locker/Screens/HomeScreen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

-HomeScreen.dart

import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: HexColor("#2301FA")),
    );
  }
}

It should ho black screen but it still white screen SS:

Have a look at https://stackoverflow.com/questions/56583735/flutter-change-splash-screen-background-color — wamae, Jun 06 '21 at 12:57
I have already seen that , but it is not working neither yt tutorial , I don't know , What's the Problems — Prince Kumar, Jun 06 '21 at 16:19

score 5 · Answer 1 · answered Mar 08 '22 at 06:33

You also need to change in launch_background.xml file of the drawable-v21 folder the same as of the drawable folder.

Change

<item android:drawable="?android:colorBackground" />

to the tweaks you made @android:color/black (or @color/backgroudColor for the custom-defined colors.xml file);

<item android:drawable="@color/backgroudColor" />

jon · Answer 2 · 2021-08-05T18:18:23.530

2

Did you edit the launch_background.xml in the drawable folder? You may need to edit the launch_background.xml in the drawable-v21 folder instead. Or, just use the flutter_native_splash package that I maintain.

edited Aug 05 '21 at 18:18

answered Aug 05 '21 at 18:10

jon

3,202
3
23
35

score 1 · Answer 3 · answered Nov 13 '21 at 19:27

You can set & change it for booth themes light & dark simply using flutter_native_splash.

First of all, you need to add the following line to pubspec.yaml file under dependencies:

flutter_native_splash: ^1.3.1

Then add flutter_native_splash: as new section to pubspec.yaml. Now you can set the splash background color for light and dark themes by adding the following lines under flutter_native_splash:

color: "#ff8a84"
color_dark: "#ad5f5c"
android: true
ios: true

android & ios added to supply booth OS's

In the end, the pubspec.yaml file will look like this:

Now to generate the splash screen:

open the terminal in your fluter project
run this command: flutter clean && flutter pub get && flutter pub run flutter_native_splash:create
start your application :D

If the background color does not change, uninstall the application from the phone/simulator and then start your application again.

For more details enjoy Johannes Milke's tutorial.

score 0 · Answer 4 · answered Mar 03 '22 at 07:19

<?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/bg" />
    
        <!-- You can insert your own image assets here -->
        <!-- <item>
            <bitmap
                android:gravity="center"
                android:src="@mipmap/launch_image" />
        </item> -->
    </layer-list>

create colors.xml in res->values and paste code:

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

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

If you've updated your colors.xml (android/app/src/main/res/values/) and both launch_background.xml (android/app/src/main/res/drawable & /drawable-v21) files and it's still not working, make sure your styles.xml (android/app/src/main/res/values/) file points to the color you want like so:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowSplashScreenBackground">@color/yourColor</item>
    </style>
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@color/yourColor</item>
    </style>
</resources>

Splash Screen Color not Changing in Flutter

5 Answers5

Linked