Flutter
Native splash screen in Flutter
Need technical help?
Our experts will get back to you within 24 hours.
Introduction
To create a native splash screen in Flutter without a package, modify the Android and iOS platform files directly. This gives you more control and ensures a smooth native experience. Use the platform's resources (like launch_background.xml for Android and LaunchScreen.storyboard for iOS) to display the splash screen while your app initializes.
For Android
Step 1: Modify AndroidManifest.xml
<application android:theme="@style/LaunchTheme">
Step 2: Define Splash Theme in styles.xml (android/app/src/main/res/values/styles.xml)
<style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowBackground> drawable/launch_background </item >
Step 3: Create launch_background.xml (android/app/src/main/res/drawable/ and create a file called launch_background.xml.)
<layer-list xmlns:android=http://schemas.android.com/apk/res/android>item android:drawable="@color/white" /> //– Background color --><item><bitmap android:High gravity=”center” android:src=“@drawable/splash_logo” /> //– It also has the following item: App logo logo --> </layer-list>
Step 4: Adding Logo
Place your logo image (e.g., splash_logo.png) inside the android/app/src/main/res/drawable/ folder.
For iOS
Step 1: Open LaunchScreen.storyboard
ITo change the background color in Flutter open your project in Xcode go to ios/Runner and then – LaunchScreen.storyboard.
Design the splash screen using Interface Builder that is found on Xcode. We can drag and drop an image view for your logo and set constraints for positioning.
Step 2: Set the Launch Screen in Info.plist
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
Step 3: Add Image Assets
The logo displayed on the first launch is placed into ios/Runner/Assets.xcassets.
Advantages of Native Splash Screens
Faster Load Times: The native splash screens mean they load by the time the application start and thus introduce no wait time to the users.
Platform Consistency: They follow standard Android and iOS designs for the splash screens for a better feel and design for a product.
Seamless Transition: They appear before the flutter engine starts giving a smooth takeoff with the screen shouldering the burden of handling the lagging moments.
Full Customization Control: It is easy to fine-tune concerning the outer appearance and service delivery due to direct access to native code.
No Extra Dependencies: Importing external packages can have compatibility problems and can get rid of native implementation.
How It Is Different from Other Platforms
Android Comparison: Because Flutter works seamlessly well with Android, that android implementation of splash screen will do well in harmony with Flutter.
iOS Comparison: iOS Launch screens are done in the storyboard while for Flutter, some adaptation has to be done to the Flutter engine.React Native Comparison: Different from many other applications, Flutter develops native platform code to use for splash screens meaning no third party APIs are used allowing smoother performance and integration.
Conclusion
The benefits of the native image as a splash screen in Flutter include: fast loading, platform agnostic and customizable. One important thing to note is that while using the React Native, you have to use third-party libraries in order to access native code while in Flutter you have the ability to code for native code directly hence making the whole experience efficient. The self-contained approach reduces the compatibility concerns and walks the process of development.
Ready to transform your business with our technology solutions? Contact Us today to Leverage Our Flutter Expertise.
Flutter
