From fd8cca6eb9573b1ab22ce4a595a66a9db0c8612f Mon Sep 17 00:00:00 2001
From: Erick Zanardo <erickzanardoo@gmail.com>
Date: Wed, 27 May 2020 11:36:26 -0300
Subject: [PATCH] Fixing Article and article example

---
 doc/animation_widget_article/article.md     |  8 +++++
 doc/examples/.gitignore                     |  9 -----
 doc/examples/animation_widget/lib/main.dart | 40 +++++++++++++++------
 lib/widgets/flame_animation_widget.dart     |  8 ++---
 4 files changed, 41 insertions(+), 24 deletions(-)
 delete mode 100644 doc/examples/.gitignore

diff --git a/doc/animation_widget_article/article.md b/doc/animation_widget_article/article.md
index 922505614..e31e805d0 100644
--- a/doc/animation_widget_article/article.md
+++ b/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.
diff --git a/doc/examples/.gitignore b/doc/examples/.gitignore
deleted file mode 100644
index 1a9c026e8..000000000
--- a/doc/examples/.gitignore
+++ /dev/null
@@ -1,9 +0,0 @@
-# Web related
-**/*/lib/generated_plugin_registrant.dart
-
-# Platforms
-**/*/android
-**/*/ios
-**/*/web
-**/*/macos
-**/*/test
diff --git a/doc/examples/animation_widget/lib/main.dart b/doc/examples/animation_widget/lib/main.dart
index 2b1027590..d8483fd11 100644
--- a/doc/examples/animation_widget/lib/main.dart
+++ b/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'),
           ],
diff --git a/lib/widgets/flame_animation_widget.dart b/lib/widgets/flame_animation_widget.dart
index 489993315..f2334eff7 100644
--- a/lib/widgets/flame_animation_widget.dart
+++ b/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));