Splash Screen Color not Changing in Flutter

user_9440524 0
Viewed 1096

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: enter image description here

flutter-android flutter-layout dart flutter splash-screen
4 Answers

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" />
user_91229010

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:

enter image description here

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.

user_93341550

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.

user_83718250 
<?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>
user_183603210
Related