import 'package:flutter/material.dart';
import 'package:flutter_gifimage/flutter_gifimage.dart';

class RainRadar extends StatefulWidget {
  const RainRadar({Key? key}) : super(key: key);

  @override
  State<RainRadar> createState() => _RainRadarState();
}

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.animateTo(24, duration: const Duration(seconds: 10));
    });
  }

  @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,
          )
        ]));
  }
}