Customization & Changes

Change Splash Screen

1. Add the flutter_native_splash Package
1. Open your pubspec.yaml file.
2. Add the following dependency:
Copy code
dev_dependencies:
flutter_native_splash: ^2.2.9
3. Run the following command to install the package:
Copy code
flutter pub get
2. Configure the Splash Screen
In your pubspec.yaml file, configure the splash screen by adding the flutter_native_splash section. Here's an example configuration:
Copy code
flutter_native_splash:
color: "#FFFFFF" # Background color of the splash screen
image: assets/logo/app_logo.png # Path to your splash screen image
android: true # Enable for Android
ios: true # Enable for iOS
web: true # Enable for Web (optional)
android_gravity: center # Position of the image (e.g., center, top, bottom)
ios_content_mode: scaleAspectFill # Content mode for iOS (e.g., scaleAspectFill, scaleToFill)
web_image_mode: center # Position of the image for Web
fullscreen: true # Enable fullscreen splash screen
  • Replace assets/logo/app_logo.png with the path to your splash screen image.
  • Adjust the color (#FFFFFF) and other properties as needed.
3. Generate the Splash Screen
Run the following command to apply the splash screen configuration:
Copy code
flutter pub run flutter_native_splash:create
This command generates platform-specific splash screens for Android, iOS, and optionally for Web.
4. Verify the Splash Screen
For Android:
  • Check the generated files in:
Copy code
android/app/src/main/res/drawable/launch_background.xml
For iOS:
  • Check the generated files in:
Copy code
ios/Runner/Assets.xcassets/LaunchImage.imageset/