Update & publish new doc versions

docs/main/_sources/flame/other/widgets.md.txt

@@ -11,7 +11,7 @@ You can also see all the widgets showcased inside a
 [here](https://github.com/flame-engine/flame/tree/main/examples/lib/stories/widgets)
 
 
-## Nine Tile Box
+## NineTileBoxWidget
 
 A Nine Tile Box is a rectangle drawn using a grid sprite.
 
@@ -21,17 +21,17 @@ middle.
 The corners are drawn at the same size, the sides are stretched on the side direction and the middle
 is expanded both ways.
 
-The `NineTileBox` widget implements a `Container` using that standard. This pattern is also
+The `NineTileBoxWidget` implements a `Container` using that standard. This pattern is also
 implemented as a component in the `NineTileBoxComponent` so that you can add this feature directly
 to your `FlameGame`. To get to know more about this, check the component docs
 [here](../components.md#ninetileboxcomponent).
 
 Here you can find an example of how to use it (without using the `NineTileBoxComponent`):
 
 ```dart
-import 'package:flame/widgets/nine_tile_box.dart';
+import 'package:flame/widgets';
 
-NineTileBox.asset(
+NineTileBoxWidget(
     image: image, // dart:ui image instance
     tileSize: 16, // The width/height of the tile on your grid image
     destTileSize: 50, // The dimensions to be used when drawing the tile on the canvas
@@ -50,13 +50,15 @@ in Flutter.
 How to use it:
 
 ```dart
-SpriteButton.asset(
+SpriteButton(
     onPressed: () {
       print('Pressed');
     },
     label: const Text('Sprite Button', style: const TextStyle(color: const Color(0xFF5D275D))),
     sprite: _spriteButton,
     pressedSprite: _pressedSprite,
+    height: _height,
+    width: _width,
 )
 ```
 
@@ -69,7 +71,7 @@ tree.
 This is how to use it:
 
 ```dart
-SpriteWidget.asset(
+SpriteWidget(
     sprite: yourSprite,
     anchor: Anchor.center,
 )
@@ -84,8 +86,9 @@ SpriteWidget.asset(
 This is how to use it:
 
 ```dart
-SpriteAnimationWidget.asset(
+SpriteAnimationWidget(
     animation: _animation,
+    animationTicker: _animationTicker,
     playing: true,
     anchor: Anchor.center,
 )

docs/main/flame/other/widgets.html

@@ -330,21 +330,21 @@ <h1>Widgets<a class="headerlink" href="#widgets" title="Link to this heading">¶
 <p>You can also see all the widgets showcased inside a
 <a class="reference external" href="https://github.com/bluefireteam/dashbook">Dashbook</a> sandbox
 <a class="reference external" href="https://github.com/flame-engine/flame/tree/main/examples/lib/stories/widgets">here</a></p>
-<section id="nine-tile-box">
-<h2>Nine Tile Box<a class="headerlink" href="#nine-tile-box" title="Link to this heading">¶</a></h2>
+<section id="ninetileboxwidget">
+<h2>NineTileBoxWidget<a class="headerlink" href="#ninetileboxwidget" title="Link to this heading">¶</a></h2>
 <p>A Nine Tile Box is a rectangle drawn using a grid sprite.</p>
 <p>The grid sprite is a 3x3 grid and with 9 blocks, representing the 4 corners, the 4 sides and the
 middle.</p>
 <p>The corners are drawn at the same size, the sides are stretched on the side direction and the middle
 is expanded both ways.</p>
-<p>The <code class="docutils literal notranslate"><span class="pre">NineTileBox</span></code> widget implements a <code class="docutils literal notranslate"><span class="pre">Container</span></code> using that standard. This pattern is also
+<p>The <code class="docutils literal notranslate"><span class="pre">NineTileBoxWidget</span></code> implements a <code class="docutils literal notranslate"><span class="pre">Container</span></code> using that standard. This pattern is also
 implemented as a component in the <code class="docutils literal notranslate"><span class="pre">NineTileBoxComponent</span></code> so that you can add this feature directly
 to your <code class="docutils literal notranslate"><span class="pre">FlameGame</span></code>. To get to know more about this, check the component docs
 <a class="reference internal" href="../components.html#ninetileboxcomponent"><span class="std std-ref">here</span></a>.</p>
 <p>Here you can find an example of how to use it (without using the <code class="docutils literal notranslate"><span class="pre">NineTileBoxComponent</span></code>):</p>
-<div class="highlight-dart notranslate"><div class="highlight"><pre><span></span><span class="k">import</span><span class="w"> </span><span class="s1">&#39;package:flame/widgets/nine_tile_box.dart&#39;</span><span class="p">;</span>
+<div class="highlight-dart notranslate"><div class="highlight"><pre><span></span><span class="k">import</span><span class="w"> </span><span class="s1">&#39;package:flame/widgets&#39;</span><span class="p">;</span>
 
-<span class="n">NineTileBox</span><span class="p">.</span><span class="n">asset</span><span class="p">(</span>
+<span class="n">NineTileBoxWidget</span><span class="p">(</span>
 <span class="w">    </span><span class="nl">image:</span><span class="w"> </span><span class="n">image</span><span class="p">,</span><span class="w"> </span><span class="c1">// dart:ui image instance</span>
 <span class="w">    </span><span class="nl">tileSize:</span><span class="w"> </span><span class="m">16</span><span class="p">,</span><span class="w"> </span><span class="c1">// The width/height of the tile on your grid image</span>
 <span class="w">    </span><span class="nl">destTileSize:</span><span class="w"> </span><span class="m">50</span><span class="p">,</span><span class="w"> </span><span class="c1">// The dimensions to be used when drawing the tile on the canvas</span>
@@ -360,13 +360,15 @@ <h2>SpriteButton<a class="headerlink" href="#spritebutton" title="Link to this h
 achieve your wanted look by drawing the button in a graphics editor, instead of making it directly
 in Flutter.</p>
 <p>How to use it:</p>
-<div class="highlight-dart notranslate"><div class="highlight"><pre><span></span><span class="n">SpriteButton</span><span class="p">.</span><span class="n">asset</span><span class="p">(</span>
+<div class="highlight-dart notranslate"><div class="highlight"><pre><span></span><span class="n">SpriteButton</span><span class="p">(</span>
 <span class="w">    </span><span class="nl">onPressed:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
 <span class="w">      </span><span class="n">print</span><span class="p">(</span><span class="s1">&#39;Pressed&#39;</span><span class="p">);</span>
 <span class="w">    </span><span class="p">},</span>
 <span class="w">    </span><span class="nl">label:</span><span class="w"> </span><span class="k">const</span><span class="w"> </span><span class="n">Text</span><span class="p">(</span><span class="s1">&#39;Sprite Button&#39;</span><span class="p">,</span><span class="w"> </span><span class="nl">style:</span><span class="w"> </span><span class="k">const</span><span class="w"> </span><span class="n">TextStyle</span><span class="p">(</span><span class="nl">color:</span><span class="w"> </span><span class="k">const</span><span class="w"> </span><span class="n">Color</span><span class="p">(</span><span class="mh">0xFF5D275D</span><span class="p">))),</span>
 <span class="w">    </span><span class="nl">sprite:</span><span class="w"> </span><span class="n">_spriteButton</span><span class="p">,</span>
 <span class="w">    </span><span class="nl">pressedSprite:</span><span class="w"> </span><span class="n">_pressedSprite</span><span class="p">,</span>
+<span class="w">    </span><span class="nl">height:</span><span class="w"> </span><span class="n">_height</span><span class="p">,</span>
+<span class="w">    </span><span class="nl">width:</span><span class="w"> </span><span class="n">_width</span><span class="p">,</span>
 <span class="p">)</span>
 </pre></div>
 </div>
@@ -376,7 +378,7 @@ <h2>SpriteWidget<a class="headerlink" href="#spritewidget" title="Link to this h
 <p><code class="docutils literal notranslate"><span class="pre">SpriteWidget</span></code> is a widget used to display a <a class="reference internal" href="../rendering/images.html#sprite"><span class="std std-ref">Sprite</span></a> inside a widget
 tree.</p>
 <p>This is how to use it:</p>
-<div class="highlight-dart notranslate"><div class="highlight"><pre><span></span><span class="n">SpriteWidget</span><span class="p">.</span><span class="n">asset</span><span class="p">(</span>
+<div class="highlight-dart notranslate"><div class="highlight"><pre><span></span><span class="n">SpriteWidget</span><span class="p">(</span>
 <span class="w">    </span><span class="nl">sprite:</span><span class="w"> </span><span class="n">yourSprite</span><span class="p">,</span>
 <span class="w">    </span><span class="nl">anchor:</span><span class="w"> </span><span class="n">Anchor</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
 <span class="p">)</span>
@@ -388,8 +390,9 @@ <h2>SpriteAnimationWidget<a class="headerlink" href="#spriteanimationwidget" tit
 <p><code class="docutils literal notranslate"><span class="pre">SpriteAnimationWidget</span></code> is a widget used to display
 <a class="reference internal" href="../rendering/images.html#animation"><span class="std std-ref">SpriteAnimations</span></a> inside a widget tree.</p>
 <p>This is how to use it:</p>
-<div class="highlight-dart notranslate"><div class="highlight"><pre><span></span><span class="n">SpriteAnimationWidget</span><span class="p">.</span><span class="n">asset</span><span class="p">(</span>
+<div class="highlight-dart notranslate"><div class="highlight"><pre><span></span><span class="n">SpriteAnimationWidget</span><span class="p">(</span>
 <span class="w">    </span><span class="nl">animation:</span><span class="w"> </span><span class="n">_animation</span><span class="p">,</span>
+<span class="w">    </span><span class="nl">animationTicker:</span><span class="w"> </span><span class="n">_animationTicker</span><span class="p">,</span>
 <span class="w">    </span><span class="nl">playing:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
 <span class="w">    </span><span class="nl">anchor:</span><span class="w"> </span><span class="n">Anchor</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
 <span class="p">)</span>
@@ -428,7 +431,7 @@ <h2>SpriteAnimationWidget<a class="headerlink" href="#spriteanimationwidget" tit
     <div class="nav-right" role="navigation" aria-label="table of contents">
       <div id='toc-local' class='list-group'>
  <div class='header'><i class='fa fa-list'></i> Contents</div>
-  <a href='#nine-tile-box' class='list-group-item level-1'>Nine Tile Box</a>
+  <a href='#ninetileboxwidget' class='list-group-item level-1'>NineTileBoxWidget</a>
   <a href='#spritebutton' class='list-group-item level-1'>SpriteButton</a>
   <a href='#spritewidget' class='list-group-item level-1'>SpriteWidget</a>
   <a href='#spriteanimationwidget' class='list-group-item level-1'>SpriteAnimationWidget</a>