better rain radar gif loading

lib/screens/rain_radar.dart

@@ -1,5 +1,7 @@
+import 'dart:typed_data';
 import 'package:flutter/material.dart';
 import 'package:flutter_gifimage/flutter_gifimage.dart';
+import 'package:flutter_cache_manager/flutter_cache_manager.dart';
 
 class RainRadar extends StatefulWidget {
   const RainRadar({Key? key}) : super(key: key);
@@ -12,58 +14,90 @@ class _RainRadarState extends State<RainRadar>
     with SingleTickerProviderStateMixin<RainRadar> {
   late GifController controller;
   double controllerValue = 0;
+  bool _gifLoaded = false;
+  late Uint8List _gifBytes;
 
   @override
   void initState() {
     super.initState();
+    loadGif();
     controller = GifController(vsync: this);
     controller.addListener(() {
       setState(() {
         controllerValue = controller.value;
       });
     });
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      controller.animateTo(24, duration: const Duration(seconds: 10));
+    controller.stop();
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  void loadGif() async {
+    imageCache.clear();
+    await DefaultCacheManager()
+        .getSingleFile('https://www.dwd.de/DWD/wetter/radar/radarvhs.gif')
+        .then((gif) {
+      setState(() {
+        _gifBytes = gif.readAsBytesSync();
+        _gifLoaded = true;
+      });
+      controller.animateTo(24, duration: const Duration(seconds: 15));
     });
   }
 
+  Widget _showGif() {
+    return Column(children: [
+      Padding(
+          padding: const EdgeInsets.all(10),
+          child: _gifLoaded
+              ? GifImage(controller: controller, image: MemoryImage(_gifBytes))
+              : const CircularProgressIndicator()),
+      Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+        ElevatedButton(
+            onPressed: () {
+              int duration = ((15 / 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;
+          setState(() {});
+        },
+        max: 24,
+        min: 0,
+        value: controllerValue,
+      )
+    ]);
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
         appBar: AppBar(
           title: const Text('Rain Radar'),
         ),
-        body: Column(children: [
-          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;
-              setState(() {});
-            },
-            max: 24,
-            min: 0,
-            value: controllerValue,
-          )
-        ]));
+        body: _gifLoaded
+            ? _showGif()
+            : Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: const [
+                    SizedBox(
+                      height: 50,
+                    ),
+                    Center(child: CircularProgressIndicator())
+                  ]));
   }
 }