Merge pull request #533 from vrtdev/feature/278-image-loading-widget

Allow custom image loading widget for network images

Author: ryan-berger

README.md

@@ -534,6 +534,7 @@ Widget html = Html(
     networkSourceMatcher(): networkImageRender(
       headers: {"Custom-Header": "some-value"},
       altWidget: (alt) => Text(alt),
+      loadingWidget: () => Text("Loading..."),
     ),
   },
 );

example/lib/main.dart

@@ -174,6 +174,7 @@ class _MyHomePageState extends State<MyHomePage> {
             networkSourceMatcher(domains: ["mydomain.com"]): networkImageRender(
               headers: {"Custom-Header": "some-value"},
               altWidget: (alt) => Text(alt),
+              loadingWidget: () => Text("Loading..."),
             ),
           },
           onLinkTap: (url) {

lib/image_render.dart

@@ -93,6 +93,7 @@ ImageRender networkImageRender({
   double width,
   double height,
   Widget Function(String) altWidget,
+  Widget Function() loadingWidget,
 }) =>
     (context, attributes, element) {
       precacheImage(
@@ -143,7 +144,7 @@ ImageRender networkImageRender({
               height: height ?? _height(attributes),
               frameBuilder: (ctx, child, frame, _) {
                 if (frame == null) {
-                  return altWidget.call(_alt(attributes)) ??
+                  return altWidget?.call(_alt(attributes)) ??
                       Text(_alt(attributes) ?? "",
                           style: context.style.generateTextStyle());
                 }
@@ -154,7 +155,7 @@ ImageRender networkImageRender({
             return Text(_alt(attributes) ?? "",
                 style: context.style.generateTextStyle());
           } else {
-            return new CircularProgressIndicator();
+            return loadingWidget?.call() ?? const CircularProgressIndicator();
           }
         },
       );