StopMotionWidget

main.dart

import 'package:flutter/material.dart';

import 'dart:core';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              StopMotion.fromImageUrls(
                images
                    .map((img) => 'https://services.swpc.noaa.gov${img["url"]}')
                    .toList(),
                frameDuration: Duration(milliseconds: 100),
              ),
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class StopMotion extends StatefulWidget {
  final List<Widget> children;
  final Duration frameDuration;

  const StopMotion({
    Key key,
    @required this.children,
    @required this.frameDuration,
  }) : super(key: key);

  factory StopMotion.fromImageUrls(List<String> imageUrls,
      {@required Duration frameDuration, Key key}) {
    final children = imageUrls
        .map((url) => Image.network(
              url,
              gaplessPlayback: true,
            ))
        .toList();
    return StopMotion(
      children: children,
      key: key,
      frameDuration: frameDuration,
    );
  }

  @override
  _StopMotionState createState() => _StopMotionState();
}

class _StopMotionState extends State<StopMotion> with TickerProviderStateMixin {
  AnimationController _controller;
  bool _isAnimating = true;
  bool _isLoaded = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(
          milliseconds:
              widget.children.length * widget.frameDuration.inMilliseconds),
      vsync: this,
    )..repeat();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    Future.wait(widget.children
            .whereType<Image>()
            .map((image) => precacheImage(image.image, context)))
        .then((value) => setState(() => _isLoaded = true));
  }

  @override
  Widget build(BuildContext context) {
    return _isLoaded
        ? AnimatedBuilder(
            animation: _controller,
            builder: (context, _) {
              return Column(
                children: <Widget>[
                  widget.children[
                      (_controller.value * (widget.children.length - 1))
                          .floor()],
                  Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      IconButton(
                        icon: Icon(
                          _controller.isAnimating
                              ? Icons.pause
                              : Icons.play_arrow,
                        ),
                        onPressed: () => setState(() {
                          _controller.isAnimating
                              ? _controller.stop()
                              : _controller.repeat();
                        }),
                      ),
                      Expanded(
                        child: Slider(
                          min: 0.0,
                          max: 1.0,
                          value: _controller.value,
                          onChanged: (value) {
                            _controller.value = value;
                          },
                          onChangeStart: (_) =>
                              _isAnimating = _controller.isAnimating,
                          onChangeEnd: (_) => _isAnimating
                              ? _controller.repeat()
                              : _controller.stop(),
                        ),
                      ),
                    ],
                  ),
                ],
              );
            },
          )
        : Center(child: CircularProgressIndicator());
  }
}

const images = [
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1750.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1755.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1800.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1805.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1815.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1820.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1825.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1830.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1835.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1840.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1845.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1850.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1855.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1900.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1905.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1915.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1920.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1925.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1930.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1935.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1940.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1945.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1950.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_1955.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2000.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2010.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2015.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2020.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2025.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2030.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2035.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2040.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2045.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2050.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2055.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2100.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2105.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2110.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2115.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2120.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2125.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2130.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2135.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2140.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2145.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2150.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2155.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2200.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2205.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2210.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2215.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2225.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2230.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2235.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2240.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2245.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2250.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2255.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2300.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2305.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2310.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2315.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2320.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2325.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2330.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2335.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2340.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2345.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2350.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200526_2355.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200527_0000.jpg"
  },
  {
    "url":
        "/images/animations/ovation-north/ovation/images/swpc_aurora_map_n_20200527_0005.jpg"
  }
];