Bindable flex for row and column children

A child's flex can be bound to a variable or formula (a bar segment sized
by a count); zero or less takes no space, like a hidden child. The slot
rebuilds when the bound value changes.

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

Author: claude

lib/src/transformers/node_transformers/passive_row_column_transformer.dart

@@ -343,6 +343,8 @@ class PassiveRowColumnWidget extends StatelessWidget {
   final WidgetBuildSettings settings;
 
   /// A flexing child hidden at runtime gives up its share of the free space,
+  /// and one with a bound `flex` variable takes that share instead of its
+  /// design flex.
   /// so a visible sibling (an empty state next to a hidden spinner) can take
   /// all of it. The flex drops to zero rather than removing the [Flexible] so
   /// the child keeps its state when it shows again.
@@ -357,12 +359,23 @@ class PassiveRowColumnWidget extends StatelessWidget {
     }
 
     Widget buildFlexible(BuildContext context) {
-      final bool hidden = manager.runtimeVisibility(context, child) == false;
+      // A bound flex (e.g. a bar segment sized by a count) replaces the
+      // design flex; a flex of zero or less takes no space, like hidden.
+      final int? boundFlex = child.variables['flex'] == null
+          ? null
+          : PropertyValueDelegate.getPropertyValue<num>(
+              child,
+              'flex',
+              scopedValues: ScopedValues.of(context),
+            )?.round();
+      final bool hidden =
+          manager.runtimeVisibility(context, child) == false ||
+          (boundFlex != null && boundFlex <= 0);
       // Without flex the hidden child would be laid out with unbounded
       // main-axis constraints, which a scrollable inside it can't take
       // (a hidden grid computed NaN offsets), so it gets no space at all.
       return Flexible(
-        flex: hidden ? 0 : sizedWidget.flex,
+        flex: hidden ? 0 : boundFlex ?? sizedWidget.flex,
         fit: sizedWidget.fit,
         child: SizedBox(
           width: hidden ? 0 : null,

test/bound_flex_test.dart

@@ -0,0 +1,80 @@
+import 'package:codelessly_api/codelessly_api.dart';
+import 'package:codelessly_sdk/codelessly_sdk.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:provider/provider.dart';
+
+/// A status bar: segments whose flex is bound to counts.
+void main() {
+  RectangleNode segment(String id, String flexPath) => RectangleNode.fromJson({
+    ...RectangleNode(
+      id: id,
+      name: id,
+      basicBoxLocal: NodeBox(0, 0, 10, 8),
+      horizontalFit: SizeFit.expanded,
+    ).toJson(),
+    'variables': {'flex': flexPath},
+  })..parentID = 'bar';
+
+  testWidgets('segments take shares of the width from their bound flex', (
+    tester,
+  ) async {
+    final RowColumnNode bar = RowColumnNode(
+      id: 'bar',
+      name: 'bar',
+      basicBoxLocal: NodeBox(0, 0, 400, 8),
+      rowColumnType: RowColumnType.row,
+      children: ['a', 'b', 'c'],
+    )..parentID = kRootNode;
+    final nodes = [
+      bar,
+      segment('a', r'${counts.closed}'),
+      segment('b', r'${= counts.open * 1}'),
+      segment('c', r'${counts.review}'),
+    ];
+    final Observable<VariableData> counts = Observable(
+      VariableData(
+        id: 'counts',
+        name: 'counts',
+        type: VariableType.map,
+        value: {'closed': 3, 'open': 1, 'review': 0},
+      ),
+    );
+    final registry = NodeRegistry()..setNodes({for (final n in nodes) n.id: n});
+    final manager = PassiveNodeTransformerManager(
+      registry.getNodeByID,
+      (context, bounds, pageID, layoutID, canvasID) => const SizedBox(),
+    );
+    await tester.pumpWidget(
+      ChangeNotifierProvider<CodelesslyContext>.value(
+        value: CodelesslyContext.empty()..variables['counts'] = counts,
+        child: MaterialApp(
+          home: Align(
+            alignment: Alignment.topLeft,
+            child: Builder(
+              builder: (context) => manager.buildWidgetFromNode(
+                bar,
+                context,
+                settings: const WidgetBuildSettings(debugLabel: 'test'),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+    expect(tester.takeException(), isNull);
+    double width(String id) => tester
+        .getSize(find.byKey(ValueKey('Rectangle Transformer of $id [$id]')))
+        .width;
+    expect(width('a'), 300);
+    expect(width('b'), 100);
+    expect(width('c'), 0);
+
+    counts.set(
+      counts.value.copyWith(value: {'closed': 1, 'open': 1, 'review': 2}),
+    );
+    await tester.pump();
+    expect(width('a'), 100);
+    expect(width('c'), 200);
+  });
+}