fix: Attach layout listeners to new children (#3648)

Prior to this fix, when adding a child to the `LayoutComponent`,
resizing the child wouldn't cause the `LayoutComponent` to resize. This
was because the children size listeners were only attached on
instantiation of `LayoutComponent` *and* during setting of `shrinkWrap`.

This fix attaches the size listeners to a single child when it is added
to `LayoutComponent` via `onChildrenChanged`.
`setupSizeListeners` is not used because it iterates through all the
children, and is unnecessary.

Author: livtanong

packages/flame/lib/experimental.dart

@@ -18,5 +18,5 @@ export 'src/experimental/geometry/shapes/rectangle.dart' show Rectangle;
 export 'src/experimental/geometry/shapes/rounded_rectangle.dart'
     show RoundedRectangle;
 export 'src/experimental/geometry/shapes/shape.dart' show Shape;
-export 'src/experimental/layout_component.dart' show LayoutComponent;
+export 'src/experimental/layout_component.dart' show LayoutComponent, Direction;
 export 'src/experimental/row_component.dart' show RowComponent;

packages/flame/lib/src/experimental/layout_component.dart

@@ -175,6 +175,15 @@ abstract class LayoutComponent extends PositionComponent {
 
   @override
   void onChildrenChanged(Component child, ChildrenChangeType type) {
+    if (child is! PositionComponent) {
+      return;
+    }
+    // setupSizeListeners(), but for a single child
+    if (type == ChildrenChangeType.added && shrinkWrap) {
+      child.size.addListener(layoutChildren);
+    } else {
+      child.size.removeListener(layoutChildren);
+    }
     layoutChildren();
   }
 

packages/flame/test/experimental/layout_component_test.dart

@@ -325,5 +325,36 @@ void main() {
         },
       });
     });
+    group('children', () {
+      runLayoutComponentTestRegistry(
+        {
+          'size responds when children are added and then resized':
+              (game, direction) async {
+            final circle = CircleComponent(radius: 20);
+            final rectangle2 = RectangleComponent(size: Vector2(100, 50));
+            // final rectangle2 = RectangleComponent(size: Vector2(200, 70));
+            final layoutComponent = LayoutComponent.fromDirection(
+              direction,
+              shrinkWrap: true,
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+            );
+            await game.ensureAdd(layoutComponent);
+            expect(layoutComponent.size, Vector2.zero());
+            await layoutComponent.ensureAddAll([
+              circle,
+              rectangle2,
+            ]);
+            rectangle2.size = Vector2(200, 70);
+            expect(
+              layoutComponent.size,
+              switch (direction) {
+                Direction.horizontal => Vector2(40 + 200, 70),
+                Direction.vertical => Vector2(200, 70 + 40),
+              },
+            );
+          },
+        },
+      );
+    });
   });
 }