fix: #767 - display a progress gauge when downloading full pictures (#…

…803) Impacted files: * `product_image_page.dart`: added a progress gauge during download * `smooth_gauge.dart`: fixed a day/night color issue
openfoodfacts · Dec 30, 2021 · b282511 · b282511
1 parent 12127f3
commit b282511
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/packages/smooth_app/lib/pages/product/product_image_page.dart b/packages/smooth_app/lib/pages/product/product_image_page.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:openfoodfacts/openfoodfacts.dart';
 import 'package:photo_view/photo_view.dart';
+import 'package:smooth_ui_library/smooth_ui_library.dart';
 
 class ProductImagePage extends StatelessWidget {
   const ProductImagePage({
@@ -18,15 +19,26 @@ class ProductImagePage extends StatelessWidget {
   final String buttonText;
 
   @override
-  Widget build(BuildContext context) {
-    return Scaffold(
+  Widget build(BuildContext context) => Scaffold(
         appBar: AppBar(
           title: Text(title),
         ),
         body: PhotoView(
+          loadingBuilder:
+              (final BuildContext context, final ImageChunkEvent? event) =>
+                  Center(
+            child: SmoothGauge(
+              color: Theme.of(context).colorScheme.onBackground,
+              value: event == null ||
+                      event.expectedTotalBytes == null ||
+                      event.expectedTotalBytes == 0
+                  ? 0
+                  : event.cumulativeBytesLoaded / event.expectedTotalBytes!,
+            ),
+          ),
           imageProvider: imageProvider,
           minScale: PhotoViewComputedScale
               .contained, // Makes it easy to dezoom until the photo is contained in the screen
-        ));
-  }
+        ),
+      );
 }
diff --git a/packages/smooth_ui_library/lib/widgets/smooth_gauge.dart b/packages/smooth_ui_library/lib/widgets/smooth_gauge.dart
@@ -27,7 +27,7 @@ class SmoothGauge extends StatelessWidget {
             percent: value <= 1.0 ? value : 1.0,
             center: Text(
               '${(value * 100).floor()}%',
-              style: const TextStyle(color: Colors.white),
+              style: TextStyle(color: color),
             ),
             progressColor: color,
             backgroundColor: backgroundColor ?? color.withAlpha(50),