fix the render will no stop when render gif using flutter html bug[780]

Author: jiangxiaoqiang

lib/image_render.dart

@@ -12,9 +12,12 @@ typedef ImageSourceMatcher = bool Function(
   dom.Element? element,
 );
 
-final _dataUriFormat = RegExp("^(?<scheme>data):(?<mime>image\/[\\w\+\-\.]+)(?<encoding>;base64)?\,(?<data>.*)");
+final _dataUriFormat = RegExp(
+    "^(?<scheme>data):(?<mime>image\/[\\w\+\-\.]+)(?<encoding>;base64)?\,(?<data>.*)");
 
-ImageSourceMatcher dataUriMatcher({String? encoding = 'base64', String? mime}) => (attributes, element) {
+ImageSourceMatcher dataUriMatcher(
+        {String? encoding = 'base64', String? mime}) =>
+    (attributes, element) {
       if (_src(attributes) == null) return false;
       final dataUri = _dataUriFormat.firstMatch(_src(attributes)!);
       return dataUri != null &&
@@ -62,7 +65,8 @@ ImageRender base64ImageRender() => (context, attributes, element) {
         decodedImage,
         frameBuilder: (ctx, child, frame, _) {
           if (frame == null) {
-            return Text(_alt(attributes) ?? "", style: context.style.generateTextStyle());
+            return Text(_alt(attributes) ?? "",
+                style: context.style.generateTextStyle());
           }
           return child;
         },
@@ -76,18 +80,18 @@ ImageRender assetImageRender({
     (context, attributes, element) {
       final assetPath = _src(attributes)!.replaceFirst('asset:', '');
       if (_src(attributes)!.endsWith(".svg")) {
-        return SvgPicture.asset(
-          assetPath,
-          width: width ?? _width(attributes),
-          height: height ?? _height(attributes));
+        return SvgPicture.asset(assetPath,
+            width: width ?? _width(attributes),
+            height: height ?? _height(attributes));
       } else {
         return Image.asset(
           assetPath,
           width: width ?? _width(attributes),
           height: height ?? _height(attributes),
           frameBuilder: (ctx, child, frame, _) {
             if (frame == null) {
-              return Text(_alt(attributes) ?? "", style: context.style.generateTextStyle());
+              return Text(_alt(attributes) ?? "",
+                  style: context.style.generateTextStyle());
             }
             return child;
           },
@@ -127,28 +131,33 @@ ImageRender networkImageRender({
         }
       });
 
-      image.image.resolve(ImageConfiguration()).addListener(
-            ImageStreamListener((ImageInfo image, bool synchronousCall) {
-              var myImage = image.image;
-              Size size = Size(myImage.width.toDouble(), myImage.height.toDouble());
-              if (!completer.isCompleted) {
-                completer.complete(size);
-              }
-            }, onError: (object, stacktrace) {
-              if (!completer.isCompleted) {
-                completer.completeError(object);
-              }
-            }),
-          );
+      var listener =
+          ImageStreamListener((ImageInfo image, bool synchronousCall) {
+        var myImage = image.image;
+        Size size = Size(myImage.width.toDouble(), myImage.height.toDouble());
+        if (!completer.isCompleted) {
+          completer.complete(size);
+        }
+      }, onError: (object, stacktrace) {
+        if (!completer.isCompleted) {
+          completer.completeError(object);
+        }
+      });
+
+      image.image.resolve(ImageConfiguration()).addListener(listener);
       return FutureBuilder<Size>(
         future: completer.future,
         builder: (BuildContext buildContext, AsyncSnapshot<Size> snapshot) {
+          if (completer.isCompleted) {
+            image.image.resolve(ImageConfiguration()).removeListener(listener);
+          }
           if (snapshot.hasData) {
             return Container(
               constraints: BoxConstraints(
-                maxWidth: width ?? _width(attributes) ?? snapshot.data!.width,
-                maxHeight: (width ?? _width(attributes) ?? snapshot.data!.width) / _aspectRatio(attributes, snapshot)
-              ),
+                  maxWidth: width ?? _width(attributes) ?? snapshot.data!.width,
+                  maxHeight:
+                      (width ?? _width(attributes) ?? snapshot.data!.width) /
+                          _aspectRatio(attributes, snapshot)),
               child: AspectRatio(
                 aspectRatio: _aspectRatio(attributes, snapshot),
                 child: Image.network(
@@ -159,7 +168,8 @@ ImageRender networkImageRender({
                   frameBuilder: (ctx, child, frame, _) {
                     if (frame == null) {
                       return altWidget?.call(_alt(attributes)) ??
-                          Text(_alt(attributes) ?? "", style: context.style.generateTextStyle());
+                          Text(_alt(attributes) ?? "",
+                              style: context.style.generateTextStyle());
                     }
                     return child;
                   },
@@ -168,7 +178,8 @@ ImageRender networkImageRender({
             );
           } else if (snapshot.hasError) {
             return altWidget?.call(_alt(attributes)) ??
-                Text(_alt(attributes) ?? "", style: context.style.generateTextStyle());
+                Text(_alt(attributes) ?? "",
+                    style: context.style.generateTextStyle());
           } else {
             return loadingWidget?.call() ?? const CircularProgressIndicator();
           }
@@ -217,21 +228,28 @@ String? _alt(Map<String, String> attributes) {
 
 double? _height(Map<String, String> attributes) {
   final heightString = attributes["height"];
-  return heightString == null ? heightString as double? : double.tryParse(heightString);
+  return heightString == null
+      ? heightString as double?
+      : double.tryParse(heightString);
 }
 
 double? _width(Map<String, String> attributes) {
   final widthString = attributes["width"];
-  return widthString == null ? widthString as double? : double.tryParse(widthString);
+  return widthString == null
+      ? widthString as double?
+      : double.tryParse(widthString);
 }
 
-double _aspectRatio(Map<String, String> attributes, AsyncSnapshot<Size> calculated) {
+double _aspectRatio(
+    Map<String, String> attributes, AsyncSnapshot<Size> calculated) {
   final heightString = attributes["height"];
   final widthString = attributes["width"];
   if (heightString != null && widthString != null) {
     final height = double.tryParse(heightString);
     final width = double.tryParse(widthString);
-    return height == null || width == null ? calculated.data!.aspectRatio : width / height;
+    return height == null || width == null
+        ? calculated.data!.aspectRatio
+        : width / height;
   }
   return calculated.data!.aspectRatio;
 }