Let dialogs follow the screen and add loose flexible sizing

- A dialog whose responsive canvas holds a responsive layout (a variance
  node with breakpoints) fills the screen, so its variant follows the
  screen width: a full-screen sheet on mobile, a centered card on desktop.
  Plain fixed-size dialog canvases keep their design size.
- In a dialog, taps where nothing paints or reacts (a canvas without a
  background, an empty frame) reach the barrier, so a dismissible
  full-screen dialog closes on them.
- A squeezable shrink-wrapped node in a Row/Column is wrapped in a loose
  Flexible: it hugs its content and shrinks to the room left.

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

Author: claude

CHANGELOG.md

@@ -7,6 +7,17 @@
   `LineChartGeometry` holds the pure parts (dates, domain, interpolation,
   Catmull-Rom control points, readout text and placement).
 - `FormulaEvaluator.formatDate` exposes the `formatDate` formula function.
+- A dialog whose canvas is responsive and holds a responsive layout (a
+  `VarianceNode` with breakpoints) fills the screen instead of keeping its
+  design size, so its variant follows the screen width and each variant
+  places itself (a full-screen sheet on mobile, a centered card on desktop).
+  Dialogs with plain fixed-size canvases are unchanged.
+- In a dialog (`TapThroughScope`), taps on parts of the layout where nothing
+  paints or reacts (a canvas without a background, an empty frame) reach the
+  barrier, so a dismissible full-screen dialog closes on them.
+- A `squeezable` node that wraps its content on a Row/Column's main axis is
+  laid out as `Flexible(fit: FlexFit.loose)`: it hugs its content and
+  shrinks to the room left when the Row/Column runs out of space.
 
 ## 8.1.0
 

lib/src/transformers/node_transformers/passive_canvas_transformer.dart

@@ -195,8 +195,15 @@ class PassiveCanvasTransformer extends NodeWidgetTransformer<CanvasNode> {
         body: body,
       );
     } else {
+      final Color? background = retrieveBackgroundColor(context, node);
+      // Under a TapThroughScope, a canvas without a background takes no taps
+      // on its empty parts, so they reach its dialog's barrier.
+      final bool transparent =
+          (background == null || background.a == 0) &&
+          TapThroughScope.of(context);
       scaffold = Material(
-        color: retrieveBackgroundColor(context, node),
+        type: transparent ? MaterialType.transparency : MaterialType.canvas,
+        color: transparent ? null : background,
         child: body,
       );
     }
