@@ -1,3 +1,5 @@
+import 'dart:math' as math;
+
 import 'package:codelessly_api/codelessly_api.dart';
 import 'package:flutter/material.dart';
 
@@ -59,6 +61,7 @@ class PassiveRowColumnTransformer extends NodeWidgetTransformer<RowColumnNode> {
     final SizeFit mainFit = isRow
         ? rowColumnNode.horizontalFit
         : rowColumnNode.verticalFit;
+    final bool wraps = rowColumnWraps(rowColumnNode);
     final bool crossWraps = isRow
         ? rowColumnNode.isVerticalWrap
         : rowColumnNode.isHorizontalWrap;
@@ -77,7 +80,9 @@ class PassiveRowColumnTransformer extends NodeWidgetTransformer<RowColumnNode> {
         rowColumnNode.crossAxisAlignment == CrossAxisAlignmentC.stretch;
     bool measureCross = false;
     bool stretchFallsBack = false;
-    if (crossMin == null && crossWraps) {
+    // A Wrap has no stretch, and its children don't align across the run
+    // (see [wrapChildWithSizeFits]), so it never needs measuring.
+    if (crossMin == null && crossWraps && !wraps) {
       final bool anyChildNeedsAlignment = childrenNodes.any(
         (child) => child.alignment != AlignmentModel.none,
       );
@@ -90,24 +95,41 @@ class PassiveRowColumnTransformer extends NodeWidgetTransformer<RowColumnNode> {
       }
     }
 
-    Widget res = CodelesslyFlex(
-      direction: isRow ? Axis.horizontal : Axis.vertical,
-      mainAxisAlignment: rowColumnNode.mainAxisAlignment.flutterAxis,
-      crossAxisAlignment: stretchFallsBack
-          ? CrossAxisAlignment.start
-          : rowColumnNode.crossAxisAlignment.flutterAxis,
-      mainAxisSize: mainFit == SizeFit.shrinkWrap
-          ? MainAxisSize.min
-          : MainAxisSize.max,
-      key: ValueKey(rowColumnNode.id),
-      children: childrenWidgets,
-    );
+    Widget res = wraps
+        ? Wrap(
+            key: ValueKey(rowColumnNode.id),
+            direction: isRow ? Axis.horizontal : Axis.vertical,
+            alignment: wrapAlignment(rowColumnNode.mainAxisAlignment),
+            crossAxisAlignment: wrapCrossAlignment(
+              rowColumnNode.crossAxisAlignment,
+            ),
+            runAlignment: wrapRunAlignment(rowColumnNode.crossAxisAlignment),
+            spacing: rowColumnSpacing(rowColumnNode),
+            runSpacing: (rowColumnNode as RowColumnNode).runSpacing,
+            children: childrenWidgets,
+          )
+        : CodelesslyFlex(
+            direction: isRow ? Axis.horizontal : Axis.vertical,
+            mainAxisAlignment: rowColumnNode.mainAxisAlignment.flutterAxis,
+            crossAxisAlignment: stretchFallsBack
+                ? CrossAxisAlignment.start
+                : rowColumnNode.crossAxisAlignment.flutterAxis,
+            mainAxisSize: mainFit == SizeFit.shrinkWrap
+                ? MainAxisSize.min
+                : MainAxisSize.max,
+            spacing: rowColumnSpacing(rowColumnNode),
+            key: ValueKey(rowColumnNode.id),
+            children: childrenWidgets,
+          );
 
     if (measureCross) {
       res = isRow ? IntrinsicHeight(child: res) : IntrinsicWidth(child: res);
     }
 
+    // A wrapping row/column flows onto new runs instead of scrolling along
+    // its main axis, so it never scrolls.
     if (withScroll &&
+        !wraps &&
         rowColumnNode is ScrollableMixin &&
         (rowColumnNode as ScrollableMixin).isScrollable) {
       res = wrapWithPaddedScrollable(
@@ -146,6 +168,93 @@ class PassiveRowColumnTransformer extends NodeWidgetTransformer<RowColumnNode> {
     );
   }
 
+  /// Whether [node] is a row/column whose children flow onto new runs when
+  /// they don't fit ([RowColumnNode.wrap]), built as a [Wrap].
+  static bool rowColumnWraps(BaseNode node) =>
+      node is RowColumnNode && node.wrap;
+
+  /// The main-axis gap between [node]'s children ([RowColumnNode.spacing]).
+  static double rowColumnSpacing(BaseNode node) =>
+      node is RowColumnNode ? math.max(0, node.spacing) : 0;
+
+  /// The [Wrap.alignment] of a wrapping row/column: how each run places its
+  /// children along the main axis, as [MainAxisAlignmentC] does for a Flex.
+  static WrapAlignment wrapAlignment(MainAxisAlignmentC alignment) =>
+      switch (alignment) {
+        MainAxisAlignmentC.start => WrapAlignment.start,
+        MainAxisAlignmentC.center => WrapAlignment.center,
+        MainAxisAlignmentC.end => WrapAlignment.end,
+        MainAxisAlignmentC.spaceBetween => WrapAlignment.spaceBetween,
+        MainAxisAlignmentC.spaceAround => WrapAlignment.spaceAround,
+        MainAxisAlignmentC.spaceEvenly => WrapAlignment.spaceEvenly,
+      };
+
+  /// The [Wrap.crossAxisAlignment] of a wrapping row/column: how children
+  /// sit within their run. A Wrap can't stretch or align baselines; those
+  /// place children at the start of the run.
+  static WrapCrossAlignment wrapCrossAlignment(CrossAxisAlignmentC alignment) =>
+      switch (alignment) {
+        CrossAxisAlignmentC.center => WrapCrossAlignment.center,
+        CrossAxisAlignmentC.end => WrapCrossAlignment.end,
+        CrossAxisAlignmentC.start ||
+        CrossAxisAlignmentC.stretch ||
+        CrossAxisAlignmentC.baseline => WrapCrossAlignment.start,
+      };
+
+  /// The [Wrap.runAlignment] of a wrapping row/column. The runs follow the
+  /// cross-axis alignment too, so a wrapping row whose children fit on one
+  /// run places them like the same row without wrapping.
+  static WrapAlignment wrapRunAlignment(CrossAxisAlignmentC alignment) =>
+      switch (alignment) {
+        CrossAxisAlignmentC.center => WrapAlignment.center,
+        CrossAxisAlignmentC.end => WrapAlignment.end,
+        CrossAxisAlignmentC.start ||
+        CrossAxisAlignmentC.stretch ||
+        CrossAxisAlignmentC.baseline => WrapAlignment.start,
+      };
+
+  /// [childWidget] as a child of a wrapping row/column.
+  ///
+  /// A [Wrap] has no free space to share, so children can't flex in it: a
+  /// child that is expanded or flexible on the main axis, and a spacer, take
+  /// their design main-axis size. Children keep their own size across the
+  /// run (there is no stretch) and their own alignment is not applied.
+  static Widget wrapChildInWrap(
+    BaseNode node,
+    RowColumnMixin parentRowColumn,
+    Widget childWidget, {
+    WidgetInserter? flexibleSpaceBackground,
+  }) {
+    final bool isRow = parentRowColumn.rowColumnType == RowColumnType.row;
+    final SizeFit mainFit = isRow ? node.horizontalFit : node.verticalFit;
+    final double designMain = isRow
+        ? node.outerBoxLocal.width
+        : node.outerBoxLocal.height;
+
+    if (node is SpacerNode) {
+      return SizedBox(
+        width: isRow ? designMain : 0,
+        height: isRow ? 0 : designMain,
+      );
+    }
+
+    // A transformer may hand back a flex parent-data widget for a Flex.
+    while (childWidget is Flexible) {
+      childWidget = childWidget.child;
+    }
+    if (flexibleSpaceBackground != null) {
+      childWidget = flexibleSpaceBackground(childWidget);
+    }
+    if (mainFit.isFlex) {
+      childWidget = SizedBox(
+        width: isRow ? designMain : null,
+        height: isRow ? null : designMain,
+        child: childWidget,
+      );
+    }
+    return childWidget;
+  }
+
   /// The design extent of a Row/Column's own box on one axis, or null when it
   /// hugs its children.
   ///
@@ -192,6 +301,15 @@ class PassiveRowColumnTransformer extends NodeWidgetTransformer<RowColumnNode> {
   }) {
     assert(parentRowColumn is RowColumnMixin);
 
+    if (rowColumnWraps(parentRowColumn)) {
+      return wrapChildInWrap(
+        node,
+        parentRowColumn as RowColumnMixin,
+        childWidget,
+        flexibleSpaceBackground: flexibleSpaceBackground,
+      );
+    }
+
     if (node is SpacerNode) {
       return childWidget;
     }