From 53f4356c65cd008e95e44862adadd51ca7860e54 Mon Sep 17 00:00:00 2001
From: Pasha Stetsenko <stpasha@gmail.com>
Date: Sat, 18 Feb 2023 20:59:02 -0800
Subject: [PATCH 01/22] AlignComponent

---
 examples/lib/main.dart                        |  2 +
 .../components/game_in_game_example.dart      |  9 +--
 .../lib/stories/layout/align_component.dart   | 55 +++++++++++++++++++
 examples/lib/stories/layout/layout.dart       | 13 +++++
 packages/flame/lib/layout.dart                |  2 +
 packages/flame/lib/src/camera/viewport.dart   |  3 +
 .../lib/src/components/core/component.dart    | 12 ++++
 .../src/components/position_component.dart    | 11 +++-
 packages/flame/lib/src/game/flame_game.dart   |  9 ++-
 .../flame/lib/src/layout/align_component.dart | 46 ++++++++++++++++
 10 files changed, 156 insertions(+), 6 deletions(-)
 create mode 100644 examples/lib/stories/layout/align_component.dart
 create mode 100644 examples/lib/stories/layout/layout.dart
 create mode 100644 packages/flame/lib/layout.dart
 create mode 100644 packages/flame/lib/src/layout/align_component.dart

diff --git a/examples/lib/main.dart b/examples/lib/main.dart
index cce0400be3b..4feee3cfa75 100644
--- a/examples/lib/main.dart
+++ b/examples/lib/main.dart
@@ -11,6 +11,7 @@ import 'package:examples/stories/effects/effects.dart';
 import 'package:examples/stories/experimental/experimental.dart';
 import 'package:examples/stories/games/games.dart';
 import 'package:examples/stories/input/input.dart';
+import 'package:examples/stories/layout/layout.dart';
 import 'package:examples/stories/parallax/parallax.dart';
 import 'package:examples/stories/rendering/rendering.dart';
 import 'package:examples/stories/sprites/sprites.dart';
@@ -39,6 +40,7 @@ void main() {
   addEffectsStories(dashbook);
   addExperimentalStories(dashbook);
   addInputStories(dashbook);
+  addLayoutStories(dashbook);
   addParallaxStories(dashbook);
   addRenderingStories(dashbook);
   addTiledStories(dashbook);
diff --git a/examples/lib/stories/components/game_in_game_example.dart b/examples/lib/stories/components/game_in_game_example.dart
index b9a806bed28..0301bce88fd 100644
--- a/examples/lib/stories/components/game_in_game_example.dart
+++ b/examples/lib/stories/components/game_in_game_example.dart
@@ -36,9 +36,10 @@ class GameChangeTimer extends TimerComponent
   @override
   void onTick() {
     final child = gameRef.draggablesGame.square;
-    final newParent = child.parent == gameRef.draggablesGame
-        ? gameRef.composedGame.parentSquare
-        : gameRef.draggablesGame;
-    child.changeParent(newParent);
+    if (child.parent == gameRef.draggablesGame) {
+      child.parent = gameRef.composedGame.parentSquare;
+    } else {
+      child.parent = gameRef.draggablesGame;
+    }
   }
 }
diff --git a/examples/lib/stories/layout/align_component.dart b/examples/lib/stories/layout/align_component.dart
new file mode 100644
index 00000000000..535b41987d6
--- /dev/null
+++ b/examples/lib/stories/layout/align_component.dart
@@ -0,0 +1,55 @@
+import 'package:flame/components.dart';
+import 'package:flame/game.dart';
+import 'package:flame/layout.dart';
+
+class AlignComponentExample extends FlameGame {
+  static const String description = '''
+    In this example the AlignComponent is used to arrange the circles
+    so that there is one in the middle and 8 more surrounding it in
+    the shape of a diamond.
+    
+    The arrangement will remain intact if you change the window size.
+  ''';
+
+  @override
+  void onLoad() {
+    addAll([
+      AlignComponent(
+        child: CircleComponent(radius: 40),
+        alignment: Anchor.center,
+      ),
+      AlignComponent(
+        child: CircleComponent(radius: 30),
+        alignment: Anchor.topCenter,
+      ),
+      AlignComponent(
+        child: CircleComponent(radius: 30),
+        alignment: Anchor.bottomCenter,
+      ),
+      AlignComponent(
+        child: CircleComponent(radius: 30),
+        alignment: Anchor.centerLeft,
+      ),
+      AlignComponent(
+        child: CircleComponent(radius: 30),
+        alignment: Anchor.centerRight,
+      ),
+      AlignComponent(
+        child: CircleComponent(radius: 10),
+        alignment: const Anchor(0.25, 0.25),
+      ),
+      AlignComponent(
+        child: CircleComponent(radius: 10),
+        alignment: const Anchor(0.25, 0.75),
+      ),
+      AlignComponent(
+        child: CircleComponent(radius: 10),
+        alignment: const Anchor(0.75, 0.25),
+      ),
+      AlignComponent(
+        child: CircleComponent(radius: 10),
+        alignment: const Anchor(0.75, 0.75),
+      ),
+    ]);
+  }
+}
diff --git a/examples/lib/stories/layout/layout.dart b/examples/lib/stories/layout/layout.dart
new file mode 100644
index 00000000000..8c46c4cb9df
--- /dev/null
+++ b/examples/lib/stories/layout/layout.dart
@@ -0,0 +1,13 @@
+import 'package:dashbook/dashbook.dart';
+import 'package:examples/commons/commons.dart';
+import 'package:examples/stories/layout/align_component.dart';
+import 'package:flame/game.dart';
+
+void addLayoutStories(Dashbook dashbook) {
+  dashbook.storiesOf('Layout').add(
+        'AlignComponent',
+        (_) => GameWidget(game: AlignComponentExample()),
+        codeLink: baseLink('layout/align_component.dart'),
+        info: AlignComponentExample.description,
+      );
+}
diff --git a/packages/flame/lib/layout.dart b/packages/flame/lib/layout.dart
new file mode 100644
index 00000000000..3c9f465746e
--- /dev/null
+++ b/packages/flame/lib/layout.dart
@@ -0,0 +1,2 @@
+
+export 'src/layout/align_component.dart' show AlignComponent;
diff --git a/packages/flame/lib/src/camera/viewport.dart b/packages/flame/lib/src/camera/viewport.dart
index 3870387dd5f..663998205f9 100644
--- a/packages/flame/lib/src/camera/viewport.dart
+++ b/packages/flame/lib/src/camera/viewport.dart
@@ -66,6 +66,9 @@ abstract class Viewport extends Component
       camera.viewfinder.onViewportResize();
     }
     onViewportResize();
+    if (hasChildren) {
+      children.forEach((child) => child.onParentResize(_size));
+    }
   }
 
   /// Reference to the parent camera.
diff --git a/packages/flame/lib/src/components/core/component.dart b/packages/flame/lib/src/components/core/component.dart
index 2968b93cfb2..c0de9d450af 100644
--- a/packages/flame/lib/src/components/core/component.dart
+++ b/packages/flame/lib/src/components/core/component.dart
@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:collection/collection.dart';
+import 'package:flame/effects.dart';
 import 'package:flame/src/cache/value_cache.dart';
 import 'package:flame/src/components/core/component_set.dart';
 import 'package:flame/src/components/core/component_tree_root.dart';
