migrating dart:html to package:web (#507)

example/pubspec.lock

@@ -78,7 +78,7 @@ packages:
       path: ".."
       path: ".."
       relative: true
       relative: true
     source: path
     source: path
-    version: "8.2.3"
+    version: "8.2.5"
   leak_tracker:
   leak_tracker:
     dependency: transitive
     dependency: transitive
     description:
     description:
@@ -204,6 +204,14 @@ packages:
       url: "https://pub.dev"
       url: "https://pub.dev"
     source: hosted
     source: hosted
     version: "13.0.0"
     version: "13.0.0"
+  web:
+    dependency: transitive
+    description:
+      name: web
+      sha256: "97da13628db363c635202ad97068d47c5b8aa555808e7a9411963c533b449b27"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.5.1"
 sdks:
 sdks:
-  dart: ">=3.2.0-0 <4.0.0"
+  dart: ">=3.3.0 <4.0.0"
   flutter: ">=1.10.0"
   flutter: ">=1.10.0"

lib/fluttertoast_web.dart

 import 'dart:async';
 import 'dart:async';
-import 'dart:html' as html;
+import 'package:web/web.dart' as web;
 import 'dart:ui_web' as ui;
 import 'dart:ui_web' as ui;
 import 'package:flutter/services.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_web_plugins/flutter_web_plugins.dart';
 import 'package:flutter_web_plugins/flutter_web_plugins.dart';
@@ -69,27 +69,29 @@ class FluttertoastWebPlugin {
   /// [injectCssAndJSLibraries] which add the JS and CSS files into DOM
   /// [injectCssAndJSLibraries] which add the JS and CSS files into DOM
   Future<void> injectCssAndJSLibraries() async {
   Future<void> injectCssAndJSLibraries() async {
     final List<Future<void>> loading = <Future<void>>[];
     final List<Future<void>> loading = <Future<void>>[];
-    final List<html.HtmlElement> tags = <html.HtmlElement>[];
+    final List<web.HTMLElement> tags = <web.HTMLElement>[];
 
 
     final cssUrl = ui.assetManager.getAssetUrl(
     final cssUrl = ui.assetManager.getAssetUrl(
       'packages/fluttertoast/assets/toastify.css',
       'packages/fluttertoast/assets/toastify.css',
     );
     );
-    final html.LinkElement css = html.LinkElement()
+    final web.HTMLLinkElement css = web.HTMLLinkElement()
       ..id = 'toast-css'
       ..id = 'toast-css'
-      ..attributes = {"rel": "stylesheet"}
+      ..setAttribute("rel", "stylesheet")
       ..href = cssUrl;
       ..href = cssUrl;
     tags.add(css);
     tags.add(css);
-    
+
     final jsUrl = ui.assetManager.getAssetUrl(
     final jsUrl = ui.assetManager.getAssetUrl(
       'packages/fluttertoast/assets/toastify.js',
       'packages/fluttertoast/assets/toastify.js',
     );
     );
-    final html.ScriptElement script = html.ScriptElement()
+    final web.HTMLScriptElement script = web.HTMLScriptElement()
       ..async = true
       ..async = true
       // ..defer = true
       // ..defer = true
       ..src = jsUrl;
       ..src = jsUrl;
     loading.add(script.onLoad.first);
     loading.add(script.onLoad.first);
     tags.add(script);
     tags.add(script);
-    html.querySelector('head')!.children.addAll(tags);
+    for (final web.HTMLElement tag in tags) {
+      web.document.querySelector('head')!.append(tag);
+    }
 
 
     await Future.wait(loading);
     await Future.wait(loading);
   }
   }
@@ -105,7 +107,7 @@ class FluttertoastWebPlugin {
       bool showClose = false,
       bool showClose = false,
       int? textColor}) {
       int? textColor}) {
     String m = msg.replaceAll("'", "\\'").replaceAll("\n", "<br />");
     String m = msg.replaceAll("'", "\\'").replaceAll("\n", "<br />");
-    html.Element? ele = html.querySelector("#toast-content");
+    web.Element? ele = web.document.querySelector("#toast-content");
     String content = """
     String content = """
           var toastElement = Toastify({
           var toastElement = Toastify({
             text: '$m',
             text: '$m',
@@ -117,18 +119,19 @@ class FluttertoastWebPlugin {
           });
           });
           toastElement.showToast();
           toastElement.showToast();
         """;
         """;
-    if (html.querySelector("#toast-content") != null) {
+    if (web.document.querySelector("#toast-content") != null) {
       ele!.remove();
       ele!.remove();
     }
     }
-    final html.ScriptElement scriptText = html.ScriptElement()
+    final web.HTMLScriptElement scriptText = web.HTMLScriptElement()
       ..id = "toast-content"
       ..id = "toast-content"
-      ..innerHtml = content;
-    html.querySelector('head')!.children.add(scriptText);
+      ..innerHTML = content;
+    web.document.body!.append(scriptText);
     if (textColor != null) {
     if (textColor != null) {
-      html.Element toast = html.querySelector('.toastify')!;
+      web.Element toast = web.document.querySelector('.toastify')!;
       String tcRadix = textColor.toRadixString(16);
       String tcRadix = textColor.toRadixString(16);
       final String tC = "${tcRadix.substring(2)}${tcRadix.substring(0, 2)}";
       final String tC = "${tcRadix.substring(2)}${tcRadix.substring(0, 2)}";
-      toast.style.setProperty('color', "#$tC");
+      final style = toast.getAttribute('style') ?? '';
+      toast.setAttribute('style', '$style color: #$tC;');
     }
     }
   }
   }
 }
 }

pubspec.lock

@@ -56,6 +56,14 @@ packages:
       url: "https://pub.dev"
       url: "https://pub.dev"
     source: hosted
     source: hosted
     version: "2.1.4"
     version: "2.1.4"
+  web:
+    dependency: "direct main"
+    description:
+      name: web
+      sha256: "97da13628db363c635202ad97068d47c5b8aa555808e7a9411963c533b449b27"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.5.1"
 sdks:
 sdks:
-  dart: ">=3.2.0-0 <4.0.0"
+  dart: ">=3.3.0 <4.0.0"
   flutter: ">=1.10.0"
   flutter: ">=1.10.0"

pubspec.yaml

@@ -13,6 +13,7 @@ dependencies:
     sdk: flutter
     sdk: flutter
   flutter_web_plugins:
   flutter_web_plugins:
     sdk: flutter
     sdk: flutter
+  web: ^0.5.1
 
 
 flutter:
 flutter:
   plugin:
   plugin: