Flutter remove native splash screen

by

How to Remove the Native Splash Screen in Flutter

In Flutter, the native splash screen is shown before the Flutter framework initializes. It is provided by the underlying platform (Android or iOS) and can be customized to some extent. If you want to remove the native splash screen and display your own custom screen, you can follow these steps:

  1. Step 1: Remove the default native splash screen of each platform:
    • Android: In your Android project, find the launch_background.xml file located under res/drawable folder. Remove or modify this XML file to customize your splash screen.
    • iOS: In your iOS project, find the LaunchScreen.storyboard file. Delete or modify this file to customize your splash screen.

    Note: Make sure to backup these files in case you want to revert back to the original splash screen.

  2. Step 2: Create a custom splash screen widget:

    3. In your Flutter code, create a new widget that will serve as your custom splash screen. This widget can be anything, such as an image, a video, or an animated screen. Here’s an example:

    “`dart
    class CustomSplashScreen extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Container(
    // Your custom splash screen content goes here
    child: Image.asset(‘assets/images/splash_screen.png’),
    );
    }
    }
    “`

  3. Step 3: Replace the default splash screen with your custom splash screen:

    4. In your main.dart file, modify the void main() function to use your custom splash screen widget as the initial screen. Here’s an example:

    “`dart
    void main() {
    runApp(MyApp());
    }

    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
    title: ‘My App’,
    home: CustomSplashScreen(), // Use your custom splash screen widget here
    );
    }
    }
    “`

    By following these steps, you have removed the native splash screen and replaced it with your own custom splash screen in the Flutter app.

Remember to test your app on both Android and iOS devices to ensure that the changes are reflected correctly.

Leave a comment