Wrap a row or column's children onto new runs

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0147gqWiq3xoEdAGwWSpq9JK

Author: claude

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## Unreleased
 
+- `RowColumnNode.wrap`, `spacing` and `runSpacing`: a row or column flows its
+  children onto new runs when they don't fit, like Flutter's `Wrap`.
 - `strokeWeight` is a bindable style property of every node with strokes.
 - A navigate-back (`pop`) action reads from JSON without `destinationId`,
   which it has no use for. It is still written, as `''`, for readers that

lib/src/api/nodes/row_column_node.dart

@@ -1,5 +1,6 @@
 import 'package:json_annotation/json_annotation.dart';
 
+import '../field_access.dart';
 import '../mixins.dart';
 import '../models/models.dart';
 
@@ -24,6 +25,19 @@ class RowColumnNode extends ParentNode
   @override
   set scrollDirection(AxisC value) {}
 
+  /// Whether the children wrap onto new runs when they don't fit the main
+  /// axis, like Flutter's [Wrap] widget, instead of being laid out in a single
+  /// line.
+  bool wrap;
+
+  /// The gap between adjacent children along the main axis within a run.
+  /// Only used when [wrap] is true.
+  double spacing;
+
+  /// The gap between adjacent runs along the cross axis.
+  /// Only used when [wrap] is true.
+  double runSpacing;
+
   /// Creates a [RowColumnNode] with the given data.
   RowColumnNode({
     required super.id,
@@ -76,6 +90,9 @@ class RowColumnNode extends ParentNode
         ScrollViewKeyboardDismissBehaviorC.manual,
     bool useFlutterListView = false,
     bool shouldAlwaysScroll = true,
+    this.wrap = false,
+    this.spacing = 0,
+    this.runSpacing = 0,
   }) {
     setCornerMixin(
       cornerRadius: cornerRadius,
@@ -111,6 +128,38 @@ class RowColumnNode extends ParentNode
     TriggerType.hold,
   ];
 
+  @override
+  FieldsMap generateFields() => {
+    ...super.generateFields(),
+    'wrap': BoolFieldAccess(
+      'Wrap',
+      'Whether the children wrap onto new runs when they overflow.',
+      () => wrap,
+      (value) => wrap = value,
+      defaultValue: () => false,
+      requiresLayout: true,
+    ),
+    'spacing': NumFieldAccess<double>(
+      'Spacing',
+      'Gap between children within a run when wrapping.',
+      () => spacing,
+      (value) => spacing = value,
+      min: 0,
+      defaultValue: () => 0,
+      requiresLayout: true,
+    ),
+    'runSpacing': NumFieldAccess<double>(
+      'Run Spacing',
+      'Gap between runs when wrapping.',
+      () => runSpacing,
+      (value) => runSpacing = value,
+      min: 0,
+      defaultValue: () => 0,
+      requiresLayout: true,
+    ),
+  };
+
+  /// Creates a [RowColumnNode] from [json].
   factory RowColumnNode.fromJson(Map json) => _$RowColumnNodeFromJson(json);
 
   @override

lib/src/api/nodes/row_column_node.g.dart

@@ -121,6 +121,18 @@ List<BaseNode> sampleNodes() {
       verticalFit: SizeFit.shrinkWrap,
       padding: const EdgeInsetsModel.all(8),
     ),
+    RowColumnNode(
+      id: 'wrapRow',
+      name: 'Wrap Row',
+      basicBoxLocal: box,
+      children: ['a', 'b'],
+      rowColumnType: RowColumnType.row,
+      mainAxisAlignment: MainAxisAlignmentC.start,
+      verticalFit: SizeFit.shrinkWrap,
+      wrap: true,
+      spacing: 8,
+      runSpacing: 6,
+    ),
     FrameNode(
       id: 'frame',
       name: 'Frame',

test/json_defaults_test.dart

@@ -0,0 +1,77 @@
+import 'dart:convert';
+
+import 'package:codelessly_api/codelessly_api.dart';
+import 'package:test/test.dart';
+
+Map encodeDecode(Object? json) => jsonDecode(jsonEncode(json)) as Map;
+
+RowColumnNode _row({
+  bool wrap = false,
+  double spacing = 0,
+  double runSpacing = 0,
+}) => RowColumnNode(
+  id: 'chips',
+  name: 'Chips',
+  basicBoxLocal: NodeBox(0, 0, 200, 40),
+  children: ['a', 'b', 'c'],
+  rowColumnType: RowColumnType.row,
+  wrap: wrap,
+  spacing: spacing,
+  runSpacing: runSpacing,
+);
+
+void main() {
+  group('RowColumnNode wrap', () {
+    test('defaults to no wrap and zero spacing', () {
+      final node = _row();
+      expect(node.wrap, isFalse);
+      expect(node.spacing, 0);
+      expect(node.runSpacing, 0);
+    });
+
+    test('default values are left out of JSON', () {
+      final json = encodeDecode(_row().toJson());
+      expect(json.containsKey('wrap'), isFalse);
+      expect(json.containsKey('spacing'), isFalse);
+      expect(json.containsKey('runSpacing'), isFalse);
+    });
+
+    test('round-trips wrap, spacing and runSpacing', () {
+      final json = encodeDecode(
+        _row(wrap: true, spacing: 8, runSpacing: 6.5).toJson(),
+      );
+      expect(json['wrap'], isTrue);
+      expect(json['spacing'], 8);
+      expect(json['runSpacing'], 6.5);
+
+      final back = NodeJsonConverter().fromJson(json)! as RowColumnNode;
+      expect(back.wrap, isTrue);
+      expect(back.spacing, 8);
+      expect(back.runSpacing, 6.5);
+      expect(encodeDecode(back.toJson()), json);
+    });
+
+    test('reads JSON written without the wrap keys', () {
+      final json =
+          encodeDecode(_row(wrap: true, spacing: 8, runSpacing: 6).toJson())
+            ..remove('wrap')
+            ..remove('spacing')
+            ..remove('runSpacing');
+      final back = RowColumnNode.fromJson(json);
+      expect(back.wrap, isFalse);
+      expect(back.spacing, 0);
+      expect(back.runSpacing, 0);
+    });
+
+    test('exposes wrap fields through generateFields', () {
+      final node = _row();
+      final fields = node.generateFields();
+      fields['wrap']!.setValue(true);
+      fields['spacing']!.setValue(12.0);
+      fields['runSpacing']!.setValue(4.0);
+      expect(node.wrap, isTrue);
+      expect(node.spacing, 12);
+      expect(node.runSpacing, 4);
+    });
+  });
+}