@@ -474,6 +475,14 @@ class Component {
   /// [onMount] call before.
   void onRemove() {}
 
+  /// Called whenever the parent of this component changes size; and also once
+  /// before [onMount].
+  ///
+  /// The component may change its own size or perform layout in response to
+  /// this call. If the component changes size, then it should call
+  /// [onParentResize] for all its children.
+  void onParentResize(Vector2 maxSize) {}
+
   /// This method is called periodically by the game engine to request that your
   /// component updates itself.
   ///
@@ -827,6 +836,9 @@ class Component {
     assert(isLoaded && !isLoading);
     _setMountingBit();
     onGameResize(_parent!.findGame()!.canvasSize);
+    if (_parent is SizeProvider) {
+      onParentResize((_parent! as SizeProvider).size);
+    }
     if (isRemoved) {
       _clearRemovedBit();
     } else if (isRemoving) {
diff --git a/packages/flame/lib/src/components/position_component.dart b/packages/flame/lib/src/components/position_component.dart
index 644c7dd06e4..07754679aca 100644
--- a/packages/flame/lib/src/components/position_component.dart
+++ b/packages/flame/lib/src/components/position_component.dart
@@ -68,6 +68,7 @@ class PositionComponent extends Component
         AngleProvider,
         PositionProvider,
         ScaleProvider,
+        SizeProvider,
         CoordinateTransform {
   PositionComponent({
     Vector2? position,
@@ -184,8 +185,16 @@ class PositionComponent extends Component
   /// This property can be reassigned at runtime, although this is not
   /// recommended. Instead, in order to make the [PositionComponent] larger
   /// or smaller, change its [scale].
+  @override
   NotifyingVector2 get size => _size;
-  set size(Vector2 size) => _size.setFrom(size);
+
+  @override
+  set size(Vector2 size) {
+    _size.setFrom(size);
+    if (hasChildren) {
+      children.forEach((child) => child.onParentResize(_size));
+    }
+  }
 
   /// The width of the component in local coordinates. Note that the object
   /// may visually appear larger or smaller due to application of [scale].
diff --git a/packages/flame/lib/src/game/flame_game.dart b/packages/flame/lib/src/game/flame_game.dart
index a39a6384726..ebd5b377d1a 100644
--- a/packages/flame/lib/src/game/flame_game.dart
+++ b/packages/flame/lib/src/game/flame_game.dart
@@ -2,6 +2,7 @@ import 'dart:ui';
 
 import 'package:flame/components.dart';
 import 'package:flame/src/components/core/component_tree_root.dart';
+import 'package:flame/src/effects/provider_interfaces.dart';
 import 'package:flame/src/game/camera/camera.dart';
 import 'package:flame/src/game/camera/camera_wrapper.dart';
 import 'package:flame/src/game/game.dart';
@@ -15,7 +16,7 @@ import 'package:meta/meta.dart';
 ///
 /// This is the recommended base class to use for most games made with Flame.
 /// It is based on the Flame Component System (also known as FCS).
-class FlameGame extends ComponentTreeRoot with Game {
+class FlameGame extends ComponentTreeRoot with Game implements SizeProvider {
   FlameGame({
     super.children,
     Camera? camera,
@@ -111,6 +112,7 @@ class FlameGame extends ComponentTreeRoot with Game {
     // there is no way to explicitly call the [Component]'s implementation,
     // we propagate the event to [FlameGame]'s children manually.
     handleResize(canvasSize);
+    children.forEach((child) => child.onParentResize(canvasSize));
   }
 
   /// Ensure that all pending tree operations finish.
@@ -182,4 +184,9 @@ class FlameGame extends ComponentTreeRoot with Game {
       }
     }
   }
+
+  @override
+  set size(Vector2 value) {
+    throw UnsupportedError('The size of FlameGame cannot be set explicitly');
+  }
 }
diff --git a/packages/flame/lib/src/layout/align_component.dart b/packages/flame/lib/src/layout/align_component.dart
new file mode 100644
index 00000000000..d49c26221ed
--- /dev/null
+++ b/packages/flame/lib/src/layout/align_component.dart
@@ -0,0 +1,46 @@
+import 'package:flame/src/anchor.dart';
+import 'package:flame/src/components/position_component.dart';
+import 'package:flame/src/effects/provider_interfaces.dart';
+import 'package:vector_math/vector_math_64.dart';
+
+class AlignComponent extends PositionComponent {
+  AlignComponent({
+    required this.child,
+    required this.alignment,
+    this.widthFactor,
+    this.heightFactor,
+    bool keepChildAnchor = false,
+  }) {
+    add(child);
+    if (!keepChildAnchor) {
+      child.anchor = alignment;
+    }
+  }
+
+  final PositionComponent child;
+  final Anchor alignment;
+  final double? widthFactor;
+  final double? heightFactor;
+
+  @override
+  set size(Vector2 value) {
+    throw UnsupportedError('The size of AlignComponent cannot be set directly');
+  }
+
+  @override
+  void onMount() {
+    assert(
+      parent is SizeProvider,
+      "An AlignComponent's parent must have a size",
+    );
+  }
+
+  @override
+  void onParentResize(Vector2 maxSize) {
+    super.size = Vector2(
+      widthFactor == null? maxSize.x : child.size.x * widthFactor!,
+      heightFactor == null? maxSize.y : child.size.y * heightFactor!,
+    );
+    child.position = Vector2(size.x * alignment.x, size.y * alignment.y);
+  }
+}

From 3aa006fe0fa4e79deeff9a4518697ab37baf2842 Mon Sep 17 00:00:00 2001
From: Pasha Stetsenko <stpasha@gmail.com>
Date: Sat, 18 Feb 2023 21:42:59 -0800
Subject: [PATCH 02/22] expand example

---
 doc/flame/components.md                       |  3 ++
 .../lib/stories/layout/align_component.dart   | 41 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/doc/flame/components.md b/doc/flame/components.md
index 28d5dab14ce..0743c69f127 100644
--- a/doc/flame/components.md
+++ b/doc/flame/components.md
@@ -39,6 +39,9 @@ Every `Component` has a few methods that you can optionally implement, which are
 The `onGameResize` method is called whenever the screen is resized, and also when this component
 gets added into the component tree, before the `onMount`.
 
+The `onParentResize` method is similar: it is also called when the component is mounted into the
+component tree, and also whenever the parent of the current component changes its size.
+
 The `onRemove` method can be overridden to run code before the component is removed from the game,
 it is only run once even if the component is removed both by using the parents remove method and
 the `Component` remove method.
diff --git a/examples/lib/stories/layout/align_component.dart b/examples/lib/stories/layout/align_component.dart
index 535b41987d6..854fd36eb4d 100644
--- a/examples/lib/stories/layout/align_component.dart
+++ b/examples/lib/stories/layout/align_component.dart
@@ -1,4 +1,5 @@
 import 'package:flame/components.dart';
+import 'package:flame/effects.dart';
 import 'package:flame/game.dart';
 import 'package:flame/layout.dart';
 
@@ -15,7 +16,45 @@ class AlignComponentExample extends FlameGame {
   void onLoad() {
     addAll([
       AlignComponent(
-        child: CircleComponent(radius: 40),
+        child: CircleComponent(radius: 40)
+          ..add(
+            SizeEffect.by(
+              Vector2.all(25),
+              EffectController(
+                infinite: true,
+                duration: 0.75,
+                reverseDuration: 0.5,
+              ),
+            ),
+          )
+          ..add(
+            AlignComponent(
+              alignment: Anchor.topCenter,
+              child: CircleComponent(radius: 10, anchor: Anchor.bottomCenter),
+              keepChildAnchor: true,
+            ),
+          )
+          ..add(
+            AlignComponent(
+              alignment: Anchor.bottomCenter,
+              child: CircleComponent(radius: 10, anchor: Anchor.topCenter),
+              keepChildAnchor: true,
+            ),
+          )
+          ..add(
+            AlignComponent(
+              alignment: Anchor.centerLeft,
+              child: CircleComponent(radius: 10, anchor: Anchor.centerRight),
+              keepChildAnchor: true,
+            ),
+          )
+          ..add(
+            AlignComponent(
+              alignment: Anchor.centerRight,
+              child: CircleComponent(radius: 10, anchor: Anchor.centerLeft),
+              keepChildAnchor: true,
+            ),
+          ),
         alignment: Anchor.center,
       ),
       AlignComponent(

From 890d05a201bbd0ee7860e748048cd0e7509c0a16 Mon Sep 17 00:00:00 2001
From: Pasha Stetsenko <stpasha@gmail.com>
Date: Sat, 18 Feb 2023 22:52:47 -0800
Subject: [PATCH 03/22] docs

---
 doc/flame/flame.md                            |  2 +
 doc/flame/layout/align_component.md           |  9 +++
 doc/flame/layout/layout.md                    |  7 ++
 .../flame/lib/src/layout/align_component.dart | 77 ++++++++++++++++++-
 4 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 doc/flame/layout/align_component.md
 create mode 100644 doc/flame/layout/layout.md

diff --git a/doc/flame/flame.md b/doc/flame/flame.md
index 84bc6855346..d78748b069c 100644
--- a/doc/flame/flame.md
+++ b/doc/flame/flame.md
@@ -12,6 +12,7 @@
 - [Camera Component](camera_component.md)
 - [Inputs](inputs/inputs.md)
 - [Rendering](rendering/rendering.md)
+- [Layout](layout/layout.md)
 - [Other](other/other.md)
 
 ```{toctree}
@@ -29,5 +30,6 @@ Camera & Viewport    <camera_and_viewport.md>
 Camera Component     <camera_component.md>
 Inputs               <inputs/inputs.md>
 Rendering            <rendering/rendering.md>
+Layout               <layout/layout.md>
 Other                <other/other.md>
 ```
diff --git a/doc/flame/layout/align_component.md b/doc/flame/layout/align_component.md
new file mode 100644
index 00000000000..3cd5842b3ed
--- /dev/null
+++ b/doc/flame/layout/align_component.md
@@ -0,0 +1,9 @@
+# AlignComponent
+
+```{dartdoc}
+:package: flame
+:symbol: AlignComponent
+:file: src/layout/align_component.dart
+
+[Align]: https://api.flutter.dev/flutter/widgets/Align-class.html
+```
diff --git a/doc/flame/layout/layout.md b/doc/flame/layout/layout.md
new file mode 100644
index 00000000000..cceeae97acc
--- /dev/null
+++ b/doc/flame/layout/layout.md
@@ -0,0 +1,7 @@
+# Layout
+
+```{toctree}
+:hidden:
+
+AlignComponent   <align_component.md>
+```
diff --git a/packages/flame/lib/src/layout/align_component.dart b/packages/flame/lib/src/layout/align_component.dart
index d49c26221ed..a94f19556c3 100644
--- a/packages/flame/lib/src/layout/align_component.dart
+++ b/packages/flame/lib/src/layout/align_component.dart
@@ -1,15 +1,65 @@
 import 'package:flame/src/anchor.dart';
 import 'package:flame/src/components/position_component.dart';
 import 'package:flame/src/effects/provider_interfaces.dart';
+import 'package:flutter/widgets.dart';
 import 'package:vector_math/vector_math_64.dart';
 
+/// **AlignComponent** is a layout component that positions its child within
+/// itself using relative placement. It is similar to flutter's [Align] widget.
+///
+/// The component requires a single [child], which will be the target of this
+/// component's alignment. Of course, other children can be added to this
+/// component too, but only the initial [child] will be aligned.
+///
+/// The [alignment] parameter describes where the child should be placed within
+/// the current component. For example, if the [alignment] is `Anchor.center`,
+/// then the child will be centered.
+///
+/// Normally, this component's size will match the size of its parent. However,
+/// if you provide properties [widthFactor] or [heightFactor], then the size of
+/// this component in that direction will be equal to the size of the child
+/// times the corresponding factor. For example, if you set [heightFactor] to
+/// 1 then the width of this component will be equal to the width of the parent,
+/// but the height will match the height of the child.
+///
+/// ```dart
+/// AlignComponent(
+///   child: TextComponent('hello'),
+///   alignment: Anchor.centerLeft,
+/// );
+/// ```
+///
+/// By default, the child's anchor is set equal to the [alignment] value. This
+/// achieves traditional alignment behavior: for example, the center of the
+/// child will be placed at the center of the current component, or bottom
+/// right corner of the child can be placed in the bottom right corner of the
+/// component. However, it is also possible to achieve more extravagant
+/// placement by giving the child a different anchor and setting
+/// [keepChildAnchor] to true. For example, if you set `alignment` to
+/// `topCenter`, and child's anchor to `bottomCenter`, then the child will
+/// effectively be placed above the current component:
+/// ```dart
+/// PlayerSprite().add(
+///   AlignComponent(
+///     child: HealthBar()..anchor = Anchor.bottomCenter,
+///     alignment: Anchor.topCenter,
+///     keepChildAnchor: true,
+///   ),
+/// );
+/// ```
 class AlignComponent extends PositionComponent {
+  /// Creates component that keeps its [child] positioned according to the
+  /// [alignment] within this component's bounding box.
+  ///
+  /// More precisely, the child will be placed at [alignment] relative position
+  /// within the current component's bounding box. The child's anchor will also
+  /// be set to the [alignment], unless [keepChildAnchor] parameter is true.
   AlignComponent({
     required this.child,
     required this.alignment,
     this.widthFactor,
     this.heightFactor,
-    bool keepChildAnchor = false,
+    this.keepChildAnchor = false,
   }) {
     add(child);
     if (!keepChildAnchor) {
@@ -17,16 +67,41 @@ class AlignComponent extends PositionComponent {
     }
   }
 
+  /// The component that will be positioned by this component. The [child] will
+  /// be automatically mounted to the current component.
   final PositionComponent child;
+
+  /// How the [child] will be positioned within the current component.
   final Anchor alignment;
+
+  /// If `null`, then the component's width will be equal to the width of the
+  /// parent. Otherwise, the width will be equal to the child's width multiplied
+  /// by this factor.
   final double? widthFactor;
+
+  /// If `null`, then the component's height will be equal to the height of the
+  /// parent. Otherwise, the height will be equal to the child's height
+  /// multiplied by this factor.
   final double? heightFactor;
 
+  /// If `false` (default), then the child's `anchor` will be kept equal to the
+  /// [alignment] value. If `true`, then the [child] will be allowed to have its
+  /// own `anchor` value independent from the parent.
+  final bool keepChildAnchor;
+
   @override
   set size(Vector2 value) {
     throw UnsupportedError('The size of AlignComponent cannot be set directly');
   }
 
+  @override
+  set anchor(Anchor value) {
+    super.anchor = value;
+    if (!keepChildAnchor) {
+      child.anchor = value;
+    }
+  }
+
   @override
   void onMount() {
     assert(

From 9714cebfcbe29cf70df73bbf6ab313398300dfb8 Mon Sep 17 00:00:00 2001
From: Pasha Stetsenko <stpasha@gmail.com>
Date: Sat, 18 Feb 2023 23:27:49 -0800
Subject: [PATCH 04/22] added tests

---
 doc/flame/layout/align_component.md           |   1 +
 .../flame/lib/src/layout/align_component.dart |  28 ++---
 .../flame/test/_goldens/align_component_1.png | Bin 0 -> 3412 bytes
 .../test/layout/align_component_test.dart     | 102 ++++++++++++++++++
 4 files changed, 119 insertions(+), 12 deletions(-)
 create mode 100644 packages/flame/test/_goldens/align_component_1.png
 create mode 100644 packages/flame/test/layout/align_component_test.dart

diff --git a/doc/flame/layout/align_component.md b/doc/flame/layout/align_component.md
index 3cd5842b3ed..61747b9934f 100644
--- a/doc/flame/layout/align_component.md
+++ b/doc/flame/layout/align_component.md
@@ -6,4 +6,5 @@
 :file: src/layout/align_component.dart
 
 [Align]: https://api.flutter.dev/flutter/widgets/Align-class.html
+[Alignment]: https://api.flutter.dev/flutter/painting/Alignment-class.html
 ```
diff --git a/packages/flame/lib/src/layout/align_component.dart b/packages/flame/lib/src/layout/align_component.dart
index a94f19556c3..fef9e5c7d9d 100644
--- a/packages/flame/lib/src/layout/align_component.dart
+++ b/packages/flame/lib/src/layout/align_component.dart
@@ -56,23 +56,34 @@ class AlignComponent extends PositionComponent {
   /// be set to the [alignment], unless [keepChildAnchor] parameter is true.
   AlignComponent({
     required this.child,
-    required this.alignment,
+    required Anchor alignment,
     this.widthFactor,
     this.heightFactor,
     this.keepChildAnchor = false,
   }) {
+    this.alignment = alignment;
     add(child);
-    if (!keepChildAnchor) {
-      child.anchor = alignment;
-    }
   }
 
+  late Anchor _alignment;
+
   /// The component that will be positioned by this component. The [child] will
   /// be automatically mounted to the current component.
   final PositionComponent child;
 
   /// How the [child] will be positioned within the current component.
-  final Anchor alignment;
+  ///
+  /// Note: unlike Flutter's [Alignment], the top-left corner of the component
+  /// has relative coordinates `(0, 0)`, while the bottom-right corner has
+  /// coordinates `(1, 1)`.
+  Anchor get alignment => _alignment;
+  set alignment(Anchor value) {
+    _alignment = value;
+    if (!keepChildAnchor) {
+      child.anchor = value;
+    }
+    child.position = Vector2(size.x * alignment.x, size.y * alignment.y);
+  }
 
   /// If `null`, then the component's width will be equal to the width of the
   /// parent. Otherwise, the width will be equal to the child's width multiplied
@@ -94,13 +105,6 @@ class AlignComponent extends PositionComponent {
     throw UnsupportedError('The size of AlignComponent cannot be set directly');
   }
 
-  @override
-  set anchor(Anchor value) {
-    super.anchor = value;
-    if (!keepChildAnchor) {
-      child.anchor = value;
-    }
-  }
 
   @override
   void onMount() {
diff --git a/packages/flame/test/_goldens/align_component_1.png b/packages/flame/test/_goldens/align_component_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..521acb102cb038a75f2975c26ca3ddbf88b7f9c5
GIT binary patch
literal 3412
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

literal 0
HcmV?d00001

diff --git a/packages/flame/test/layout/align_component_test.dart b/packages/flame/test/layout/align_component_test.dart
new file mode 100644
index 00000000000..9d2393f05b2
--- /dev/null
+++ b/packages/flame/test/layout/align_component_test.dart
@@ -0,0 +1,102 @@
+import 'dart:ui';
+
+import 'package:flame/components.dart';
+import 'package:flame/layout.dart';
+import 'package:flame_test/flame_test.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  group('AlignComponent', () {
+    testWithFlameGame('Valid parent', (game) async {
+      expectLater(
+        () async {
+          final parent = Component();
+          game.add(parent);
+          parent.add(
+            AlignComponent(
+              child: PositionComponent(),
+              alignment: Anchor.center,
+            ),
+          );
+          await game.ready();
+        },
+        failsAssert("An AlignComponent's parent must have a size"),
+      );
+    });
+
+    testGolden(
+      'Align placement: golden',
+      (game) async {
+        final stroke = Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 5.0
+          ..color = const Color(0xaaffff00);
+        game.add(
+          AlignComponent(
+            alignment: Anchor.center,
+            child: CircleComponent(radius: 20),
+          ),
+        );
+        for (final alignment in [
+          Anchor.topLeft,
+          Anchor.topRight,
+          Anchor.bottomLeft,
+          Anchor.bottomRight,
+        ]) {
+          game.add(
+            AlignComponent(
+              child: CircleComponent(
+                radius: 60,
+                paint: stroke,
+                anchor: Anchor.center,
+              ),
+              alignment: alignment,
+              keepChildAnchor: true,
+            ),
+          );
+        }
+      },
+      goldenFile: '../_goldens/align_component_1.png',
+      size: Vector2(150, 100),
+    );
+
+    testWithFlameGame(
+      "Child's alignment remains valid when game resizes",
+      (game) async {
+        final component = CircleComponent(radius: 20);
+        game.add(
+          AlignComponent(child: component, alignment: Anchor.center),
+        );
+        await game.ready();
+
+        expect(component.anchor, Anchor.center);
+        expect(component.position, Vector2(400, 300));
+        expect(component.size, Vector2.all(40));
+
+        game.onGameResize(Vector2(1000, 2000));
+        expect(component.position, Vector2(500, 1000));
+        expect(component.size, Vector2.all(40));
+      },
+    );
+
+    testWithFlameGame(
+      'Changing alignment value',
+      (game) async {
+        final component = CircleComponent(radius: 20);
+        final alignComponent = AlignComponent(
+          child: component,
+          alignment: Anchor.center,
+        );
+        game.add(alignComponent);
+        await game.ready();
+
+        expect(component.anchor, Anchor.center);
+        expect(component.position, Vector2(400, 300));
+
+        alignComponent.alignment = Anchor.bottomLeft;
+        expect(component.position, Vector2(0, 600));
+        expect(component.anchor, Anchor.bottomLeft);
+      },
+    );
+  });
+}

From 73c15b1bcce16b47817ee1d1e7bfa0de77d3baca Mon Sep 17 00:00:00 2001
From: Pasha Stetsenko <stpasha@gmail.com>
Date: Sat, 18 Feb 2023 23:35:49 -0800
Subject: [PATCH 05/22] format

---
 packages/flame/lib/layout.dart                     | 1 -
 packages/flame/lib/src/layout/align_component.dart | 5 ++---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/flame/lib/layout.dart b/packages/flame/lib/layout.dart
index 3c9f465746e..d5a871850f4 100644
--- a/packages/flame/lib/layout.dart
+++ b/packages/flame/lib/layout.dart
@@ -1,2 +1 @@
-
 export 'src/layout/align_component.dart' show AlignComponent;
diff --git a/packages/flame/lib/src/layout/align_component.dart b/packages/flame/lib/src/layout/align_component.dart
index fef9e5c7d9d..396ed5834c8 100644
--- a/packages/flame/lib/src/layout/align_component.dart
+++ b/packages/flame/lib/src/layout/align_component.dart
@@ -105,7 +105,6 @@ class AlignComponent extends PositionComponent {
     throw UnsupportedError('The size of AlignComponent cannot be set directly');
   }
 
-
   @override
   void onMount() {
     assert(
@@ -117,8 +116,8 @@ class AlignComponent extends PositionComponent {
   @override
   void onParentResize(Vector2 maxSize) {
     super.size = Vector2(
-      widthFactor == null? maxSize.x : child.size.x * widthFactor!,
-      heightFactor == null? maxSize.y : child.size.y * heightFactor!,
+      widthFactor == null ? maxSize.x : child.size.x * widthFactor!,
+      heightFactor == null ? maxSize.y : child.size.y * heightFactor!,
     );
     child.position = Vector2(size.x * alignment.x, size.y * alignment.y);
   }

From fa19f887edfae3e9c88d33e20f0c35092a184041 Mon Sep 17 00:00:00 2001
From: Pasha Stetsenko <stpasha@gmail.com>
Date: Sun, 19 Feb 2023 10:35:41 -0800
Subject: [PATCH 06/22] use children in the example

---
 examples/lib/stories/layout/align_component.dart | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/examples/lib/stories/layout/align_component.dart b/examples/lib/stories/layout/align_component.dart
index 854fd36eb4d..dfdb1c1df04 100644
--- a/examples/lib/stories/layout/align_component.dart
+++ b/examples/lib/stories/layout/align_component.dart
@@ -16,8 +16,9 @@ class AlignComponentExample extends FlameGame {
   void onLoad() {
     addAll([
       AlignComponent(
-        child: CircleComponent(radius: 40)
-          ..add(
+        child: CircleComponent(
+          radius: 40,
+          children: [
             SizeEffect.by(
               Vector2.all(25),
               EffectController(
@@ -26,35 +27,28 @@ class AlignComponentExample extends FlameGame {
                 reverseDuration: 0.5,
               ),
             ),
-          )
-          ..add(
             AlignComponent(
               alignment: Anchor.topCenter,
               child: CircleComponent(radius: 10, anchor: Anchor.bottomCenter),
               keepChildAnchor: true,
             ),
-          )
-          ..add(
             AlignComponent(
               alignment: Anchor.bottomCenter,
               child: CircleComponent(radius: 10, anchor: Anchor.topCenter),
               keepChildAnchor: true,
             ),
-          )
-          ..add(
             AlignComponent(
               alignment: Anchor.centerLeft,
               child: CircleComponent(radius: 10, anchor: Anchor.centerRight),
               keepChildAnchor: true,
             ),
-          )
-          ..add(
             AlignComponent(
               alignment: Anchor.centerRight,
               child: CircleComponent(radius: 10, anchor: Anchor.centerLeft),
               keepChildAnchor: true,
             ),
-          ),
+          ],
+        ),
         alignment: Anchor.center,
       ),
       AlignComponent(

From 1805cb260bc2092668177af00dfcd7fcb956efd5 Mon Sep 17 00:00:00 2001
From: Pasha Stetsenko <stpasha@gmail.com>
Date: Sun, 19 Feb 2023 10:36:12 -0800
Subject: [PATCH 07/22] a

---
 packages/flame/lib/src/layout/align_component.dart | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/flame/lib/src/layout/align_component.dart b/packages/flame/lib/src/layout/align_component.dart
index 396ed5834c8..17df48eb5db 100644
--- a/packages/flame/lib/src/layout/align_component.dart
+++ b/packages/flame/lib/src/layout/align_component.dart
@@ -48,7 +48,7 @@ import 'package:vector_math/vector_math_64.dart';
 /// );
 /// ```
 class AlignComponent extends PositionComponent {
-  /// Creates component that keeps its [child] positioned according to the
+  /// Creates a component that keeps its [child] positioned according to the
   /// [alignment] within this component's bounding box.
   ///
   /// More precisely, the child will be placed at [alignment] relative position

From 560dd4ce2cd475c70023d2b2e11399e0df37630d Mon Sep 17 00:00:00 2001
From: Pasha Stetsenko <stpasha@gmail.com>
Date: Sun, 19 Feb 2023 10:38:21 -0800
Subject: [PATCH 08/22] capitalize Flutter

---
 packages/flame/lib/src/layout/align_component.dart | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/flame/lib/src/layout/align_component.dart b/packages/flame/lib/src/layout/align_component.dart
index 17df48eb5db..e528e064e47 100644
--- a/packages/flame/lib/src/layout/align_component.dart
+++ b/packages/flame/lib/src/layout/align_component.dart
@@ -5,7 +5,7 @@ import 'package:flutter/widgets.dart';
 import 'package:vector_math/vector_math_64.dart';
 
 /// **AlignComponent** is a layout component that positions its child within
-/// itself using relative placement. It is similar to flutter's [Align] widget.
+/// itself using relative placement. It is similar to Flutter's [Align] widget.
 ///
 /// The component requires a single [child], which will be the target of this
 /// component's alignment. Of course, other children can be added to this

From 2e92194c4e84aa27b89736b2c729a7c819b68273 Mon Sep 17 00:00:00 2001
From: Pasha Stetsenko <stpasha@gmail.com>
Date: Wed, 1 Mar 2023 01:10:15 -0800
Subject: [PATCH 09/22] game-in-game example

---
 .../lib/stories/components/game_in_game_example.dart     | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/examples/lib/stories/components/game_in_game_example.dart b/examples/lib/stories/components/game_in_game_example.dart
index 0301bce88fd..16dd4bd8913 100644
--- a/examples/lib/stories/components/game_in_game_example.dart
+++ b/examples/lib/stories/components/game_in_game_example.dart
@@ -36,10 +36,9 @@ class GameChangeTimer extends TimerComponent
   @override
   void onTick() {
     final child = gameRef.draggablesGame.square;
-    if (child.parent == gameRef.draggablesGame) {
-      child.parent = gameRef.composedGame.parentSquare;
-    } else {
-      child.parent = gameRef.draggablesGame;
-    }
+    final newParent = child.parent == gameRef.draggablesGame
+        ? gameRef.composedGame.parentSquare as Component
+        : gameRef.draggablesGame;
+    child.changeParent(newParent);
   }
 }

From d838f52bc61aeffb5ed1818861063c43099df7ec Mon Sep 17 00:00:00 2001
From: Pasha Stetsenko <stpasha@gmail.com>
Date: Wed, 1 Mar 2023 01:19:14 -0800
Subject: [PATCH 10/22] trailing commas

---
 .../lib/stories/layout/align_component.dart   | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/examples/lib/stories/layout/align_component.dart b/examples/lib/stories/layout/align_component.dart
index dfdb1c1df04..e4296441ba9 100644
--- a/examples/lib/stories/layout/align_component.dart
+++ b/examples/lib/stories/layout/align_component.dart
@@ -29,22 +29,34 @@ class AlignComponentExample extends FlameGame {
             ),
             AlignComponent(
               alignment: Anchor.topCenter,
-              child: CircleComponent(radius: 10, anchor: Anchor.bottomCenter),
+              child: CircleComponent(
+                radius: 10,
+                anchor: Anchor.bottomCenter,
+              ),
               keepChildAnchor: true,
             ),
             AlignComponent(
               alignment: Anchor.bottomCenter,
-              child: CircleComponent(radius: 10, anchor: Anchor.topCenter),
+              child: CircleComponent(
+                radius: 10,
+                anchor: Anchor.topCenter,
+              ),
               keepChildAnchor: true,
             ),
             AlignComponent(
               alignment: Anchor.centerLeft,
-              child: CircleComponent(radius: 10, anchor: Anchor.centerRight),
+              child: CircleComponent(
+                radius: 10,
+                anchor: Anchor.centerRight,
+              ),
               keepChildAnchor: true,
             ),
             AlignComponent(
               alignment: Anchor.centerRight,
-              child: CircleComponent(radius: 10, anchor: Anchor.centerLeft),
+              child: CircleComponent(
+                radius: 10,
+                anchor: Anchor.centerLeft,
+              ),
               keepChildAnchor: true,
             ),
           ],

From d7aa2c1965125eb8387fa15d800b6be1eb50fe06 Mon Sep 17 00:00:00 2001
From: Pasha Stetsenko <stpasha@gmail.com>
Date: Wed, 1 Mar 2023 01:28:11 -0800
Subject: [PATCH 11/22] Added ReadonlySizeProvider interface

---
 packages/flame/lib/src/effects/provider_interfaces.dart | 9 +++++++--
 packages/flame/lib/src/game/flame_game.dart             | 9 +++------
 packages/flame/lib/src/layout/align_component.dart      | 2 +-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/flame/lib/src/effects/provider_interfaces.dart b/packages/flame/lib/src/effects/provider_interfaces.dart
index 74a076fe361..967adacfae1 100644
--- a/packages/flame/lib/src/effects/provider_interfaces.dart
+++ b/packages/flame/lib/src/effects/provider_interfaces.dart
@@ -46,9 +46,14 @@ abstract class AnchorProvider {
   set anchor(Anchor value);
 }
 
-/// Interface for a component that can be affected by size effects.
-abstract class SizeProvider {
+/// Interface for a class that has [size] property which can be read but not
+/// modified.
+abstract class ReadonlySizeProvider {
   Vector2 get size;
+}
+
+/// Interface for a component that can be affected by size effects.
+abstract class SizeProvider extends ReadonlySizeProvider {
   set size(Vector2 value);
 }
 
diff --git a/packages/flame/lib/src/game/flame_game.dart b/packages/flame/lib/src/game/flame_game.dart
index ac053bf79a2..e7c0c18a4bb 100644
--- a/packages/flame/lib/src/game/flame_game.dart
+++ b/packages/flame/lib/src/game/flame_game.dart
@@ -16,7 +16,9 @@ import 'package:meta/meta.dart';
 ///
 /// This is the recommended base class to use for most games made with Flame.
 /// It is based on the Flame Component System (also known as FCS).
-class FlameGame extends ComponentTreeRoot with Game implements SizeProvider {
+class FlameGame extends ComponentTreeRoot
+    with Game
+    implements ReadonlySizeProvider {
   FlameGame({
     super.children,
     Camera? camera,
@@ -184,9 +186,4 @@ class FlameGame extends ComponentTreeRoot with Game implements SizeProvider {
       }
     }
   }
-
-  @override
-  set size(Vector2 value) {
-    throw UnsupportedError('The size of FlameGame cannot be set explicitly');
-  }
 }
diff --git a/packages/flame/lib/src/layout/align_component.dart b/packages/flame/lib/src/layout/align_component.dart
index e528e064e47..3547f444b57 100644
--- a/packages/flame/lib/src/layout/align_component.dart
+++ b/packages/flame/lib/src/layout/align_component.dart
@@ -108,7 +108,7 @@ class AlignComponent extends PositionComponent {
   @override
   void onMount() {
     assert(
-      parent is SizeProvider,
+      parent is ReadonlySizeProvider,
       "An AlignComponent's parent must have a size",
     );
   }

From 6fe90f7b188f1b798b72d326156aded55648782e Mon Sep 17 00:00:00 2001
From: Pasha Stetsenko <stpasha@gmail.com>
Date: Wed, 1 Mar 2023 01:57:52 -0800
Subject: [PATCH 12/22] fix mounting

---
 packages/flame/lib/src/components/core/component.dart | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/flame/lib/src/components/core/component.dart b/packages/flame/lib/src/components/core/component.dart
index 213430ffd73..618b60c022f 100644
--- a/packages/flame/lib/src/components/core/component.dart
+++ b/packages/flame/lib/src/components/core/component.dart
@@ -1,13 +1,13 @@
 import 'dart:async';
 
 import 'package:collection/collection.dart';
-import 'package:flame/effects.dart';
 import 'package:flame/src/cache/value_cache.dart';
 import 'package:flame/src/components/core/component_set.dart';
 import 'package:flame/src/components/core/component_tree_root.dart';
 import 'package:flame/src/components/core/position_type.dart';
 import 'package:flame/src/components/mixins/coordinate_transform.dart';
 import 'package:flame/src/components/mixins/has_game_ref.dart';
+import 'package:flame/src/effects/provider_interfaces.dart';
 import 'package:flame/src/game/flame_game.dart';
 import 'package:flame/src/game/game.dart';
 import 'package:flame/src/gestures/events.dart';
@@ -839,8 +839,8 @@ class Component {
     assert(isLoaded && !isLoading);
     _setMountingBit();
     onGameResize(_parent!.findGame()!.canvasSize);
-    if (_parent is SizeProvider) {
-      onParentResize((_parent! as SizeProvider).size);
+    if (_parent is ReadonlySizeProvider) {
+      onParentResize((_parent! as ReadonlySizeProvider).size);
     }
     if (isRemoved) {
       _clearRemovedBit();

From b62481c9d2f08e1d30de3d08e5deb4de52bc3091 Mon Sep 17 00:00:00 2001
From: Pasha Stetsenko <pasha@Pashas-MacBook-Pro.local>
Date: Mon, 27 Feb 2023 14:25:19 -0800
Subject: [PATCH 13/22] melos bs

---
 pubspec.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pubspec.lock b/pubspec.lock
index 65f76eaa68c..8b19f6c4190 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -290,4 +290,4 @@ packages:
     source: hosted
     version: "2.0.3"
 sdks:
-  dart: ">=2.18.0 <4.0.0"
+  dart: ">=2.18.0 <3.0.0"

From f4a696363e8a6a721e648c3f36b1cd05af55be6d Mon Sep 17 00:00:00 2001
From: Luan Nico <luanpotter27@gmail.com>
Date: Wed, 1 Mar 2023 04:29:06 -0500
Subject: [PATCH 14/22] docs: Clarify required flutter channel on CONTRIBUTING
 guidelines (#2376)

Clarify required flutter channel on CONTRIBUTING guidelines
---
 CONTRIBUTING.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b552ca6187f..c7c5da41c84 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -75,7 +75,14 @@ and it will be automatically reflected in the PR.
 
 ### Environment Setup
 
-Flame uses [Melos] to manage the project and dependencies.
+Flame is setup to run with the most recent `stable` version of Flutter, so make sure your version
+matches that:
+
+```bash
+flutter channel stable
+```
+
+Also, Flame uses [Melos] to manage the project and dependencies.
 
 To install Melos, run the following command from your terminal:
 

From 34a1fd5467249a47f6616d9667a874a65f1cf82a Mon Sep 17 00:00:00 2001
From: Luan Nico <luanpotter27@gmail.com>
Date: Wed, 1 Mar 2023 04:40:30 -0500
Subject: [PATCH 15/22] refactor: Remove unused variable "tapTimes" from
 multi_touch_tap_detector_test.dart (#2379)

This is a cleanup identified on this issue: #2308
Using an amazing unused-code tooling
Now, since Flame is a public API, unused code might not be trivial - it might just mean untested code.

This one was a no-brainer -- the variable was clearly replaced by specific counters during the writing of the test and forgotten there:

  int nOnTapDown = 0;
  int nOnLongTapDown = 0;
  int nOnTapUp = 0;
  int nOnTap = 0;
  int nOnTapCancel = 0;

It wasn't even increment and the taps are already thoroughly tested more granularly
---
 .../test/events/game_mixins/multi_touch_tap_detector_test.dart   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/flame/test/events/game_mixins/multi_touch_tap_detector_test.dart b/packages/flame/test/events/game_mixins/multi_touch_tap_detector_test.dart
index 4dbea59ddf0..06508d670c0 100644
--- a/packages/flame/test/events/game_mixins/multi_touch_tap_detector_test.dart
+++ b/packages/flame/test/events/game_mixins/multi_touch_tap_detector_test.dart
@@ -88,7 +88,6 @@ void main() {
 }
 
 class _GameWithMultiTouchTapDetector extends Game with MultiTouchTapDetector {
-  int tapTimes = 0;
   bool updated = false;
   bool rendered = false;
 

From 62e45c766bdf41f0f773caf0fe3285d1c118c675 Mon Sep 17 00:00:00 2001
From: Luan Nico <luanpotter27@gmail.com>
Date: Wed, 1 Mar 2023 09:00:16 -0500
Subject: [PATCH 16/22] test: Add test for the intersections test helper method
 (#2378)

This is a cleanup identified on this issue: #2308
Using an amazing unused-code tooling
Now, since Flame is a public API, unused code might not be trivial - it might just mean untested code.

In this case, we have a test helper, which is a public function we expose to help people write better tests.
Which means that the function could be useful, it was just lacking a test -- so I added it.
That being said, if this method is deemed unnecessary for users, I can just remove it instead - lmk.
---
 .../test/collisions/collision_type_test.dart    | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/flame/test/collisions/collision_type_test.dart b/packages/flame/test/collisions/collision_type_test.dart
index 5905fed78ba..12b5dc25993 100644
--- a/packages/flame/test/collisions/collision_type_test.dart
+++ b/packages/flame/test/collisions/collision_type_test.dart
@@ -27,6 +27,23 @@ void main() {
         expect(blockA.activeCollisions.length, 1);
         expect(blockB.activeCollisions.length, 1);
       },
+      'intersections are returned': (game) async {
+        final blockA = TestBlock(
+          Vector2.zero(),
+          Vector2.all(10),
+        );
+        final blockB = TestBlock(
+          Vector2.all(1),
+          Vector2.all(10),
+        );
+        await game.ensureAddAll([blockA, blockB]);
+        game.update(0);
+
+        final points = blockA.intersections(blockB);
+        expect(points.length, 2);
+        expect(points, contains(Vector2(1, 10)));
+        expect(points, contains(Vector2(10, 1)));
+      },
       'passives do not collide': (game) async {
         final blockA = TestBlock(
           Vector2.zero(),

From da5ac3bc20641b51bcec43d9d4f4c790c42250eb Mon Sep 17 00:00:00 2001
From: Luan Nico <luanpotter27@gmail.com>
Date: Wed, 1 Mar 2023 12:03:39 -0500
Subject: [PATCH 17/22] refactor: Use variable name on toString in
 component_test.dart (#2377)

This is a cleanup identified on this issue: #2308
Using an amazing unused-code tooling
Now, since Flame is a public API, unused code might not be trivial - it might just mean untested code.

In this case, the unused code is in the tests, which likely means it is indeed necessary.
I tried to infer the intent of the author here, and even considered adding the names of the components to the events, but the events are already always per component, so that was meaningless. I also thought it might be a missing toString, that they would wish to show the component name for debugging purposes, but I didn't see any asserts/logs on the component objects themselves (just the events).
So I concluded there is no reason to keep this field, but lmk if anyone disagrees and I can bring it back and add some function to it.
---
 packages/flame/test/components/component_test.dart | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/flame/test/components/component_test.dart b/packages/flame/test/components/component_test.dart
index d6d5b159d82..a4a3979d289 100644
--- a/packages/flame/test/components/component_test.dart
+++ b/packages/flame/test/components/component_test.dart
@@ -33,7 +33,7 @@ void main() {
       testWithFlameGame(
         'component.removed completes if obtained before the game was ready',
         (game) async {
-          final component = LifecycleComponent('component');
+          final component = LifecycleComponent();
           final removed = component.removed;
           await game.add(component);
           await game.ready();
@@ -48,7 +48,7 @@ void main() {
       testWithFlameGame(
         'component removed completes when set after game is ready',
         (game) async {
-          final component = LifecycleComponent('component');
+          final component = LifecycleComponent();
           await game.add(component);
           await game.ready();
           final removed = component.removed;
@@ -1149,9 +1149,9 @@ class TwoChildrenComponent extends Component {
 
 class LifecycleComponent extends Component {
   final List<String> events = [];
-  final String? name;
+  final String name;
 
-  LifecycleComponent([this.name]);
+  LifecycleComponent([this.name = '']);
 
   int countEvents(String event) {
     return events.where((e) => e == event).length;
@@ -1188,6 +1188,9 @@ class LifecycleComponent extends Component {
     super.onGameResize(size);
     events.add('onGameResize $size');
   }
+
+  @override
+  String toString() => 'LifecycleComponent($name)';
 }
 
 class _SlowLoadingComponent extends Component {

From 4e964af60b3cfe8ca29b327618a1f8e495a52e2b Mon Sep 17 00:00:00 2001
From: Luan Nico <luanpotter27@gmail.com>
Date: Wed, 1 Mar 2023 12:58:22 -0500
Subject: [PATCH 18/22] refactor: Remove unused event "ScoreEventCleared" from
 flame_block example (#2380)

# Description

This is a cleanup identified on this issue:
https://github.com/flame-engine/flame/issues/2308
Using an amazing unused-code tooling
Now, since Flame is a public API, unused code might not be trivial - it
might just mean untested code.

Since this an example package, it definitely should never have unused
code.
In this case, the constructor wasn't being used, but upon deeper
investigation, that was because this particular event wasn't ever fired
at all.
So I removed it entirely. If this was supposed to be fired somewhere by
the example, please lmk and I can add the missing firing.
But as far as I can see, the event serves no purpose in this example.

## Checklist

- [x] I have followed the [Contributor Guide] when preparing my PR.
- [x] I have updated/added tests for ALL new/updated/fixed
functionality.
- [x] I have updated/added relevant documentation in `docs` and added
dartdoc comments with `///`.
- [x] I have updated/added relevant examples in `examples` or `docs`.

## Breaking Change?

- [ ] Yes, this PR is a breaking change.
- [x] No, this PR is not a breaking change.

<!-- Links -->
[Contributor Guide]:
https://github.com/flame-engine/flame/blob/main/CONTRIBUTING.md
[Conventional Commit]: https://conventionalcommits.org/
[CHANGELOG]:
https://github.com/flame-engine/flame/blob/main/CHANGELOG.md

Co-authored-by: Lukas Klingsbo <me@lukas.fyi>
---
 .../example/lib/src/game_stats/bloc/game_stats_bloc.dart   | 6 ------
 .../example/lib/src/game_stats/bloc/game_stats_event.dart  | 7 -------
 2 files changed, 13 deletions(-)

diff --git a/packages/flame_bloc/example/lib/src/game_stats/bloc/game_stats_bloc.dart b/packages/flame_bloc/example/lib/src/game_stats/bloc/game_stats_bloc.dart
index c69934295a3..896e1bcb64e 100644
--- a/packages/flame_bloc/example/lib/src/game_stats/bloc/game_stats_bloc.dart
+++ b/packages/flame_bloc/example/lib/src/game_stats/bloc/game_stats_bloc.dart
@@ -12,12 +12,6 @@ class GameStatsBloc extends Bloc<GameStatsEvent, GameStatsState> {
       ),
     );
 
-    on<ScoreEventCleared>(
-      (event, emit) => emit(
-        state.copyWith(score: 0),
-      ),
-    );
-
     on<PlayerRespawned>(
       (event, emit) => emit(
         state.copyWith(status: GameStatus.respawned),
diff --git a/packages/flame_bloc/example/lib/src/game_stats/bloc/game_stats_event.dart b/packages/flame_bloc/example/lib/src/game_stats/bloc/game_stats_event.dart
index 1c0c9a72df8..4c47f23ee80 100644
--- a/packages/flame_bloc/example/lib/src/game_stats/bloc/game_stats_event.dart
+++ b/packages/flame_bloc/example/lib/src/game_stats/bloc/game_stats_event.dart
@@ -13,13 +13,6 @@ class ScoreEventAdded extends GameStatsEvent {
   List<Object?> get props => [score];
 }
 
-class ScoreEventCleared extends GameStatsEvent {
-  const ScoreEventCleared();
-
-  @override
-  List<Object?> get props => [];
-}
-
 class PlayerDied extends GameStatsEvent {
   const PlayerDied();
 

From 002383d90743cc6055253e84bb00a2806c19fcba Mon Sep 17 00:00:00 2001
From: Luan Nico <luanpotter27@gmail.com>
Date: Wed, 1 Mar 2023 13:08:13 -0500
Subject: [PATCH 19/22] chore: Standardize and unify SDK versions across
 packages (#2374)

# Description

This does two things:

## Use double quotes for SDK constraints

Standardize the usage of single or double quotes to specify sdk
constraints across pubspecs
I see no reason this should not be kept consistent
I also see no reason to prefer one over the other, so I searched the
code base and there are 7 instances of single quote vs 32 of double
quotes, so I favored the later

## Update all SDK constraints to 2.18

Let me know if there are any issues with it, but I believe we should
keep this consistent across all packages.
Also there is a pubspec on root which imply all should be on 2.18
anyway.

## Checklist

- [x] I have followed the [Contributor Guide] when preparing my PR.
- [x] I have updated/added tests for ALL new/updated/fixed
functionality.
- [x] I have updated/added relevant documentation in `docs` and added
dartdoc comments with `///`.
- [x] I have updated/added relevant examples in `examples` or `docs`.

## Breaking Change?

- [ ] Yes, this PR is a breaking change.
- [x] No, this PR is not a breaking change.

<!-- Links -->
[Contributor Guide]:
https://github.com/flame-engine/flame/blob/main/CONTRIBUTING.md
[Conventional Commit]: https://conventionalcommits.org/
[CHANGELOG]:
https://github.com/flame-engine/flame/blob/main/CHANGELOG.md

Co-authored-by: Lukas Klingsbo <me@lukas.fyi>
---
 doc/flame/examples/pubspec.yaml                | 2 +-
 doc/tutorials/klondike/app/pubspec.yaml        | 2 +-
 doc/tutorials/platformer/app/pubspec.yaml      | 2 +-
 doc/tutorials/space_shooter/app/pubspec.yaml   | 2 +-
 examples/games/padracing/pubspec.yaml          | 2 +-
 examples/games/rogue_shooter/pubspec.yaml      | 2 +-
 examples/games/trex/pubspec.yaml               | 2 +-
 examples/pubspec.yaml                          | 2 +-
 packages/flame/example/pubspec.yaml            | 2 +-
 packages/flame/pubspec.yaml                    | 2 +-
 packages/flame_audio/example/pubspec.yaml      | 2 +-
 packages/flame_audio/pubspec.yaml              | 2 +-
 packages/flame_bloc/example/pubspec.yaml       | 2 +-
 packages/flame_bloc/pubspec.yaml               | 2 +-
 packages/flame_fire_atlas/example/pubspec.yaml | 2 +-
 packages/flame_fire_atlas/pubspec.yaml         | 2 +-
 packages/flame_flare/example/pubspec.yaml      | 2 +-
 packages/flame_flare/pubspec.yaml              | 2 +-
 packages/flame_forge2d/example/pubspec.yaml    | 2 +-
 packages/flame_forge2d/pubspec.yaml            | 2 +-
 packages/flame_isolate/example/pubspec.yaml    | 2 +-
 packages/flame_jenny/jenny/pubspec.yaml        | 2 +-
 packages/flame_jenny/pubspec.yaml              | 2 +-
 packages/flame_lottie/example/pubspec.yaml     | 2 +-
 packages/flame_lottie/pubspec.yaml             | 2 +-
 packages/flame_oxygen/example/pubspec.yaml     | 2 +-
 packages/flame_oxygen/pubspec.yaml             | 2 +-
 packages/flame_rive/example/pubspec.yaml       | 2 +-
 packages/flame_rive/pubspec.yaml               | 2 +-
 packages/flame_studio/pubspec.yaml             | 2 +-
 packages/flame_svg/example/pubspec.yaml        | 2 +-
 packages/flame_svg/pubspec.yaml                | 2 +-
 packages/flame_test/example/pubspec.yaml       | 2 +-
 packages/flame_test/pubspec.yaml               | 2 +-
 packages/flame_tiled/example/pubspec.yaml      | 2 +-
 packages/flame_tiled/pubspec.yaml              | 2 +-
 pubspec.yaml                                   | 2 +-
 37 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/doc/flame/examples/pubspec.yaml b/doc/flame/examples/pubspec.yaml
index 061fb9f6e51..26b192e2f56 100644
--- a/doc/flame/examples/pubspec.yaml
+++ b/doc/flame/examples/pubspec.yaml
@@ -4,7 +4,7 @@ version: 1.0.0
 publish_to: none
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/doc/tutorials/klondike/app/pubspec.yaml b/doc/tutorials/klondike/app/pubspec.yaml
index 72f4736c2ca..75548798f32 100644
--- a/doc/tutorials/klondike/app/pubspec.yaml
+++ b/doc/tutorials/klondike/app/pubspec.yaml
@@ -4,7 +4,7 @@ version: 1.0.0
 publish_to: none
 
 environment:
-  sdk: '>=2.17.0 <3.0.0'
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   flame: ^1.6.0
diff --git a/doc/tutorials/platformer/app/pubspec.yaml b/doc/tutorials/platformer/app/pubspec.yaml
index 49443f8a18a..2ff6bc8b53f 100644
--- a/doc/tutorials/platformer/app/pubspec.yaml
+++ b/doc/tutorials/platformer/app/pubspec.yaml
@@ -4,7 +4,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 version: 1.0.0+1
 
 environment:
-  sdk: '>=2.17.0 <3.0.0'
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   flame: ^1.6.0
diff --git a/doc/tutorials/space_shooter/app/pubspec.yaml b/doc/tutorials/space_shooter/app/pubspec.yaml
index 1394d5838b4..354a8207d67 100644
--- a/doc/tutorials/space_shooter/app/pubspec.yaml
+++ b/doc/tutorials/space_shooter/app/pubspec.yaml
@@ -6,7 +6,7 @@ publish_to: 'none'
 version: 1.0.0+1
 
 environment:
-  sdk: '>=2.17.0 <3.0.0'
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   flame: ^1.6.0
diff --git a/examples/games/padracing/pubspec.yaml b/examples/games/padracing/pubspec.yaml
index 4e62ed8a7d4..a0e12e6d394 100644
--- a/examples/games/padracing/pubspec.yaml
+++ b/examples/games/padracing/pubspec.yaml
@@ -4,7 +4,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   collection: ^1.16.0
diff --git a/examples/games/rogue_shooter/pubspec.yaml b/examples/games/rogue_shooter/pubspec.yaml
index 65bdf2f3b36..c7c66bc61fa 100644
--- a/examples/games/rogue_shooter/pubspec.yaml
+++ b/examples/games/rogue_shooter/pubspec.yaml
@@ -6,7 +6,7 @@ publish_to: 'none'
 version: 0.1.0
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/examples/games/trex/pubspec.yaml b/examples/games/trex/pubspec.yaml
index 2456a500614..7acef1ed617 100644
--- a/examples/games/trex/pubspec.yaml
+++ b/examples/games/trex/pubspec.yaml
@@ -6,7 +6,7 @@ publish_to: 'none'
 version: 0.1.0
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/examples/pubspec.yaml b/examples/pubspec.yaml
index fb839d07da3..437e3c61e5b 100644
--- a/examples/pubspec.yaml
+++ b/examples/pubspec.yaml
@@ -6,7 +6,7 @@ publish_to: "none"
 version: 0.1.0
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame/example/pubspec.yaml b/packages/flame/example/pubspec.yaml
index 17354e6a2b7..25ecfb3cbc9 100644
--- a/packages/flame/example/pubspec.yaml
+++ b/packages/flame/example/pubspec.yaml
@@ -4,7 +4,7 @@ version: 0.1.0
 publish_to: 'none'
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame/pubspec.yaml b/packages/flame/pubspec.yaml
index 350d8b48982..750e7e7760b 100644
--- a/packages/flame/pubspec.yaml
+++ b/packages/flame/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame_audio/example/pubspec.yaml b/packages/flame_audio/example/pubspec.yaml
index c10945edf9a..f0b460e9ec7 100644
--- a/packages/flame_audio/example/pubspec.yaml
+++ b/packages/flame_audio/example/pubspec.yaml
@@ -6,7 +6,7 @@ publish_to: 'none'
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   flame: ^1.6.0
diff --git a/packages/flame_audio/pubspec.yaml b/packages/flame_audio/pubspec.yaml
index 159ede2b653..4f95d6ae4ba 100644
--- a/packages/flame_audio/pubspec.yaml
+++ b/packages/flame_audio/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame_bloc/example/pubspec.yaml b/packages/flame_bloc/example/pubspec.yaml
index c08860b76f2..5ebe1110d1b 100644
--- a/packages/flame_bloc/example/pubspec.yaml
+++ b/packages/flame_bloc/example/pubspec.yaml
@@ -6,7 +6,7 @@ publish_to: 'none'
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   equatable: ^2.0.3
diff --git a/packages/flame_bloc/pubspec.yaml b/packages/flame_bloc/pubspec.yaml
index 6c20644aceb..501bd5b77a4 100644
--- a/packages/flame_bloc/pubspec.yaml
+++ b/packages/flame_bloc/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame_fire_atlas/example/pubspec.yaml b/packages/flame_fire_atlas/example/pubspec.yaml
index 75ff41c950f..11fce7e583d 100644
--- a/packages/flame_fire_atlas/example/pubspec.yaml
+++ b/packages/flame_fire_atlas/example/pubspec.yaml
@@ -6,7 +6,7 @@ publish_to: 'none'
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   flame: ^1.6.0
diff --git a/packages/flame_fire_atlas/pubspec.yaml b/packages/flame_fire_atlas/pubspec.yaml
index bf0c5ee280a..f2a647ac33f 100644
--- a/packages/flame_fire_atlas/pubspec.yaml
+++ b/packages/flame_fire_atlas/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame_flare/example/pubspec.yaml b/packages/flame_flare/example/pubspec.yaml
index 48508781955..f41b6fe1bed 100644
--- a/packages/flame_flare/example/pubspec.yaml
+++ b/packages/flame_flare/example/pubspec.yaml
@@ -4,7 +4,7 @@ publish_to: 'none'
 version: 0.1.0
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame_flare/pubspec.yaml b/packages/flame_flare/pubspec.yaml
index be4fccdc06d..c94f5cf12d7 100644
--- a/packages/flame_flare/pubspec.yaml
+++ b/packages/flame_flare/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame_forge2d/example/pubspec.yaml b/packages/flame_forge2d/example/pubspec.yaml
index 39944245f3b..dcfe269df24 100644
--- a/packages/flame_forge2d/example/pubspec.yaml
+++ b/packages/flame_forge2d/example/pubspec.yaml
@@ -6,7 +6,7 @@ publish_to: 'none'
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame_forge2d/pubspec.yaml b/packages/flame_forge2d/pubspec.yaml
index 91286883021..2b350e26720 100644
--- a/packages/flame_forge2d/pubspec.yaml
+++ b/packages/flame_forge2d/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame_isolate/example/pubspec.yaml b/packages/flame_isolate/example/pubspec.yaml
index b32d8b8faa7..cc2743e0488 100755
--- a/packages/flame_isolate/example/pubspec.yaml
+++ b/packages/flame_isolate/example/pubspec.yaml
@@ -6,7 +6,7 @@ publish_to: 'none'
 version: 1.0.0+1
 
 environment:
-  sdk: '>=2.18.0 <3.0.0'
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   collection: ^1.16.0
diff --git a/packages/flame_jenny/jenny/pubspec.yaml b/packages/flame_jenny/jenny/pubspec.yaml
index b56d426a35c..c4b3ef7e962 100644
--- a/packages/flame_jenny/jenny/pubspec.yaml
+++ b/packages/flame_jenny/jenny/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   meta: ^1.7.0
diff --git a/packages/flame_jenny/pubspec.yaml b/packages/flame_jenny/pubspec.yaml
index 371a10cee3a..bf64cbed5cd 100644
--- a/packages/flame_jenny/pubspec.yaml
+++ b/packages/flame_jenny/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame_lottie/example/pubspec.yaml b/packages/flame_lottie/example/pubspec.yaml
index 60522ca1afe..62e9af91de9 100644
--- a/packages/flame_lottie/example/pubspec.yaml
+++ b/packages/flame_lottie/example/pubspec.yaml
@@ -5,7 +5,7 @@ publish_to: 'none'
 version: 0.0.1+1
 
 environment:
-  sdk: '>=2.17.0 <3.0.0'
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   flame: ^1.6.0
diff --git a/packages/flame_lottie/pubspec.yaml b/packages/flame_lottie/pubspec.yaml
index 3d00920092a..e419be3af74 100644
--- a/packages/flame_lottie/pubspec.yaml
+++ b/packages/flame_lottie/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: '>=2.17.0 <3.0.0'
+  sdk: ">=2.18.0 <3.0.0"
   flutter: '>=3.3.0'
 
 dependencies:
diff --git a/packages/flame_oxygen/example/pubspec.yaml b/packages/flame_oxygen/example/pubspec.yaml
index 2e10a02a822..c15e3ef01c0 100644
--- a/packages/flame_oxygen/example/pubspec.yaml
+++ b/packages/flame_oxygen/example/pubspec.yaml
@@ -6,7 +6,7 @@ publish_to: 'none'
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   flame: ^1.6.0
diff --git a/packages/flame_oxygen/pubspec.yaml b/packages/flame_oxygen/pubspec.yaml
index 5baf31fbdd8..84b7aca417c 100644
--- a/packages/flame_oxygen/pubspec.yaml
+++ b/packages/flame_oxygen/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame_rive/example/pubspec.yaml b/packages/flame_rive/example/pubspec.yaml
index 03766a17075..fe7536337c8 100644
--- a/packages/flame_rive/example/pubspec.yaml
+++ b/packages/flame_rive/example/pubspec.yaml
@@ -4,7 +4,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   flame: ^1.6.0
diff --git a/packages/flame_rive/pubspec.yaml b/packages/flame_rive/pubspec.yaml
index 116a823c8f5..3cf02b76b88 100644
--- a/packages/flame_rive/pubspec.yaml
+++ b/packages/flame_rive/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame_studio/pubspec.yaml b/packages/flame_studio/pubspec.yaml
index 95f46603240..a2569febf7b 100644
--- a/packages/flame_studio/pubspec.yaml
+++ b/packages/flame_studio/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame_svg/example/pubspec.yaml b/packages/flame_svg/example/pubspec.yaml
index f761be72c3d..9a759c9cc33 100644
--- a/packages/flame_svg/example/pubspec.yaml
+++ b/packages/flame_svg/example/pubspec.yaml
@@ -6,7 +6,7 @@ publish_to: 'none'
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   flame: ^1.6.0
diff --git a/packages/flame_svg/pubspec.yaml b/packages/flame_svg/pubspec.yaml
index 14b09c1c129..5d9770d47df 100644
--- a/packages/flame_svg/pubspec.yaml
+++ b/packages/flame_svg/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame_test/example/pubspec.yaml b/packages/flame_test/example/pubspec.yaml
index dfbe8be46b6..663b70a315d 100644
--- a/packages/flame_test/example/pubspec.yaml
+++ b/packages/flame_test/example/pubspec.yaml
@@ -5,7 +5,7 @@ publish_to: 'none'
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   flame: ^1.6.0
diff --git a/packages/flame_test/pubspec.yaml b/packages/flame_test/pubspec.yaml
index f03976d5b84..01060d2f44a 100644
--- a/packages/flame_test/pubspec.yaml
+++ b/packages/flame_test/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/packages/flame_tiled/example/pubspec.yaml b/packages/flame_tiled/example/pubspec.yaml
index 1a85f58f95a..bb048666bcb 100644
--- a/packages/flame_tiled/example/pubspec.yaml
+++ b/packages/flame_tiled/example/pubspec.yaml
@@ -4,7 +4,7 @@ publish_to: 'none'
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
 
 dependencies:
   flame: ^1.6.0
diff --git a/packages/flame_tiled/pubspec.yaml b/packages/flame_tiled/pubspec.yaml
index 8fc156ddd3c..b01f3b7627f 100644
--- a/packages/flame_tiled/pubspec.yaml
+++ b/packages/flame_tiled/pubspec.yaml
@@ -7,7 +7,7 @@ funding:
   - https://www.buymeacoffee.com/bluefire
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"
 
 dependencies:
diff --git a/pubspec.yaml b/pubspec.yaml
index 8b92538871c..73692bd8167 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,7 +1,7 @@
 name: flame_workspace
 
 environment:
-  sdk: '>=2.18.0 <3.0.0'
+  sdk: ">=2.18.0 <3.0.0"
 
 dev_dependencies:
   melos: ^3.0.0-dev.0

From 10aa5e91d802009931f50f725329f2ce0115074c Mon Sep 17 00:00:00 2001
From: Luan Nico <luanpotter27@gmail.com>
Date: Wed, 1 Mar 2023 15:23:55 -0500
Subject: [PATCH 20/22] docs: Remove outdated index of contents from
 packages/README (#2375)

This list was wildly outdated. I could updated it but after
consideration I thought there was no value to list the directory
structure that was already represented in the github view.

Happy to pivot to just updating it though if there are preferences.
---
 packages/README.md | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/README.md b/packages/README.md
index 840b3ca1283..804f4ccb723 100644
--- a/packages/README.md
+++ b/packages/README.md
@@ -16,11 +16,3 @@ Bridge packages are packages which:
   Flame + Audioplayers, `flame_tiled`, which is Flame + tiled).
 - Packages with features that are somehow very context specific and doesn't have a place inside the
   core package (e.g. `flame_splash_screen`).
-
-
-## Index
-
-- [Flame](./flame)
-- [Flame Audio](./flame_audio)
-- [Fire Atlas](./flame_fire_atlas)
-- [Svg support](./flame_svg)

From 775de235d9176b55f7195656c5f0158218aa598e Mon Sep 17 00:00:00 2001
From: Luan Nico <luanpotter27@gmail.com>
Date: Thu, 2 Mar 2023 07:13:56 -0500
Subject: [PATCH 21/22] test: Add test for two subsequent state changes to
 flame_multi_bloc_provider_test.dart (#2381)

This is a cleanup identified on this issue: #2308
Using an amazing unused-code tooling
Now, since Flame is a public API, unused code might not be trivial - it might just mean untested code.

In this case, it is a test file, so there should definitely be no unused code.
However analyzing the unused code revealed to me some intent of testing multiple subsequent state changes (dead -> raise from dead).
I believe such test was missing entirely, so I added it. I think it holds value, but lmk if you disagree I can just delete the test and the method.
---
 .../src/flame_multi_bloc_provider_test.dart   | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/packages/flame_bloc/test/src/flame_multi_bloc_provider_test.dart b/packages/flame_bloc/test/src/flame_multi_bloc_provider_test.dart
index 614b6f5d1a5..7881a7c2ecb 100644
--- a/packages/flame_bloc/test/src/flame_multi_bloc_provider_test.dart
+++ b/packages/flame_bloc/test/src/flame_multi_bloc_provider_test.dart
@@ -182,6 +182,34 @@ void main() {
         expect(player.lastState, equals(PlayerState.sad));
         expect(inventory.lastState, equals(InventoryState.bow));
       });
+
+      testWithFlameGame(
+        'can listen to multiple subsequent state changes',
+        (game) async {
+          final playerCubit = PlayerCubit();
+          late PlayerListener player;
+
+          final provider = FlameMultiBlocProvider(
+            providers: [
+              FlameBlocProvider<PlayerCubit, PlayerState>.value(
+                value: playerCubit,
+              ),
+            ],
+            children: [
+              player = PlayerListener(),
+            ],
+          );
+          await game.ensureAdd(provider);
+
+          playerCubit.kill();
+          await Future<void>.microtask(() {});
+          expect(player.lastState, equals(PlayerState.dead));
+
+          playerCubit.riseFromTheDead();
+          await Future<void>.microtask(() {});
+          expect(player.lastState, equals(PlayerState.alive));
+        },
+      );
     });
   });
 }

From b4b8b7c1da85c5b3aae061c593d7f32fcf5f35be Mon Sep 17 00:00:00 2001
From: Pasha Stetsenko <stpasha@gmail.com>
Date: Thu, 2 Mar 2023 10:56:57 -0800
Subject: [PATCH 22/22] docs: Break out overlays docs (#2384)

The docs for overlays were a bit hard to find so I broke them out to its
own section.
They could need some some updating too with more examples and
instructions.
---
 doc/flame/flame.md    |  3 ++-
 doc/flame/game.md     | 48 -------------------------------------------
 doc/flame/overlays.md | 46 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 49 deletions(-)
 create mode 100644 doc/flame/overlays.md

diff --git a/doc/flame/flame.md b/doc/flame/flame.md
index d78748b069c..289c51c179a 100644
--- a/doc/flame/flame.md
+++ b/doc/flame/flame.md
@@ -1,4 +1,4 @@
-# flame
+# Flame
 
 - [File Structure](structure.md)
 - [Game Widget](game_widget.md)
@@ -13,6 +13,7 @@
 - [Inputs](inputs/inputs.md)
 - [Rendering](rendering/rendering.md)
 - [Layout](layout/layout.md)
+- [Overlays](overlays.md)
 - [Other](other/other.md)
 
 ```{toctree}
diff --git a/doc/flame/game.md b/doc/flame/game.md
index 938a7973682..749ebb9ee14 100644
--- a/doc/flame/game.md
+++ b/doc/flame/game.md
@@ -197,51 +197,3 @@ A Flame `Game` can be paused and resumed in two ways:
 
 When pausing a Flame `Game`, the `GameLoop` is effectively paused, meaning that no updates or new
 renders will happen until it is resumed.
-
-
-## Flutter Widgets and Game instances
-
-Since a Flame game can be wrapped in a widget, it is quite easy to use it alongside other Flutter
-widgets. But still, there is the Widgets Overlay API that makes things even easier.
-
-`Game.overlays` enables any Flutter widget to be shown on top of a game instance, this makes it very
-easy to create things like a pause menu or an inventory screen for example.
-
-This management is done via the `game.overlays.add` and `game.overlays.remove` methods that mark an
-overlay to be shown or hidden, respectively, via a `String` argument that identifies the overlay.
-After that, it can be specified which widgets represent each overlay in the `GameWidget` declaration
-by setting an `overlayBuilderMap`.
-
-```dart
-void main() {
-  // Inside the game methods:
-  final pauseOverlayIdentifier = 'PauseMenu';
-
-  // Marks 'PauseMenu' to be rendered.
-  overlays.add(pauseOverlayIdentifier);
-  // Marks 'PauseMenu' to not be rendered.
-  overlays.remove(pauseOverlayIdentifier);
-}
-```
-
-```dart
-// On the widget declaration
-final game = MyGame();
-
-Widget build(BuildContext context) {
-  return GameWidget(
-    game: game,
-    overlayBuilderMap: {
-      'PauseMenu': (BuildContext context, MyGame game) {
-        return Text('A pause menu');
-      },
-    },
-  );
-}
-```
-
-The order of rendering for an overlay is determined by the order of the keys in the
-`overlayBuilderMap`.
-
-An example of this feature can be found
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/system/overlays_example.dart).
diff --git a/doc/flame/overlays.md b/doc/flame/overlays.md
new file mode 100644
index 00000000000..897a9ff98eb
--- /dev/null
+++ b/doc/flame/overlays.md
@@ -0,0 +1,46 @@
+# Overlays
+
+Since a Flame game can be wrapped in a widget, it is quite easy to use it alongside other Flutter
+widgets in your tree. However, if you want to easily show widgets on top of your Flame game, like
+messages, menu screens or something of that nature, you can use the Widgets Overlay API to make
+things even easier.
+
+`Game.overlays` enables any Flutter widget to be shown on top of a game instance. This makes it very
+easy to create things like a pause menu or an inventory screen for example.
+
+The feature can be used via the `game.overlays.add` and `game.overlays.remove` methods that mark an
+overlay to be shown or hidden, respectively, via a `String` argument that identifies the overlay.
+After that, you can map each overlay to their corresponding Widget in your `GameWidget` declaration
+by providing an `overlayBuilderMap`.
+
+```dart
+  // Inside your game:
+  final pauseOverlayIdentifier = 'PauseMenu';
+
+  // Marks 'PauseMenu' to be rendered.
+  overlays.add(pauseOverlayIdentifier);
+  // Marks 'PauseMenu' to not be rendered.
+  overlays.remove(pauseOverlayIdentifier);
+```
+
+```dart
+// On the widget declaration
+final game = MyGame();
+
+Widget build(BuildContext context) {
+  return GameWidget(
+    game: game,
+    overlayBuilderMap: {
+      'PauseMenu': (BuildContext context, MyGame game) {
+        return Text('A pause menu');
+      },
+    },
+  );
+}
+```
+
+The order of rendering for an overlay is determined by the order of the keys in the
+`overlayBuilderMap`.
+
+An example of this feature can be found
+[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/system/overlays_example.dart).