@@ -377,6 +384,9 @@ class PassiveCanvasTransformer extends NodeWidgetTransformer<CanvasNode> {
       settings: settings,
       builder: (context) => CanvasViewport(
         node: node,
+        followsScreen:
+            node.scaleMode == ScaleMode.responsive &&
+            hasResponsiveLayout(node, getNode),
         child: switch (node.scaleMode) {
           ScaleMode.responsive => _wrapInScaffoldForResponsive(
             context: context,
@@ -393,6 +403,20 @@ class PassiveCanvasTransformer extends NodeWidgetTransformer<CanvasNode> {
     );
   }
 
+  /// Whether [node] or a node under it is a responsive layout (a
+  /// [VarianceNode] whose variants map to breakpoints), in any variant.
+  static bool hasResponsiveLayout(BaseNode node, GetNode getNode) {
+    if (node is VarianceNode) {
+      if (node.isResponsive) return true;
+      return node.allVariantsChildren.any(
+        (id) => hasResponsiveLayout(getNode(id), getNode),
+      );
+    }
+    return node.childrenOrEmpty.any(
+      (id) => hasResponsiveLayout(getNode(id), getNode),
+    );
+  }
+
   static Color? retrieveBackgroundColor(BuildContext context, CanvasNode node) {
     final fills = <PaintModel>[
       for (final fill in node.fills)
@@ -439,6 +463,13 @@ enum CanvasSizing {
   /// The canvas keeps the size it was designed at, within the space it is
   /// given. Used where the host only centers the layout and lets it choose
   /// its size, such as a dialog.
+  ///
+  /// A responsive canvas with a responsive layout in it (see
+  /// [PassiveCanvasTransformer.hasResponsiveLayout]) fills the space
+  /// instead, as with [fill]: its variant follows the screen, and each
+  /// variant places itself in it (a full-screen sheet on a phone, a
+  /// centered card on a desktop). Give such a canvas no background so the
+  /// barrier shows around what its layout draws.
   design,
 }
 
@@ -462,6 +493,22 @@ class CanvasSizingScope extends InheritedWidget {
       sizing != oldWidget.sizing;
 }
 
+/// Makes the empty parts of the layout below let taps through to what is
+/// behind it: the parts where neither a node's fills, strokes or content
+/// paint nor a reactive node is (a transparent canvas, an empty frame). Set
+/// by `CodelesslyDialogWidget`, so a tap beside a full-screen dialog's
+/// layout reaches the barrier and closes a dismissible dialog.
+class TapThroughScope extends InheritedWidget {
+  const TapThroughScope({super.key, required super.child});
+
+  /// Whether a [TapThroughScope] is above [context].
+  static bool of(BuildContext context) =>
+      context.getInheritedWidgetOfExactType<TapThroughScope>() != null;
+
+  @override
+  bool updateShouldNotify(TapThroughScope oldWidget) => false;
+}
+
 /// The width the canvas above is laid out at, which picks the variant a
 /// responsive [VarianceNode] shows (see [VarianceNode.variantForWidth]), the
 /// same width the editor's design canvas has.
@@ -495,9 +542,19 @@ class CanvasWidthScope extends InheritedWidget {
 /// on an unbounded axis it gets its design size (see [CanvasSizing.fill]).
 class CanvasViewport extends StatelessWidget {
   final CanvasNode node;
+
+  /// Whether the canvas fills the space under [CanvasSizing.design] too: a
+  /// responsive canvas that holds a responsive layout.
+  final bool followsScreen;
+
   final Widget child;
 
-  const CanvasViewport({super.key, required this.node, required this.child});
+  const CanvasViewport({
+    super.key,
+    required this.node,
+    this.followsScreen = false,
+    required this.child,
+  });
 
   /// The canvas box for [constraints] under [sizing], per axis. A null
   /// height leaves the height to the canvas content (see
@@ -540,7 +597,9 @@ class CanvasViewport extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final CanvasSizing sizing = CanvasSizingScope.of(context);
+    final CanvasSizing sizing = followsScreen
+        ? CanvasSizing.fill
+        : CanvasSizingScope.of(context);
     return LayoutBuilder(
       builder: (context, constraints) {
         final box = resolve(node, constraints, sizing: sizing);

lib/src/transformers/node_transformers/passive_rectangle_transformer.dart

@@ -158,16 +158,33 @@ class PassiveRectangleWidget extends StatelessWidget {
       size: node.basicBoxLocal.size,
       child: Container(
         clipBehavior: getClipBehavior(node),
-        decoration: BoxDecoration(
-          boxShadow: retrieveBoxShadow(node, scopedValues),
-          borderRadius: getBorderRadius(node),
-        ),
+        // This box only clips and casts shadows; the node's fills, strokes
+        // and children take taps where they paint. Under a TapThroughScope,
+        // its empty parts let taps through.
+        decoration: TapThroughScope.of(context)
+            ? _TapThroughDecoration(
+                boxShadow: retrieveBoxShadow(node, scopedValues),
+                borderRadius: getBorderRadius(node),
+              )
+            : BoxDecoration(
+                boxShadow: retrieveBoxShadow(node, scopedValues),
+                borderRadius: getBorderRadius(node),
+              ),
         child: child,
       ),
     );
   }
 }
 
+/// A [BoxDecoration] that takes no taps itself.
+class _TapThroughDecoration extends BoxDecoration {
+  const _TapThroughDecoration({super.boxShadow, super.borderRadius});
+
+  @override
+  bool hitTest(Size size, Offset position, {TextDirection? textDirection}) =>
+      false;
+}
+
 List<Widget> wrapWithInkWell(
   BuildContext context,
   BaseNode node,

lib/src/transformers/node_transformers/passive_row_column_transformer.dart

@@ -315,6 +315,12 @@ class PassiveRowColumnTransformer extends NodeWidgetTransformer<RowColumnNode> {
       }
     }
 
+    // A squeezable node that wraps its content hugs it while it fits and
+    // shrinks to the room the Row/Column has left when it doesn't.
+    if (mainAxisFit == SizeFit.shrinkWrap && node.squeezable) {
+      childWidget = Flexible(flex: flex, child: childWidget);
+    }
+
     return childWidget;
   }
 

lib/src/ui/codelessly_dialog_widget.dart

@@ -16,10 +16,12 @@ class CodelesslyDialogWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // A dialog is centered and sized by its layout, so its canvas keeps its
-    // design size instead of filling the screen.
+    // design size instead of filling the screen, unless it holds a
+    // responsive layout (see CanvasSizing.design). Taps on its empty parts
+    // reach the barrier.
     return CanvasSizingScope(
       sizing: CanvasSizing.design,
-      child: Builder(builder: _buildDialog),
+      child: TapThroughScope(child: Builder(builder: _buildDialog)),
     );
   }
 

test/flex_layout_test.dart

@@ -640,4 +640,117 @@ void main() {
       expect(sizes['c']!.width, 100);
     });
   });
+
+  group('a squeezable shrinkWrap child (loose Flexible)', () {
+    TextNode label(String id, String characters, {bool squeezable = false}) =>
+        TextNode(
+          id: id,
+          name: id,
+          basicBoxLocal: NodeBox(0, 0, 120, 10),
+          horizontalFit: SizeFit.shrinkWrap,
+          verticalFit: SizeFit.shrinkWrap,
+          characters: characters,
+          maxLines: 1,
+          overflow: TextOverflowC.ellipsis,
+          textMixedProps: [
+            StartEndProp(start: 0, end: characters.length, fontSize: 10),
+          ],
+        )..squeezable = squeezable;
+
+    RenderParagraph paragraphOf(WidgetTester tester, String characters) =>
+        tester.renderObject(
+          find.byWidgetPredicate(
+            (widget) =>
+                widget is RichText && widget.text.toPlainText() == characters,
+          ),
+        );
+
+    // A name and its count in a 200 wide row; the test font is 10 px a
+    // character.
+    Future<void> pumpRow(WidgetTester tester, String characters, Size screen) {
+      final name = label('name', characters, squeezable: true);
+      final count = label('count', 'x3');
+      final row = flex(
+        'row',
+        kRootNode,
+        [name, count],
+        type: RowColumnType.row,
+        width: 200,
+        height: 10,
+      );
+      return pump(tester, row, [name, count], screen: screen, host: Host.loose);
+    }
+
+    for (final screen in screens) {
+      testWidgets('hugs a short name and ellipsizes a long one at '
+          '${screen.width.toInt()}', (tester) async {
+        await pumpRow(tester, 'Ann', screen);
+        final RenderParagraph short = paragraphOf(tester, 'Ann');
+        expect(short.size.width, 30);
+        expect(short.didExceedMaxLines, isFalse);
+        expect(
+          tester.getTopLeft(find.text('x3')).dx,
+          tester.getTopRight(find.text('Ann')).dx,
+        );
+
+        const String long = 'Bartholomew Montgomeryfitzgerald';
+        await pumpRow(tester, long, screen);
+        final RenderParagraph name = paragraphOf(tester, long);
+        // The name gives up what the count needs, and ellipsizes.
+        expect(name.size.width, 180);
+        expect(name.didExceedMaxLines, isTrue);
+        expect(paragraphOf(tester, 'x3').size.width, 20);
+        expect(
+          tester.getTopRight(find.text('x3')).dx,
+          tester.getTopRight(rectOf('row')).dx,
+        );
+      });
+    }
+
+    // A dialog body: a header and a card that is as tall as its content, up
+    // to the height the column has left.
+    testWidgets('a card hugs its content up to the room left', (tester) async {
+      for (final int items in [1, 6]) {
+        final header = rect('header', '', width: 300, height: 50);
+        final children = [
+          for (int i = 0; i < items; i++)
+            rect('item$i', '', width: 300, height: 100),
+        ];
+        final card = flex(
+          'card',
+          '',
+          children,
+          type: RowColumnType.column,
+          width: 300,
+          height: 100,
+          verticalFit: SizeFit.shrinkWrap,
+          isScrollable: true,
+        )..squeezable = true;
+        final column = flex(
+          'column',
+          kRootNode,
+          [header, card],
+          type: RowColumnType.column,
+          width: 300,
+          height: 400,
+        );
+        for (final screen in screens) {
+          final sizes = await pump(
+            tester,
+            column,
+            [header, card, ...children],
+            screen: screen,
+            host: Host.loose,
+          );
+          expect(sizes['column'], const Size(300, 400));
+          expect(
+            sizes['card'],
+            Size(300, items == 1 ? 100 : 350),
+            reason: '$items items at $screen',
+          );
+          expect(sizes['item0'], const Size(300, 100));
+        }
+      }
+    });
+  });
 }