docs: Layout components (#3752)

Update flame docs with latest in layout experiments

---------

Co-authored-by: Lukas Klingsbo <[email protected]>
Co-authored-by: Lukas Klingsbo <[email protected]>

Author: livtanong

doc/flame/layout/expanded_component.md

@@ -0,0 +1,7 @@
+# ExpandedComponent
+
+```{dartdoc}
+:package: flame
+:symbol: ExpandedComponent
+:file: src/experimental/expanded_component.dart
+```

doc/flame/layout/layout.md

@@ -1,9 +1,17 @@
 # Layout
 
 - [Align Component](align_component.md)
+- [Row Component](row_component.md)
+- [Column Component](column_component.md)
+- [Expanded Component](expanded_component.md)
+- [Padding Component](padding_component.md)
 
 ```{toctree}
 :hidden:
 
-AlignComponent   <align_component.md>
+AlignComponent     <align_component.md>
+RowComponent       <row_component.md>
+ColumnComponent    <column_component.md>
+Expanded Component <expanded_component.md>
+Padding Component  <padding_component.md>
 ```

doc/flame/layout/padding_component.md

@@ -0,0 +1,7 @@
+# PaddingComponent
+
+```{dartdoc}
+:package: flame
+:symbol: PaddingComponent
+:file: src/experimental/padding_component.dart
+```

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

@@ -1,6 +1,8 @@
 import 'package:flame/src/experimental/linear_layout_component.dart';
 import 'package:flutter/rendering.dart';
 
+/// Warning: Experimental. API and behavior may change.
+///
 /// ColumnComponent is a layout component that arranges its children in a
 /// vertical column.
 ///
@@ -13,7 +15,7 @@ import 'package:flutter/rendering.dart';
 /// If [size] is non-null, behaves as normal explicit sizing.
 /// If [size] is null, sets the size to the minimum size that containing all
 /// the children. This is similar to setting the [size] to [intrinsicSize], but
-/// the distinct in that sizing will respond to changes in children, other
+/// distinct in that sizing will respond to changes in children, other
 /// properties, etc...
 ///
 /// Example usage:

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

@@ -1,6 +1,8 @@
 import 'package:flame/components.dart';
 import 'package:flame/experimental.dart';
 
+/// Warning: Experimental. API and behavior may change.
+///
 /// Works similarly to flutter's Expanded widget.
 /// This component must be a direct child of a [LinearLayoutComponent].
 /// While this component does not do much on its own, it allows its parent
@@ -17,6 +19,18 @@ import 'package:flame/experimental.dart';
 /// However, it does need to report to its parent when its child changes size.
 /// This is less important along the main-axis, and more important along the
 /// cross-axis.
+///
+/// Example usage:
+/// ```dart
+/// ColumnComponent(
+///   children: [
+///     ExpandedComponent(
+///       child: TextComponent(text: 'foo'),
+///     );
+///     TextComponent(text: 'bar')
+///   ],
+/// );
+/// ```
 class ExpandedComponent extends SingleLayoutComponent
     with ParentIsA<LinearLayoutComponent> {
   ExpandedComponent({

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

@@ -15,6 +15,14 @@ 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.
+///
+/// Example usage:
+/// ```dart
+/// PaddingComponent(
+///   padding: EdgeInsets.all(10),
+///   child: TextComponent(text: 'bar')
+/// );
+/// ```
 class PaddingComponent extends SingleLayoutComponent {
   PaddingComponent({
     super.key,

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

@@ -1,6 +1,8 @@
 import 'package:flame/src/experimental/linear_layout_component.dart';
 import 'package:flutter/rendering.dart';
 
+/// Warning: Experimental. API and behavior may change.
+///
 /// RowComponent is a layout component that arranges its children in a
 /// horizontal row.
 ///
@@ -13,7 +15,7 @@ import 'package:flutter/rendering.dart';
 /// If [size] is non-null, behaves as normal explicit sizing.
 /// If [size] is null, sets the size to the minimum size that containing all
 /// the children. This is similar to setting the [size] to [intrinsicSize], but
-/// the distinct in that sizing will respond to changes in children, other
+/// distinct in that sizing will respond to changes in children, other
 /// properties, etc...
 ///
 /// Example usage: