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

Black screen problem before openings app in flutter

Black screen is coming screen before app opening or before splash screen. how to solve it? if the device also be faster it is showing and if the device is slower the problem is showing for lot of time. The following picture show the app icon
enter image description here
When I am clicking the app, the app is showing a black screen for 6 or 8 seconds. The following picture is showing the problem.
enter image description here
After this the onboarding or splahscreen is showing as you can seen in the following picture.
enter image description here

I have searched many time but nothing found.

Tags:

2

Answers


  1. 0

    The black screen before the splash screen in Flutter can be caused by several factors, including the time it takes for the Flutter engine to initialize and load your Dart code.

    For Examples

    1. Set a Background Color in the Launch Theme:
    Ensure that your app has a background color set in the Android launch theme. You can do this by modifying the styles.xml file in the android/app/src/main/res/values directory.

    <!-- res/values/styles.xml -->
<style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>

    Then, create a launch_background.xml file in the android/app/src/main/res/drawable directory:

    <!-- res/drawable/launch_background.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/white"/> <!-- Set your desired background color -->
</layer-list>

    Ensure you have the appropriate color defined in colors.xml:

    <!-- res/values/colors.xml -->
<color name="white">#FFFFFF</color>

    2. Use a Flutter Splash Screen:

    Use a package like flutter_native_splash to create a native splash screen that shows immediately when the app is launched, even before Flutter is initialized.

    Add the dependency to your pubspec.yaml:

    dependencies:
  flutter:
    sdk: flutter
  flutter_native_splash: ^2.0.0+1

    Then configure it in the same file:

    flutter_native_splash:
  color: "#FFFFFF"  # Set your desired splash screen background color
  image: assets/splash.png  # Set your splash screen image

    Run the following command to apply the changes:

    flutter pub run flutter_native_splash:create

    3. Optimize Flutter Initialization:

    Ensure that your Flutter app is not performing heavy operations during startup. Avoid initializing heavy resources in the main() method or in the first screen’s initState() method.

    4. Check for Unnecessary Plugins

    Sometimes, certain plugins can cause delays during startup. Ensure that you are only including necessary plugins and that they are optimized for performance.

    Login or Signup to reply.
  2. 0

    Hack the Flutter

    You probably waiting for an async code in your main() function. That’s why black screen appears before a runApp kicks in. Show just some loading indicator widget for the time of the async code running.

    void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Showing loading widget while awaiting your async code
  runApp(
    const Center(
      child: PlatformActivityIndicator(), // your activity indicator widget
    ),
  );

  // awaiting code here

  runApp(
    const MyApp(),
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search