(fix): web debug error - jonbhanson#622

eggp · Nov 22, 2023 · b0ac83d · b0ac83d
1 parent 2cc2d52
commit b0ac83d
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 11 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -3,6 +3,7 @@ import 'package:flutter_native_splash/flutter_native_splash.dart';
 
 void main() {
   WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
+  FlutterNativeSplash.initWeb();
   FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
   runApp(const MyApp());
 }

diff --git a/lib/flutter_native_splash.dart b/lib/flutter_native_splash.dart
@@ -39,6 +39,12 @@ class FlutterNativeSplash {
 
   static WidgetsBinding? _widgetsBinding;
 
+  static void initWeb() {
+    if (kIsWeb) {
+      _channel.invokeMethod('show');
+    }
+  }
+
   // Prevents app from closing splash screen, app layout will be build but not displayed.
   static void preserve({required WidgetsBinding widgetsBinding}) {
     _widgetsBinding = widgetsBinding;

diff --git a/lib/flutter_native_splash_web.dart b/lib/flutter_native_splash_web.dart
@@ -1,8 +1,10 @@
 import 'dart:async';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/services.dart';
-import 'package:flutter_native_splash/remove_splash_from_web.dart';
 import 'package:flutter_web_plugins/flutter_web_plugins.dart';
+
+import 'remove_splash_from_web.dart';
 // In order to *not* need this ignore, consider extracting the "web" version
 // of your plugin as a separate package, instead of inlining it in the same
 // package as the core of your plugin.
@@ -23,20 +25,32 @@ class FlutterNativeSplashWeb {
 
   Future<dynamic> handleMethodCall(MethodCall call) async {
     switch (call.method) {
+      case 'show':
+        try {
+          showSplashWeb();
+        } catch (e) {
+          throw Exception(
+            'Did you forget to run "dart run flutter_native_splash:create"? \n Could not run the JS command showSplashWeb()',
+          );
+        }
+        return;
       case 'remove':
         try {
-          removeSplashFromWeb();
+          if (kDebugMode) {
+            hideSplashWeb();
+          } else {
+            removeSplashFromWeb();
+          }
         } catch (e) {
           throw Exception(
-            'Did you forget to run "dart run flutter_native_splash:create"? \n Could not run the JS command removeSplashFromWeb()',
+            'Did you forget to run "dart run flutter_native_splash:create"? \n Could not run the JS command ${kDebugMode ? 'hideSplashWeb' : 'removeSplashFromWeb'}()${kDebugMode ? '\n\nOriginal error:\n$e' : ''}',
           );
         }
         return;
       default:
         throw PlatformException(
           code: 'Unimplemented',
-          details:
-              "flutter_native_splash for web doesn't implement '${call.method}'",
+          details: "flutter_native_splash for web doesn't implement '${call.method}'",
         );
     }
   }

diff --git a/lib/remove_splash_from_web.dart b/lib/remove_splash_from_web.dart
@@ -3,5 +3,14 @@ library remove_splash_from_web;
 
 import "package:js/js.dart";
 
+/// Defining the removeSplashFromWeb JavaScript function
 @JS("removeSplashFromWeb")
 external void removeSplashFromWeb();
+
+/// Defining the showSplashWeb JavaScript function
+@JS("showSplashWeb")
+external void showSplashWeb();
+
+/// Defining the hideSplashWeb JavaScript function
+@JS("hideSplashWeb")
+external void hideSplashWeb();
diff --git a/lib/templates.dart b/lib/templates.dart
@@ -427,7 +427,7 @@ const String _webCss = '''
         -webkit-font-smoothing: antialiased;
     }
     
-    #splash.remove {
+    #splash.hide {
       /* enable click through when run animation */
       pointer-events: none;
       /* start animation */
@@ -511,13 +511,38 @@ const String _indexHtmlBrandingPicture = '''
 
 const String _webJS = '''
   <script id="splash-screen-script">
-    function removeSplashFromWeb() {
-      const splashElement = document.getElementById("splash");
-      splashElement.classList.add("remove");
+    function showSplashWeb(){
+      const splashElement = document.getElementById('splash');
+      if(splashElement.classList.contains('hide')) {
+        splashElement.style.display = 'block';
+        splashElement.classList.remove('hide');
+      }
+    }
+    
+    function hideSplashWeb(callback){
+      const splashElement = document.getElementById('splash');
+      splashElement.classList.add('hide');
       setTimeout(function () {
-        splashElement.remove();
-        document.getElementById("splash-screen-script")?.remove();
+        splashElement.style.display = 'none';
+      
+        if(typeof callback === 'function') {
+          callback();
+        } 
       }, [FADETIME] /* animation time + wait rendering and others(500ms) */);
     }
+    
+    function removeSplashFromWeb(callback) {
+      hideSplashWeb(() => {
+        const splashElement = document.getElementById('splash');
+        splashElement.remove();
+        
+        document.getElementById('splash-screen-script')?.remove();      
+        document.getElementById('splash-screen-style')?.remove();
+        
+        if(typeof callback === 'function') {
+          callback();
+        } 
+      });
+    }
   </script>
 ''';