Flutter, Uncategorized

How to make a splash screen for flutter app by using flutter_native_splash package

A splash screen, also known as a launch screen or startup screen, is a brief graphical or animated screen that appears when you open a mobile app before the main content or user interface becomes visible. Here are some reasons why developers include a splash screen in their mobile apps:

  1. Branding: Splash screens often display the app’s logo or name prominently. This helps in branding and creating a consistent visual identity for the app. It’s an opportunity to make a strong first impression and reinforce the app’s identity in the user’s mind.
  2. Loading Indication: Apps may take a few seconds to load their content and data when they start. A splash screen can serve as a loading indicator, letting users know that the app is launching and not frozen. This can improve the user experience by managing expectations and reducing frustration.
  3. Professionalism: A well-designed splash screen can give the impression that the app is professionally developed and polished. It can signal to users that the app is worth their time and attention.
  4. Smooth Transition: Splash screens can provide a smooth transition from the app icon tap to the main user interface. Instead of abruptly presenting the app’s content, it eases users into the experience, making the app feel more responsive and less jarring.
  5. Legal and Compliance Information: In some cases, splash screens may display legal disclaimers, terms of service, or privacy policies that users need to agree to before using the app. This ensures that the app complies with legal requirements and protects the developer from potential legal issues.
  6. Promotional Content: Splash screens can also be used for promotional purposes. Developers may use them to highlight new features, promotions, or updates, encouraging users to explore the app further.
  7. User Engagement: By displaying a brief message or tip on the splash screen, developers can provide users with helpful information or instructions on how to use the app effectively. This can enhance the user onboarding experience.
  8. Platform Guidelines: Some mobile platforms and app stores recommend or require the use of splash screens. Adhering to platform guidelines can improve the chances of app approval and a smooth user experience on various devices.

To create a splash screen for a Flutter app, we can use the flutter_native_splash package, you can follow these steps:

Install the Package

Run this command in Terminal

flutter pub add flutter_native_splash

This command will add a line like this to your package’s pubspec.yaml

dependencies:
  flutter_native_splash: ^2.3.2

Configure the pubspec.yaml file

Add below code into pubspec.yaml, the color parameter is the background color of the splash screen, and the image is the logo will be shown on the splash screen.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

  flutter_screenutil: ^5.6.1
  http: ^0.13.5
  ......

# code to be added begin
flutter_native_splash:
  color: "#FFFFFF"
  image: assets/images/logo.png
# code to be added end

dev_dependencies:

please notice that the assets/images/logo.png has to be exists in your project folder and has been configured in assets section of pubspec.yaml

assets:
  - assets/images/

Run command to generate the splash screen

Run this command in terminal

dart run flutter_native_splash:create

Then the splash screen has been generated.

Leave a Reply

Your email address will not be published. Required fields are marked *