Add fade between splash and app on web. Thanks eggp for the suggestion and example code. Closes #608. Add check of parameter names to catch user typos in the parameters.

Author: jonbhanson

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [2.3.6] - (2023-Nov-20)
+
+- Add fade between splash and app on web.  Thanks [eggp](https://github.com/eggp) for the suggestion and example code.  Closes [#608](https://github.com/jonbhanson/flutter_native_splash/issues/608).
+- Add check of parameter names to catch user typos in the parameters.
+
 ## [2.3.5] - (2023-Oct-29)
 
 - Remove white flash on web.  Thanks [eggp](https://github.com/eggp) for pointing out the problem and solution.  Closes [#607](https://github.com/jonbhanson/flutter_native_splash/issues/607).

README.md

@@ -21,7 +21,7 @@ First, add `flutter_native_splash` as a dependency in your pubspec.yaml file.
 
 ```yaml
 dependencies:
-  flutter_native_splash: ^2.3.5
+  flutter_native_splash: ^2.3.6
 ```
 
 Don't forget to `flutter pub get`.
@@ -169,6 +169,10 @@ flutter_native_splash:
   #       SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom, SystemUiOverlay.top], );
   #fullscreen: true
 
+  # On web, the splash screen fades out in 250ms.  This fade delay can be adjusted by changing
+  # the web_splash_fade_time_ms parameter.
+  #web_splash_fade_time_ms: 250
+  
   # If you have changed the name(s) of your info.plist file(s), you can specify the filename(s)
   # with the info_plist_files parameter.  Remove only the # characters in the three lines below,
   # do not remove any spaces:

example/pubspec.lock

@@ -1,6 +1,14 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  ansicolor:
+    dependency: transitive
+    description:
+      name: ansicolor
+      sha256: "8bf17a8ff6ea17499e40a2d2542c2f481cd7615760c6d34065cb22bfd22e6880"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.2"
   archive:
     dependency: transitive
     description:
@@ -116,7 +124,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.3.5"
+    version: "2.3.6"
   flutter_test:
     dependency: "direct dev"
     description: flutter

example/pubspec.yaml

@@ -100,6 +100,10 @@ flutter_native_splash:
   # To restore Flutter's default white splash screen, run the following command in the terminal:
   # dart run flutter_native_splash:remove
 
+  # IMPORTANT NOTE: These parameter do not affect the configuration of Android 12 and later, which
+  # handle splash screens differently that prior versions of Android.  Android 12 and later must be
+  # configured specifically in the android_12 section below.
+
   # color or background_image is the only required parameter.  Use color to set the background
   # of your splash screen to a solid color.  Use background_image to set the background of your
   # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
@@ -180,8 +184,8 @@ flutter_native_splash:
   #image_dark_android: assets/splash-invert-android.png
   #image_ios: assets/splash-ios.png
   #image_dark_ios: assets/splash-invert-ios.png
-  #image_web: assets/splash-web.png
-  #image_dark_web: assets/splash-invert-web.png
+  #image_web: assets/splash-web.gif
+  #image_dark_web: assets/splash-invert-web.gif
   #background_image_android: "assets/background-android.png"
   #background_image_dark_android: "assets/dark-background-android.png"
   #background_image_ios: "assets/background-ios.png"
@@ -192,6 +196,8 @@ flutter_native_splash:
   #branding_dark_android: assets/dart_dark-android.png
   #branding_ios: assets/brand-ios.png
   #branding_dark_ios: assets/dart_dark-ios.png
+  #branding_web: assets/brand-web.gif
+  #branding_dark_web: assets/dart_dark-web.gif
 
   # The position of the splash image can be set with android_gravity, ios_content_mode, and
   # web_image_mode parameters.  All default to center.
@@ -221,8 +227,12 @@ flutter_native_splash:
   # NOTE: Unlike Android, iOS will not automatically show the notification bar when the app loads.
   #       To show the notification bar, add the following code to your Flutter app:
   #       WidgetsFlutterBinding.ensureInitialized();
-  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
-  fullscreen: true
+  #       SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom, SystemUiOverlay.top], );
+  #fullscreen: true
+
+  # On web, the splash screen fades out in 250ms.  This fade delay can be adjusted by changing
+  # the web_splash_fade_time_ms parameter.
+  #web_splash_fade_time_ms: 250
 
   # If you have changed the name(s) of your info.plist file(s), you can specify the filename(s)
   # with the info_plist_files parameter.  Remove only the # characters in the three lines below,

lib/cli_commands.dart

@@ -5,6 +5,7 @@ library flutter_native_splash_cli;
 
 import 'dart:isolate';
 
+import 'package:ansicolor/ansicolor.dart';
 import 'package:html/parser.dart' as html_parser;
 import 'package:image/image.dart';
 import 'package:meta/meta.dart';
@@ -118,6 +119,7 @@ void createSplashByConfig(Map<String, dynamic> config) {
   final String iosContentMode =
       config[_Parameter.iosContentMode] as String? ?? 'center';
   final webImageMode = config[_Parameter.webImageMode] as String? ?? 'center';
+  final fadeTimeMs = config[_Parameter.fadeTimeMs] as int? ?? 250;
   String? android12Image;
   String? android12DarkImage;
   String? android12IconBackgroundColor;
@@ -213,6 +215,7 @@ void createSplashByConfig(Map<String, dynamic> config) {
         darkColor: darkColorWeb ?? darkColor,
         imageMode: webImageMode,
         brandingMode: brandingGravity,
+        fadeTimeMs: fadeTimeMs,
       );
     } else {
       print('Web folder not found, skipping web splash update...');
@@ -370,6 +373,13 @@ Map<String, dynamic> getConfig({
 Map<String, dynamic> _yamlToMap(YamlMap yamlMap) {
   final Map<String, dynamic> map = <String, dynamic>{};
   for (final MapEntry<dynamic, dynamic> entry in yamlMap.entries) {
+    if (!_Parameter.all.contains(entry.key)) {
+      AnsiPen pen = AnsiPen()..red(bold: true);
+      print(pen("⚠️ The parameter \"${entry.key}\" was found "
+          "in your flutter_native_splash config, but \"${entry.key}\" "
+          "is not a valid flutter_native_splash parameter."));
+      exit(0);
+    }
     if (entry.value is YamlList) {
       final list = <String>[];
       for (final value in entry.value as YamlList) {
@@ -447,4 +457,54 @@ class _Parameter {
   static const plistFiles = 'info_plist_files';
   static const web = 'web';
   static const webImageMode = 'web_image_mode';
+  static const fadeTimeMs = 'web_splash_fade_time_ms';
+
+  static List<String> all = [
+    android,
+    android12Section,
+    androidScreenOrientation,
+    backgroundImage,
+    backgroundImageAndroid,
+    backgroundImageIos,
+    backgroundImageWeb,
+    brandingDarkImage,
+    brandingDarkImageAndroid,
+    brandingDarkImageIos,
+    brandingDarkImageWeb,
+    brandingGravity,
+    brandingImage,
+    brandingImageAndroid,
+    brandingImageIos,
+    brandingImageWeb,
+    color,
+    colorAndroid,
+    colorIos,
+    colorWeb,
+    darkBackgroundImage,
+    darkBackgroundImageAndroid,
+    darkBackgroundImageIos,
+    darkBackgroundImageWeb,
+    darkColor,
+    darkColorAndroid,
+    darkColorIos,
+    darkColorWeb,
+    darkImage,
+    darkImageAndroid,
+    darkImageIos,
+    darkImageWeb,
+    fullscreen,
+    gravity,
+    iconBackgroundColor,
+    iconBackgroundColorDark,
+    image,
+    imageAndroid,
+    imageIos,
+    imageWeb,
+    ios,
+    iosContentMode,
+    plistFiles,
+    web,
+    webImageMode,
+    fadeTimeMs,
+  ];
 }

lib/templates.dart

@@ -407,19 +407,34 @@ const String _iOSBrandingRightBottomConstraints = '''
 /// Web related templates
 const String _webCss = '''
   <style id="splash-screen-style">
-    html {
-      height: 100%
+    .flutter-loader {
+      z-index: 999999;
     }
-
-    body {
-      margin: 0;
-      min-height: 100%;
-      background-color: [LIGHTBACKGROUNDCOLOR];
-      [LIGHTBACKGROUNDIMAGE]
-      background-size: 100% 100%;
+    
+    #splash {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+        z-index: 999998;
+        opacity: 1;
+        /* animation type and duration */
+        transition: opacity [FADETIME];
+        background-color: [LIGHTBACKGROUNDCOLOR];
+        [LIGHTBACKGROUNDIMAGE]
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+    }
+    
+    #splash.remove {
+      /* enable click through when run animation */
+      pointer-events: none;
+      /* start animation */
+      opacity: 0;
     }
 
-    .center {
+    #splash .center {
       margin: 0;
       position: absolute;
       top: 50%;
@@ -428,38 +443,38 @@ const String _webCss = '''
       transform: translate(-50%, -50%);
     }
 
-    .contain {
+    #splash .contain {
       display:block;
       width:100%; height:100%;
       object-fit: contain;
     }
 
-    .stretch {
+    #splash .stretch {
       display:block;
       width:100%; height:100%;
     }
 
-    .cover {
+    #splash .cover {
       display:block;
       width:100%; height:100%;
       object-fit: cover;
     }
 
-    .bottom {
+    #splash .bottom {
       position: absolute;
       bottom: 0;
       left: 50%;
       -ms-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
     }
 
-    .bottomLeft {
+    #splash .bottomLeft {
       position: absolute;
       bottom: 0;
       left: 0;
     }
 
-    .bottomRight {
+    #splash .bottomRight {
       position: absolute;
       bottom: 0;
       right: 0;
@@ -469,7 +484,7 @@ const String _webCss = '''
 const String _webCssDark = '''
 
     @media (prefers-color-scheme: dark) {
-      body {
+      #splash {
         background-color: [DARKBACKGROUNDCOLOR];
         [DARKBACKGROUNDIMAGE]
       }
@@ -478,11 +493,13 @@ const String _webCssDark = '''
 
 // XML's insertBefore can't have a newline at the end:
 const String _indexHtmlPicture = '''
-  <picture id="splash">
-      <source srcset="splash/img/light-1x.[IMAGEEXTENSION] 1x, splash/img/light-2x.[IMAGEEXTENSION] 2x, splash/img/light-3x.[IMAGEEXTENSION] 3x, splash/img/light-4x.[IMAGEEXTENSION] 4x" media="(prefers-color-scheme: light)">
-      <source srcset="splash/img/dark-1x.[IMAGEEXTENSION] 1x, splash/img/dark-2x.[IMAGEEXTENSION] 2x, splash/img/dark-3x.[IMAGEEXTENSION] 3x, splash/img/dark-4x.[IMAGEEXTENSION] 4x" media="(prefers-color-scheme: dark)">
-      <img class="[IMAGEMODE]" aria-hidden="true" src="splash/img/light-1x.[IMAGEEXTENSION]" alt=""/>
-  </picture>''';
+  <div id="splash">
+    <picture>
+        <source srcset="splash/img/light-1x.[IMAGEEXTENSION] 1x, splash/img/light-2x.[IMAGEEXTENSION] 2x, splash/img/light-3x.[IMAGEEXTENSION] 3x, splash/img/light-4x.[IMAGEEXTENSION] 4x" media="(prefers-color-scheme: light)">
+        <source srcset="splash/img/dark-1x.[IMAGEEXTENSION] 1x, splash/img/dark-2x.[IMAGEEXTENSION] 2x, splash/img/dark-3x.[IMAGEEXTENSION] 3x, splash/img/dark-4x.[IMAGEEXTENSION] 4x" media="(prefers-color-scheme: dark)">
+        <img class="[IMAGEMODE]" aria-hidden="true" src="splash/img/light-1x.[IMAGEEXTENSION]" alt=""/>
+    </picture>
+  </div>''';
 
 // XML's insertBefore can't have a newline at the end:
 const String _indexHtmlBrandingPicture = '''
@@ -495,9 +512,12 @@ const String _indexHtmlBrandingPicture = '''
 const String _webJS = '''
   <script id="splash-screen-script">
     function removeSplashFromWeb() {
-      document.getElementById("splash")?.remove();
-      document.getElementById("splash-branding")?.remove();
-      document.body.style.background = "transparent";
+      const splashElement = document.getElementById("splash");
+      splashElement.classList.add("remove");
+      setTimeout(function () {
+        splashElement.remove();
+        document.getElementById("splash-screen-script")?.remove();
+      }, [FADETIME] /* animation time + wait rendering and others(500ms) */);
     }
   </script>
 ''';