Update ImageFixedWidth

- Update ImageFixedWidth to load images better.
- Import loading_gifs.

Author: rayliverified

lib/ui/ui_image.dart

@@ -1,26 +1,76 @@
-import 'package:flutter/widgets.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:loading_gifs/loading_gifs.dart';
+import 'package:minimal/utils/utils_image.dart';
 
-class ImageFixedWidth extends StatelessWidget {
-  final String image;
+class ImageFixedWidth extends StatefulWidget {
+  static const String name = 'ImageFixedWidth';
+
+  final String imageUrl;
   final double width;
-  final double? imageRatio;
-  final String placeholder;
+  final double imageRatio;
+
+  const ImageFixedWidth(
+      {Key? key,
+      required this.imageUrl,
+      required this.width,
+      this.imageRatio = 1})
+      : super(key: key);
+
+  @override
+  _ImageFixedWidthState createState() => _ImageFixedWidthState();
+}
 
-  const ImageFixedWidth(this.image, this.width,
-      {this.imageRatio = 1.618, this.placeholder = ""});
+class _ImageFixedWidthState extends State<ImageFixedWidth> {
+  bool imagesLoaded = false;
+  bool preloadedImages = false;
+
+  @override
+  void didUpdateWidget(ImageFixedWidth oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.imageUrl != widget.imageUrl) {
+      preloadedImages = false;
+      imagesLoaded = false;
+    }
+  }
 
   @override
   Widget build(BuildContext context) {
-    final double height = imageRatio == null ? width : imageRatio! * width;
-
-    return FadeInImage.assetNetwork(
-      image: image,
-      placeholder: placeholder,
-      width: width,
-      height: height,
-      fit: BoxFit.cover,
-      fadeOutDuration: const Duration(milliseconds: 100),
-      fadeInDuration: const Duration(milliseconds: 200),
-    );
+    if (!preloadedImages) {
+      preloadedImages = true;
+      ImageUtils.preloadNetworkImages(context, [
+        widget.imageUrl,
+      ]).whenComplete(() {
+        if (mounted) {
+          imagesLoaded = true;
+          setState(() {});
+        }
+      });
+    }
+
+    return LayoutBuilder(builder: (context, constraints) {
+      double width = constraints.maxWidth;
+      double height = (width * widget.imageRatio).roundToDouble();
+      return SizedBox(
+        width: width,
+        height: height,
+        child: Stack(
+          children: [
+            if (imagesLoaded == false)
+              const Center(
+                child: Center(child: CupertinoActivityIndicator(radius: 16)),
+              ),
+            FadeInImage.assetNetwork(
+              image: widget.imageUrl,
+              placeholder: placeholderEmpty,
+              width: width,
+              height: height,
+              fit: BoxFit.cover,
+              fadeOutDuration: const Duration(milliseconds: 100),
+              fadeInDuration: const Duration(milliseconds: 200),
+            ),
+          ],
+        ),
+      );
+    });
   }
 }

lib/utils/utils_image.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/widgets.dart';
+
+class ImageUtils {
+  static Future<List<dynamic>> preloadNetworkImages(
+      BuildContext context, List<String> imageUrls) async {
+    List<dynamic> exceptions = [];
+    await Future.wait(imageUrls.map((e) => precacheImage(
+          NetworkImage(e),
+          context,
+          onError: (exception, stackTrace) {
+            exceptions.add(exception);
+          },
+        )));
+    return Future.value(exceptions);
+  }
+}

pubspec.yaml

@@ -16,6 +16,7 @@ dependencies:
 #      ref: master
   google_fonts: ^2.3.1
   animations: ^2.0.2
+  loading_gifs: ^0.3.0
 
 dev_dependencies:
   flutter_test: