feat: Implement padding component inflateChild (#3785)

- Exposes `inflateChild` as a field of `SingleLayoutComponent`
- Implements `inflateChild` for `PaddingComponent`
- Refactors `ExpandedComponent`

Author: livtanong

examples/lib/stories/experimental/experimental.dart

@@ -54,6 +54,10 @@ void addExperimentalStories(Dashbook dashbook) {
                 'Wrap with ExpandedComponent',
                 false,
               ),
+              paddingInflateChild: context.boolProperty(
+                'Padding Component inflates child',
+                false,
+              ),
             ),
           );
         },

examples/lib/stories/experimental/layout_component_example_1.dart

@@ -16,6 +16,7 @@ class LayoutComponentExample1 extends FlameGame with DragCallbacks {
     required this.demoSize,
     required this.padding,
     required this.expandedMode,
+    required this.paddingInflateChild,
   });
 
   static const String description = '''
@@ -31,6 +32,7 @@ the various ways you can change this layout.
   final LayoutComponentExampleSize demoSize;
   final EdgeInsets padding;
   final bool expandedMode;
+  final bool paddingInflateChild;
 
   @override
   FutureOr<void> onLoad() {
@@ -54,6 +56,7 @@ the various ways you can change this layout.
           position: Vector2.zero(),
           padding: padding,
           expandedMode: expandedMode,
+          paddingInflateChild: paddingInflateChild,
           size: demoSize.toVector2(),
         ),
       ],
@@ -83,6 +86,7 @@ class LayoutDemo1 extends LinearLayoutComponent {
     required super.position,
     required EdgeInsets padding,
     required bool expandedMode,
+    required this.paddingInflateChild,
     super.size,
     super.key,
   }) : _padding = padding,
@@ -96,7 +100,13 @@ class LayoutDemo1 extends LinearLayoutComponent {
   set expandedMode(bool value) {
     _expandedMode = value;
     removeAll(children.toList());
-    addAll(createComponentList(expandedMode: expandedMode, padding: padding));
+    addAll(
+      createComponentList(
+        expandedMode: expandedMode,
+        padding: padding,
+        inflateChild: paddingInflateChild,
+      ),
+    );
   }
 
   EdgeInsets _padding = EdgeInsets.zero;
@@ -108,10 +118,18 @@ class LayoutDemo1 extends LinearLayoutComponent {
     paddingComponent?.padding = padding;
   }
 
+  final bool paddingInflateChild;
+
   @override
   FutureOr<void> onLoad() {
     super.onLoad();
-    addAll(createComponentList(expandedMode: expandedMode, padding: padding));
+    addAll(
+      createComponentList(
+        expandedMode: expandedMode,
+        padding: padding,
+        inflateChild: paddingInflateChild,
+      ),
+    );
   }
 
   PaddingComponent? get paddingComponent {
@@ -124,6 +142,7 @@ class LayoutDemo1 extends LinearLayoutComponent {
   static List<Component> createComponentList({
     required bool expandedMode,
     required EdgeInsets padding,
+    required bool inflateChild,
   }) {
     return [
       TextComponent(text: 'Some short text'),
@@ -143,6 +162,7 @@ class LayoutDemo1 extends LinearLayoutComponent {
         ExpandedComponent(
           child: PaddingComponent(
             padding: padding,
+            inflateChild: inflateChild,
             child: RectangleComponent(
               size: Vector2(96, 96),
               paint: Paint()..color = Colors.blue,
@@ -152,6 +172,7 @@ class LayoutDemo1 extends LinearLayoutComponent {
       else
         PaddingComponent(
           padding: padding,
+          inflateChild: inflateChild,
           child: RectangleComponent(
             size: Vector2(96, 96),
             paint: Paint()..color = Colors.blue,

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

@@ -38,13 +38,10 @@ class ExpandedComponent extends SingleLayoutComponent
     super.position,
     super.anchor,
     super.priority,
-    this.inflateChild = true,
+    super.inflateChild = true,
     super.child,
   }) : super(size: null);
 
-  /// Whether or not this [ExpandedComponent] will set [child]'s size to its own
-  final bool inflateChild;
-
   @override
   void setLayoutAxisLength(LayoutAxis axis, double? value) {
     super.setLayoutAxisLength(axis, value);

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

@@ -34,9 +34,8 @@ abstract class LayoutComponent extends PositionComponent {
   /// vector components, and subsequently selective setting of the
   /// size components.
   void setLayoutSize(double? layoutSizeX, double? layoutSizeY) {
-    _layoutSizeX = layoutSizeX;
-    _layoutSizeY = layoutSizeY;
-    resetSize();
+    setLayoutAxisLength(LayoutAxis.x, layoutSizeX);
+    setLayoutAxisLength(LayoutAxis.y, layoutSizeY);
   }
 
   /// A helper function to set the appropriate layout dimension based on

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

@@ -16,6 +16,10 @@ import 'package:flutter/rendering.dart';
 /// You may set [padding] as well as the [child] after the fact, and it will
 /// cause the layout to refresh.
 ///
+/// If [inflateChild] is true, [resetSize] sets the child's size to fill up
+/// available space via [syncChildSize]. If the child is a [LayoutComponent]
+/// descendant, then [resetSize] uses the [LayoutComponent.setLayoutSize].
+///
 /// Example usage:
 /// ```dart
 /// PaddingComponent(
@@ -31,6 +35,7 @@ class PaddingComponent extends SingleLayoutComponent {
     super.position,
     super.priority,
     super.size,
+    super.inflateChild = false,
     PositionComponent? child,
   }) : _padding = padding ?? EdgeInsets.zero,
        super(child: null) {
@@ -48,8 +53,6 @@ class PaddingComponent extends SingleLayoutComponent {
 
   @override
   void layoutChildren() {
-    // Only resets to null if it's already null. This way, we avoid overwriting
-    // an explicit width/height.
     resetSize();
     final child = this.child;
     if (child == null) {
@@ -59,6 +62,11 @@ class PaddingComponent extends SingleLayoutComponent {
     child.topLeftPosition.setFrom(padding.topLeft.toVector2());
   }
 
+  @override
+  Vector2 get availableSize {
+    return padding.deflateSize(size.toSize()).toVector2();
+  }
+
   @override
   Vector2 get intrinsicSize {
     final childWidth = child?.size.x ?? 0;

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

@@ -6,6 +6,10 @@ import 'package:flame/experimental.dart';
 /// [ExpandedComponent] and [PaddingComponent], and can possibly be used to
 /// refactor AlignComponent.
 ///
+/// [inflateChild] is simply a flag that signals whether the underlying layout
+/// machinery should alter its child's size. It's up to this class's subclasses
+/// to make use of this flag.
+///
 /// Setting [child] automatically manages removing the old child from this
 /// component, as well as adding the new child to this component.
 abstract class SingleLayoutComponent extends LayoutComponent {
@@ -15,11 +19,14 @@ abstract class SingleLayoutComponent extends LayoutComponent {
     required super.anchor,
     required super.priority,
     required super.size,
+    required this.inflateChild,
     required PositionComponent? child,
   }) {
     this.child = child;
   }
 
+  final bool inflateChild;
+
   PositionComponent? _child;
 
   /// The component that will be positioned by this component. The [child] will
@@ -37,6 +44,32 @@ abstract class SingleLayoutComponent extends LayoutComponent {
     }
   }
 
+  void syncChildSize() {
+    if (!inflateChild) {
+      return;
+    }
+    final child = this.child;
+    if (child == null) {
+      return;
+    }
+    if (child.size == availableSize) {
+      return;
+    }
+    if (child is LayoutComponent) {
+      child.setLayoutSize(availableSize.x, availableSize.y);
+    } else {
+      child.size = availableSize;
+    }
+  }
+
+  @override
+  void resetSize() {
+    super.resetSize();
+    syncChildSize();
+  }
+
+  Vector2 get availableSize => size;
+
   @override
   Vector2 get intrinsicSize => child?.size ?? Vector2.zero();
 }

packages/flame/test/experimental/padding_component_test.dart

@@ -85,5 +85,26 @@ void main() {
         );
       },
     );
+    testWithFlameGame(
+      'properly sets child size when inflateChild is true',
+      (game) async {
+        final rectangle = RectangleComponent();
+        const padding = EdgeInsets.symmetric(
+          vertical: 16,
+          horizontal: 24,
+        );
+        final paddingComponent = PaddingComponent(
+          padding: padding,
+          size: Vector2(100, 200),
+          inflateChild: true,
+          child: rectangle,
+        );
+        await game.ensureAdd(paddingComponent);
+        expect(
+          rectangle.size,
+          Vector2(100 - padding.horizontal, 200 - padding.vertical),
+        );
+      },
+    );
   });
 }