How to add or remove Flutter Native Splash 2022

Flutter, Flutter Login App, Flutter UI / UX, UI UX

In this flutter native splash example tutorial, we will learn how to create or add Flutter Native Splash 2022. To add a Flutter native splash we have to use a pub.dev package called flutter_native_splash and it can be removed with a remove keyword.

Prerequisite

This is the 4th tutorial of our Flutter Login App Series.

Watch the previous tutorial about how to use themes in a flutter.

Watch Youtube tutorial

 

Flutter Native Splash Screen

When app runs, white or black screen appears at the start is called Native Splash Screen.

To customize that native splash screen, we have 2 ways. Do it manually or add a plugin called flutter_native_splash.

We are going to setup this package for native splash. Using this package logo and a branding image can be added. There is also an option to add light and dark native splash screen.

How to create Flutter Native Splash Screen

To add a package Run these Commands in Flutter Terminal.

  • flutter clean
  • flutter pub get
  • flutter pub add flutter_native_splash
flutter clean
flutter pub get
flutter pub add flutter_native_splash

Setup & Design Flutter Native Splash

We have to add all the code in the pubspec.yaml file because we have to make changes in the root directories of Android and IOS. Therefore, we cannot make changes in the system using dart files.

First, add flutter_native_splash as a dependency in your pubspec.yaml file.

dependencies:
  flutter_native_splash: ^2.2.8

Don’t forget to flutter pub get.

Customize the following settings and add to your project’s pubspec.yaml file or place in a new file in your root project folder named flutter_native_splash.yaml.

# flutter_native_splash-development.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-development.png
  branding: assets/branding-development.png
  color_dark: "#121212"
  image_dark: assets/logo-development.png
  branding_dark: assets/branding-development.png

  android_12:
    image: assets/logo-development.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-development.png
    icon_background_color_dark: "#121212"

  web: false

# flutter_native_splash-acceptance.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-acceptance.png
  branding: assets/branding-acceptance.png
  color_dark: "#121212"
  image_dark: assets/logo-acceptance.png
  branding_dark: assets/branding-acceptance.png

  android_12:
    image: assets/logo-acceptance.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-acceptance.png
    icon_background_color_dark: "#121212"

  web: false

# flutter_native_splash-production.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-production.png
  branding: assets/branding-production.png
  color_dark: "#121212"
  image_dark: assets/logo-production.png
  branding_dark: assets/branding-production.png

  android_12:
    image: assets/logo-production.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-production.png
    icon_background_color_dark: "#121212"

  web: false

After adding your settings, run the following command in the terminal:

flutter pub run flutter_native_splash:create

When the package finishes running, your splash screen is ready.

To specify the YAML file location just add –path with the command in the terminal:

flutter pub run flutter_native_splash:create --path=path/to/my/file.yaml

How to remove Flutter Native Splash

To remove a flutter native splash, just make sure that all the code that created for this flutter_native_splash is not removed.

Run the Command to remove flutter native splash, afterwards remove the code and package from the system.

Commands are as follows:-

  • flutter pub run flutter_native_splash:remove
  • flutter clean
  • flutter pub get
flutter pub run flutter_native_splash:remove
flutter clean
flutter pub get

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

Source code

COURSES

Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Learn Flutter

1.2 # How to install flutter on android studio 2022 - Flutter Basic Crash Course
2.2 - Add Image in Flutter - Assets Network- Flutter Basic Crash Course 2022

flutter Design

How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
16 - Product Card and Grid Layout, How to create a Grid View in Flutter. How to add Products in GridView Layout. Flutter eCommerce app UI Design
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design
23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

Flutter Backend

33 - How to Setup Firebase - Firebase Basics - Flutter Firebase - Flutter ecommerce app with firebase as backend
38 - How to Sign-in with Google in flutter Firebase, Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend
40 - Flutter Firebase CRUD,  Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend
Access Admin Panel, Premium Tutorials, Live Chat, 50% off Codes, and More on Patreon!
This is default text for notification bar