Roll back web fade as it was a breaking change. Fixes #628. Fixes #627. Fixes #622.

Author: jonbhanson

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [2.3.7] - (2023-Dec-06)
+
+- Roll back web fade as it was a breaking change.  Fixes [#628](https://github.com/jonbhanson/flutter_native_splash/issues/628). Fixes [#627](https://github.com/jonbhanson/flutter_native_splash/issues/627).  Fixes [#622](https://github.com/jonbhanson/flutter_native_splash/issues/622).
+
 ## [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).

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.6
+  flutter_native_splash: ^2.3.7
 ```
 
 Don't forget to `flutter pub get`.
@@ -169,10 +169,6 @@ 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

@@ -61,10 +61,10 @@ packages:
     dependency: transitive
     description:
       name: collection
-      sha256: f092b211a4319e98e5ff58223576de6c2803db36221657b46c82574721240687
+      sha256: ee67cb0715911d28db6bf4af1026078bd6f0128b07a5f66fb2ed94ec6783c09a
       url: "https://pub.dev"
     source: hosted
-    version: "1.17.2"
+    version: "1.18.0"
   convert:
     dependency: transitive
     description:
@@ -124,7 +124,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.3.6"
+    version: "2.3.7"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -187,10 +187,10 @@ packages:
     dependency: transitive
     description:
       name: meta
-      sha256: "3c74dbf8763d36539f114c799d8a2d87343b5067e9d796ca22b5eb8437090ee3"
+      sha256: a6e590c838b18133bb482a2745ad77c5bb7715fb0451209e1a7567d416678b8e
       url: "https://pub.dev"
     source: hosted
-    version: "1.9.1"
+    version: "1.10.0"
   path:
     dependency: transitive
     description:
@@ -232,18 +232,18 @@ packages:
     dependency: transitive
     description:
       name: stack_trace
-      sha256: c3c7d8edb15bee7f0f74debd4b9c5f3c2ea86766fe4178eb2a18eb30a0bdaed5
+      sha256: "73713990125a6d93122541237550ee3352a2d84baad52d375a4cad2eb9b7ce0b"
       url: "https://pub.dev"
     source: hosted
-    version: "1.11.0"
+    version: "1.11.1"
   stream_channel:
     dependency: transitive
     description:
       name: stream_channel
-      sha256: "83615bee9045c1d322bbbd1ba209b7a749c2cbcdcb3fdd1df8eb488b3279c1c8"
+      sha256: ba2aa5d8cc609d96bbb2899c28934f9e1af5cddbd60a827822ea467161eb54e7
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.1"
+    version: "2.1.2"
   string_scanner:
     dependency: transitive
     description:
@@ -264,10 +264,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: "75760ffd7786fffdfb9597c35c5b27eaeec82be8edfb6d71d32651128ed7aab8"
+      sha256: "5c2f730018264d276c20e4f1503fd1308dfbbae39ec8ee63c5236311ac06954b"
       url: "https://pub.dev"
     source: hosted
-    version: "0.6.0"
+    version: "0.6.1"
   typed_data:
     dependency: transitive
     description:
@@ -296,10 +296,10 @@ packages:
     dependency: transitive
     description:
       name: web
-      sha256: dc8ccd225a2005c1be616fe02951e2e342092edf968cf0844220383757ef8f10
+      sha256: afe077240a270dcfd2aafe77602b4113645af95d0ad31128cc02bce5ac5d5152
       url: "https://pub.dev"
     source: hosted
-    version: "0.1.4-beta"
+    version: "0.3.0"
   xml:
     dependency: transitive
     description:
@@ -317,5 +317,5 @@ packages:
     source: hosted
     version: "3.1.2"
 sdks:
-  dart: ">=3.1.0-185.0.dev <4.0.0"
+  dart: ">=3.2.0-194.0.dev <4.0.0"
   flutter: ">=2.5.0"

example/pubspec.yaml

@@ -230,10 +230,6 @@ 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:

lib/cli_commands.dart

@@ -119,7 +119,6 @@ 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;
@@ -215,7 +214,6 @@ 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...');
@@ -457,7 +455,6 @@ 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,
@@ -505,6 +502,5 @@ class _Parameter {
     plistFiles,
     web,
     webImageMode,
-    fadeTimeMs,
   ];
 }

lib/templates.dart

@@ -407,34 +407,19 @@ const String _iOSBrandingRightBottomConstraints = '''
 /// Web related templates
 const String _webCss = '''
   <style id="splash-screen-style">
-    .flutter-loader {
-      z-index: 999999;
+    html {
+      height: 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;
+
+    body {
+      margin: 0;
+      min-height: 100%;
+      background-color: [LIGHTBACKGROUNDCOLOR];
+      [LIGHTBACKGROUNDIMAGE]
+      background-size: 100% 100%;
     }
 
-    #splash .center {
+    .center {
       margin: 0;
       position: absolute;
       top: 50%;
@@ -443,38 +428,38 @@ const String _webCss = '''
       transform: translate(-50%, -50%);
     }
 
-    #splash .contain {
+    .contain {
       display:block;
       width:100%; height:100%;
       object-fit: contain;
     }
 
-    #splash .stretch {
+    .stretch {
       display:block;
       width:100%; height:100%;
     }
 
-    #splash .cover {
+    .cover {
       display:block;
       width:100%; height:100%;
       object-fit: cover;
     }
 
-    #splash .bottom {
+    .bottom {
       position: absolute;
       bottom: 0;
       left: 50%;
       -ms-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
     }
 
-    #splash .bottomLeft {
+    .bottomLeft {
       position: absolute;
       bottom: 0;
       left: 0;
     }
 
-    #splash .bottomRight {
+    .bottomRight {
       position: absolute;
       bottom: 0;
       right: 0;
@@ -484,7 +469,7 @@ const String _webCss = '''
 const String _webCssDark = '''
 
     @media (prefers-color-scheme: dark) {
-      #splash {
+      body {
         background-color: [DARKBACKGROUNDCOLOR];
         [DARKBACKGROUNDIMAGE]
       }
@@ -493,13 +478,11 @@ const String _webCssDark = '''
 
 // XML's insertBefore can't have a newline at the end:
 const String _indexHtmlPicture = '''
-  <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>''';
+  <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>''';
 
 // XML's insertBefore can't have a newline at the end:
 const String _indexHtmlBrandingPicture = '''
@@ -512,12 +495,9 @@ const String _indexHtmlBrandingPicture = '''
 const String _webJS = '''
   <script id="splash-screen-script">
     function removeSplashFromWeb() {
-      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) */);
+      document.getElementById("splash")?.remove();
+      document.getElementById("splash-branding")?.remove();
+      document.body.style.background = "transparent";
     }
   </script>
 ''';

lib/web.dart

@@ -20,7 +20,6 @@ void _createWebSplash({
   required String brandingMode,
   required String? backgroundImage,
   required String? darkBackgroundImage,
-  required int fadeTimeMs,
 }) {
   if (!File(_webIndex).existsSync()) {
     print('[Web] $_webIndex not found.  Skipping Web.');
@@ -167,9 +166,8 @@ void _createWebSplash({
     darkBackgroundImage: darkBackgroundImage,
     backgroundImage: backgroundImage,
     hasDarkImage: darkBackgroundImage != null,
-    fadeTimeMs: fadeTimeMs,
   );
-  _createSplashJs(fadeTimeMs: fadeTimeMs);
+  _createSplashJs();
   _updateHtml(
     imageMode: imageMode,
     imagePath: imagePath,
@@ -262,13 +260,10 @@ void _createSplashCss({
   required String? backgroundImage,
   required String? darkBackgroundImage,
   required bool hasDarkImage,
-  required int fadeTimeMs,
 }) {
   print('[Web] Creating CSS');
   color ??= 'ffffff';
-  var cssContent = _webCss
-      .replaceFirst('[LIGHTBACKGROUNDCOLOR]', '#$color')
-      .replaceFirst('[FADETIME]', "${fadeTimeMs / 1000}s");
+  var cssContent = _webCss.replaceFirst('[LIGHTBACKGROUNDCOLOR]', '#$color');
   if (darkColor != null || darkBackgroundImage != null || hasDarkImage) {
     darkColor ??= '000000';
     cssContent += _webCssDark.replaceFirst(
@@ -317,7 +312,7 @@ void _createSplashCss({
   webIndex.writeAsStringSync(document.outerHtml);
 }
 
-void _createSplashJs({required int fadeTimeMs}) {
+void _createSplashJs() {
   // Add js as an inline script in head tag
   final webIndex = File(_webIndex);
   final document = html_parser.parse(webIndex.readAsStringSync());
@@ -326,9 +321,7 @@ void _createSplashJs({required int fadeTimeMs}) {
   document.head
     ?..querySelector('script#splash-screen-script')?.remove()
     ..append(
-      html_parser.parseFragment(
-          _webJS.replaceFirst("[FADETIME]", (fadeTimeMs + 500).toString()),
-          container: ''),
+      html_parser.parseFragment(_webJS, container: ''),
     );
 
   // Write the updated index.html
@@ -392,8 +385,7 @@ void _updateHtml({
   // Update branding image
   document.querySelector('picture#splash-branding')?.remove();
   if (brandingImagePath != null) {
-    var div = document.querySelector('div#splash');
-    div?.insertBefore(
+    document.body?.insertBefore(
       html_parser.parseFragment(
         '\n${_indexHtmlBrandingPicture.replaceAll(
               '[BRANDINGMODE]',
@@ -404,7 +396,7 @@ void _updateHtml({
             )}',
         container: '',
       ),
-      div.firstChild,
+      document.body?.firstChild,
     );
   }
 

pubspec.yaml

@@ -1,7 +1,7 @@
 name: flutter_native_splash
 description: Customize Flutter's default white native splash screen with
   background color and splash image. Supports dark mode, full screen, and more.
-version: 2.3.6
+version: 2.3.7
 repository: https://github.com/jonbhanson/flutter_native_splash
 issue_tracker: https://github.com/jonbhanson/flutter_native_splash/issues