Make RainRadar reloadable by user

lib/screens/rain_radar.dart

@@ -28,7 +28,6 @@ class _RainRadarState extends State<RainRadar>
         controllerValue = controller.value;
       });
     });
-    controller.stop();
   }
 
   @override
@@ -46,7 +45,6 @@ class _RainRadarState extends State<RainRadar>
         _gifBytes = gif.readAsBytesSync();
         _gifLoaded = true;
       });
-      // controller.animateTo(24, duration: const Duration(seconds: 15));
     });
   }
 
@@ -54,17 +52,16 @@ class _RainRadarState extends State<RainRadar>
     return Column(children: [
       Padding(
           padding: const EdgeInsets.all(10),
-          child: _gifLoaded
+          child: VisibilityDetector(
-              ? VisibilityDetector(
             key: const Key('gif-key'),
             onVisibilityChanged: (visibilityInfo) {
-                    controller.animateTo(24,
+              if (visibilityInfo.visibleFraction > 0) {
-                        duration: const Duration(seconds: 15));
+                controller.animateTo(24, duration: const Duration(seconds: 15));
+              }
             },
-                  child: GifImage(
+            child:
-                      controller: controller, image: MemoryImage(_gifBytes)),
+                GifImage(controller: controller, image: MemoryImage(_gifBytes)),
-                )
+          )),
-              : const CircularProgressIndicator()),
       Row(mainAxisAlignment: MainAxisAlignment.center, children: [
         ElevatedButton(
             onPressed: () {
@@ -97,16 +94,27 @@ class _RainRadarState extends State<RainRadar>
         appBar: AppBar(
           title: const Text('Rain Radar'),
         ),
-        body: _gifLoaded
+        body: RefreshIndicator(
+            onRefresh: (() {
+              return Future(() {
+                setState(() {
+                  _gifLoaded = false;
+                });
+                loadGif();
+              });
+            }),
+            child: SingleChildScrollView(
+                physics: const AlwaysScrollableScrollPhysics(),
+                child: _gifLoaded
                     ? _showGif()
                     : Column(
-                mainAxisAlignment: MainAxisAlignment.center,
+                        mainAxisAlignment: MainAxisAlignment.start,
                         crossAxisAlignment: CrossAxisAlignment.center,
                         children: const [
                             SizedBox(
                               height: 50,
                             ),
                             Center(child: CircularProgressIndicator())
-                  ]));
+                          ]))));
   }
 }