feat: Padding component (#3661)

Implements a padding component similar to the padding widget of Flutter.

Author: livtanong

examples/lib/stories/experimental/layout_component_example.dart

@@ -88,6 +88,27 @@ layouts to reflect the chosen values.
         }),
       ],
     );
+    final paddingControls = RowComponent(
+      gap: 16,
+      children: [
+        TextComponent(text: 'Padding:'),
+        ...[
+          EdgeInsets.zero,
+          const EdgeInsets.all(16),
+          const EdgeInsets.symmetric(vertical: 8, horizontal: 24),
+        ].map((padding) {
+          return ButtonComponent(
+            button: TextComponent(text: padding.toString()),
+            onPressed: () {
+              rowDemo.children.query<PaddingComponent>().first.padding =
+                  padding;
+              columnDemo.children.query<PaddingComponent>().first.padding =
+                  padding;
+            },
+          );
+        }),
+      ],
+    );
     final rootColumnComponent = ColumnComponent(
       position: Vector2(48, 48),
       gap: 24,
@@ -107,6 +128,7 @@ layouts to reflect the chosen values.
         crossAxisControls,
         gapControls,
         sizeControls,
+        paddingControls,
         rowDemo,
         columnDemo,
       ],
@@ -125,9 +147,12 @@ layouts to reflect the chosen values.
       TextComponent(
         text: 'Perhaps a bit longer text',
       ),
-      CircleComponent(
-        radius: 48,
-        paint: Paint()..color = Colors.blue,
+      PaddingComponent(
+        padding: EdgeInsets.zero,
+        child: CircleComponent(
+          radius: 48,
+          paint: Paint()..color = Colors.blue,
+        ),
       ),
     ];
   }

packages/flame/lib/experimental.dart

@@ -18,5 +18,8 @@ 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, Direction;
+export 'src/experimental/layout_component.dart' show LayoutComponent;
+export 'src/experimental/linear_layout_component.dart'
+    show LinearLayoutComponent, Direction;
+export 'src/experimental/padding_component.dart' show PaddingComponent;
 export 'src/experimental/row_component.dart' show RowComponent;

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

@@ -1,4 +1,4 @@
-import 'package:flame/src/experimental/layout_component.dart';
+import 'package:flame/src/experimental/linear_layout_component.dart';
 import 'package:flutter/rendering.dart';
 
 /// ColumnComponent is a layout component that arranges its children in a
@@ -29,7 +29,7 @@ import 'package:flutter/rendering.dart';
 ///   ],
 /// );
 /// ```
-class ColumnComponent extends LayoutComponent {
+class ColumnComponent extends LinearLayoutComponent {
   ColumnComponent({
     super.mainAxisAlignment = MainAxisAlignment.start,
     super.crossAxisAlignment = CrossAxisAlignment.start,