Fixing Article and article example

doc/animation_widget_article/article.md

@@ -1,5 +1,13 @@
 # Sprite Sheet Animations in Flutter
 
+### UPDATE 05/27/2020
+
+As for Flame 0.22.0 there is a new way to use Animations and Sprites inside your widget tree.
+
+Flame now includes a widget catalog and inside it you will find `FlameAnimationWidget` and `FlameSpriteWidget`.
+
+Check the example mentioned on this article to see the updated version.
+
 ## Introduction
 
 Flutter provides lots of cool and slick animations out of the box, most related to movement and tweens (continuous changes in size, position, color, et cetera). However, one particular thing that it's really hard to do using only the native APIs is a simple sprite sheet animation. Or any sprite sheet handling, for that matter.

doc/examples/.gitignore

@@ -1,9 +0,0 @@
-# Web related
-**/*/lib/generated_plugin_registrant.dart
-
-# Platforms
-**/*/android
-**/*/ios
-**/*/web
-**/*/macos
-**/*/test

doc/examples/animation_widget/lib/main.dart

@@ -1,16 +1,35 @@
 import 'dart:async';
 
+import 'package:flame/flame.dart';
 import 'package:flame/animation.dart' as animation;
 import 'package:flame/sprite.dart';
-import 'package:flame/flame.dart';
+import 'package:flame/spritesheet.dart';
 import 'package:flame/position.dart';
+import 'package:flame/widgets/flame_animation_widget.dart';
+import 'package:flame/widgets/flame_sprite_widget.dart';
 import 'package:flutter/material.dart';
 
 Sprite _sprite;
+animation.Animation _animation;
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
   _sprite = await Sprite.loadSprite('minotaur.png', width: 96, height: 96);
+
+  await Flame.images.load('minotaur.png');
+  final _animationSpriteSheet = SpriteSheet(
+    imageName: 'minotaur.png',
+    columns: 19,
+    rows: 1,
+    textureWidth: 96,
+    textureHeight: 96,
+  );
+  _animation = _animationSpriteSheet.createAnimation(
+    0,
+    stepTime: 0.2,
+    to: 19,
+  );
+
   runApp(MyApp());
 }
 
@@ -69,20 +88,19 @@ class _MyHomePageState extends State<MyHomePage> {
             const Text('Hi there! This is a regular Flutter app,'),
             const Text('with a complex widget tree and also'),
             const Text('some pretty sprite sheet animations :)'),
-            Flame.util.animationAsWidget(
-              _position,
-              animation.Animation.sequenced(
-                'minotaur.png',
-                19,
-                textureWidth: 96.0,
-                textureHeight: 96,
-              ),
+            Container(
+              width: 200,
+              height: 200,
+              child: FlameAnimationWidget(animation: _animation),
             ),
             const Text('Neat, hum?'),
             const Text(
                 'By the way, you can also use static sprites as widgets:'),
-            Flame.util.spriteAsWidget(const Size(100, 100), _sprite),
-            const SizedBox(height: 40),
+            Container(
+              width: 200,
+              height: 200,
+              child: FlameSpriteWidget(sprite: _sprite),
+            ),
             const Text('Sprites from Elthen\'s amazing work on itch.io:'),
             const Text('https://elthen.itch.io/2d-pixel-art-minotaur-sprites'),
           ],

lib/widgets/flame_animation_widget.dart

@@ -23,7 +23,7 @@ class FlameAnimationWidget extends StatefulWidget {
 class _FlameAnimationWidget extends State<FlameAnimationWidget>
     with SingleTickerProviderStateMixin {
   AnimationController _controller;
-  int _lastUpdated;
+  double _lastUpdated;
 
   @override
   void didUpdateWidget(oldWidget) {
@@ -41,9 +41,9 @@ class _FlameAnimationWidget extends State<FlameAnimationWidget>
 
     _controller = AnimationController(vsync: this)
       ..addListener(() {
-        final now = DateTime.now().millisecond;
+        final now = DateTime.now().millisecond.toDouble();
 
-        final dt = max(0, (now - _lastUpdated) / 1000);
+        final dt = max(0, (now - _lastUpdated) / 1000).toDouble();
         widget.animation.update(dt);
 
         setState(() {
@@ -61,7 +61,7 @@ class _FlameAnimationWidget extends State<FlameAnimationWidget>
   void _initAnimation() {
     setState(() {
       widget.animation.reset();
-      _lastUpdated = DateTime.now().millisecond;
+      _lastUpdated = DateTime.now().millisecond.toDouble();
       _controller.repeat(
           // -/+ 60 fps
           period: const Duration(milliseconds: 16));