[Flutter] Splashscreen (native way)

The splash screen is the first screen you see when you start your app.

- you can display your logo for instance

- and while the splash screen is shown,  your application is loaded (like user data, business data...)

In this example we will use flutter_native_splash package.

I- Package: flutter_native_splash (for native splash screen)

In your "pubspec.yaml" file you have to add the correct dependency, here at less version 2.0.5

# Dependencies specify other packages that your package needs in order to work.

# To automatically upgrade your package dependencies to the latest versions

# consider running `flutter pub upgrade --major-versions`. Alternatively,

# dependencies can be manually updated by changing the version numbers below to

# the latest version available on pub.dev. To see which dependencies have newer

# versions available, run `flutter pub outdated`.

dependencies:

flutter:

sdk: flutter

flutter_native_splash: ^2.0.5

hint: Pubspec Assist extension

To automatically add a package to your project, you can use the extension "Pubspec Assist":

In Visual studio Code, install this extension:

Then type CMD+Shift+P / Pubspec assist: Add/update dependencies / type the package name

II- Splash screen configuration

In your 'pubspec.yaml' add splash screen configuration (at the root). Here are the possible properties you can configure for the splash screen:

# to update (in termninal): flutter pub run flutter_native_splash:create

# flutter_native_splash: ^2.0.5

flutter_native_splash:

color: "#42a5f5"

#background_image: "assets/images/dreamsounds.png"

#image: "assets/images/logo.png"

# dark mode

#branding_dark: assets/dart_dark.png

color_dark: "#042a49"

#background_image_dark: "assets/dark-background.png"

#image_dark: assets/splash-invert.png

Dark theme properties

You can also configure the splash screen for dark mode using the 'dark' keywords

(color_dark, image_dark, branding_dark, background_image_dark)

III- output sample