controls of rain radar and slider update

lib/screens/rain_radar.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-// ignore: import_of_legacy_library_into_null_safe
 import 'package:flutter_gifimage/flutter_gifimage.dart';
 
 class RainRadar extends StatefulWidget {
@@ -12,33 +11,50 @@ class RainRadar extends StatefulWidget {
 class _RainRadarState extends State<RainRadar>
     with SingleTickerProviderStateMixin<RainRadar> {
   late GifController controller;
+  double controllerValue = 0;
 
   @override
   void initState() {
     super.initState();
     controller = GifController(vsync: this);
+    controller.addListener(() {
+      setState(() {
+        controllerValue = controller.value;
+      });
+    });
     WidgetsBinding.instance.addPostFrameCallback((_) {
-      controller.repeat(min: 0, max: 24, period: const Duration(seconds: 10));
+      controller.animateTo(24, duration: const Duration(seconds: 10));
     });
   }
 
   @override
   Widget build(BuildContext context) {
-    controller.stop();
     return Scaffold(
         appBar: AppBar(
           title: const Text('Rain Radar'),
         ),
         body: Column(children: [
-          GifImage(
-              controller: controller,
-              image: const NetworkImage(
-                  'https://www.dwd.de/DWD/wetter/radar/radarvhs.gif')),
-          ElevatedButton(
-              onPressed: () {
-                controller.stop();
-              },
-              child: const Text("Stop")),
+          Padding(
+              padding: const EdgeInsets.all(10),
+              child: GifImage(
+                  controller: controller,
+                  image: const NetworkImage(
+                      'https://www.dwd.de/DWD/wetter/radar/radarvhs.gif'))),
+          Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+            ElevatedButton(
+                onPressed: () {
+                  int duration = ((10 / 24) * (24 - controller.value)).round();
+                  controller.animateTo(24,
+                      duration: Duration(seconds: duration));
+                },
+                child: const Icon(Icons.play_arrow)),
+            const SizedBox(width: 10),
+            ElevatedButton(
+                onPressed: () {
+                  controller.stop();
+                },
+                child: const Icon(Icons.pause)),
+          ]),
           Slider(
             onChanged: (v) {
               controller.value = v;
@@ -46,7 +62,7 @@ class _RainRadarState extends State<RainRadar>
             },
             max: 24,
             min: 0,
-            value: controller.value,
+            value: controllerValue,
           )
         ]));
   }