fix: implement computeDryBaseline for custom RenderBox subclasses (#1584)

daohoangson · claude · web-flow · commit 97b172b36975 · 2026-04-08T21:19:20.000+07:00
In Flutter 3.32+, any RenderBox that overrides
computeDistanceToActualBaseline must also override computeDryBaseline.

Add computeDryBaseline to:
- _ListItemRenderObject
- _ListMarkerRenderObject
- _RubyRenderObject
- _TableRenderObject
- _RenderCssSizing (pass correct child constraints)
- _HorizontalMarginRenderObject (pass deflated constraints)
- _ValignBaselineRenderObject (pass deflated constraints + padding)

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/packages/core/lib/src/widgets/css_sizing.dart b/packages/core/lib/src/widgets/css_sizing.dart
@@ -219,6 +219,20 @@ class _RenderCssSizing extends RenderProxyBox {
     markNeedsLayout();
   }
 
+  @override
+  double? computeDryBaseline(
+    BoxConstraints constraints,
+    TextBaseline baseline,
+  ) {
+    final scopedChild = child;
+    if (scopedChild == null) {
+      return null;
+    }
+
+    final cc = _applyContraints(constraints);
+    return scopedChild.getDryBaseline(cc, baseline);
+  }
+
   @override
   Size computeDryLayout(BoxConstraints constraints) {
     final scopedChild = child;
diff --git a/packages/core/lib/src/widgets/horizontal_margin.dart b/packages/core/lib/src/widgets/horizontal_margin.dart
@@ -55,6 +55,21 @@ class _HorizontalMarginRenderObject extends RenderShiftedBox {
 
   double get marginsOrZero => _left.or(0) + _right.or(0);
 
+  @override
+  double? computeDryBaseline(
+    BoxConstraints constraints,
+    TextBaseline baseline,
+  ) {
+    final scopedChild = child;
+    if (scopedChild == null) {
+      return null;
+    }
+
+    final edges = EdgeInsets.only(left: _left.or(0), right: _right.or(0));
+    final cc = constraints.deflate(edges);
+    return scopedChild.getDryBaseline(cc, baseline);
+  }
+
   @override
   Size computeDryLayout(BoxConstraints constraints) =>
       _compute(child, constraints, ChildLayoutHelper.dryLayoutChild);
diff --git a/packages/core/lib/src/widgets/html_list_item.dart b/packages/core/lib/src/widgets/html_list_item.dart
@@ -87,6 +87,23 @@ class _ListItemRenderObject extends RenderBox
   double? computeDistanceToActualBaseline(TextBaseline baseline) =>
       defaultComputeDistanceToFirstActualBaseline(baseline);
 
+  @override
+  double? computeDryBaseline(
+    BoxConstraints constraints,
+    TextBaseline baseline,
+  ) {
+    final child = firstChild;
+    if (child == null) {
+      return null;
+    }
+
+    final childConstraints = constraints.maxWidth.isFinite && textAlign != null
+        ? constraints.tighten(width: constraints.maxWidth)
+        : constraints;
+    // The first child's offset is always Offset.zero in _compute
+    return child.getDryBaseline(childConstraints, baseline);
+  }
+
   @override
   Size computeDryLayout(BoxConstraints constraints) =>
       _compute(firstChild, constraints, ChildLayoutHelper.dryLayoutChild);
diff --git a/packages/core/lib/src/widgets/html_list_marker.dart b/packages/core/lib/src/widgets/html_list_marker.dart
@@ -97,6 +97,13 @@ class _ListMarkerRenderObject extends RenderBox {
   double computeDistanceToActualBaseline(TextBaseline baseline) =>
       _textPainter.computeDistanceToActualBaseline(baseline);
 
+  @override
+  double? computeDryBaseline(
+    BoxConstraints constraints,
+    TextBaseline baseline,
+  ) =>
+      _textPainter.computeDistanceToActualBaseline(baseline);
+
   @override
   Size computeDryLayout(BoxConstraints constraints) =>
       constraints.constrain(_textPainter.size);
diff --git a/packages/core/lib/src/widgets/html_ruby.dart b/packages/core/lib/src/widgets/html_ruby.dart
@@ -39,6 +39,37 @@ class _RubyRenderObject extends RenderBox
     return offset.dy + rubyValue;
   }
 
+  @override
+  double? computeDryBaseline(
+    BoxConstraints constraints,
+    TextBaseline baseline,
+  ) {
+    final ruby = firstChild;
+    if (ruby == null) {
+      return null;
+    }
+
+    final rubyConstraints = constraints.loosen();
+    final rubySize = ruby.getDryLayout(rubyConstraints);
+    final rubyBaseline = ruby.getDryBaseline(rubyConstraints, baseline);
+    if (rubyBaseline == null) {
+      return null;
+    }
+
+    final rt = (ruby.parentData! as _RubyParentData).nextSibling;
+    final rtHeight = rt != null
+        ? rt
+            .getDryLayout(
+              rubyConstraints.copyWith(
+                maxHeight: rubyConstraints.maxHeight - rubySize.height,
+              ),
+            )
+            .height
+        : 0.0;
+
+    return rtHeight + rubyBaseline;
+  }
+
   @override
   Size computeDryLayout(BoxConstraints constraints) =>
       _compute(firstChild, constraints, ChildLayoutHelper.dryLayoutChild);
diff --git a/packages/core/lib/src/widgets/html_table.dart b/packages/core/lib/src/widgets/html_table.dart
@@ -836,6 +836,40 @@ class _TableRenderObject extends RenderBox
     return result;
   }
 
+  @override
+  double? computeDryBaseline(
+    BoxConstraints constraints,
+    TextBaseline baseline,
+  ) {
+    double? result;
+
+    var child = firstChild;
+    while (child != null) {
+      final data = child.parentData! as _TableCellData;
+
+      if (data.rowStart == 0) {
+        // only compute cells in the first row
+        // use the child's dry baseline with loosened constraints
+        // since exact cell constraints require full table layout
+        final candidate = child.getDryBaseline(constraints.loosen(), baseline);
+        if (candidate != null) {
+          final adjusted = candidate + paddingTop + rowGap;
+          if (result != null) {
+            if (adjusted < result) {
+              result = adjusted;
+            }
+          } else {
+            result = adjusted;
+          }
+        }
+      }
+
+      child = data.nextSibling;
+    }
+
+    return result;
+  }
+
   @override
   Size computeDryLayout(BoxConstraints constraints) =>
       _TableRenderLayouter.dry(this, constraints).compute(firstChild).totalSize;
diff --git a/packages/core/lib/src/widgets/valign_baseline.dart b/packages/core/lib/src/widgets/valign_baseline.dart
@@ -121,6 +121,25 @@ class _ValignBaselineRenderObject extends RenderProxyBox {
   double? _baselineWithOffset;
   var _paddingTop = 0.0;
 
+  @override
+  double? computeDryBaseline(
+    BoxConstraints constraints,
+    TextBaseline baseline,
+  ) {
+    final scopedChild = child;
+    if (scopedChild == null) {
+      return null;
+    }
+
+    final cc = constraints.loosen().deflate(EdgeInsets.only(top: _paddingTop));
+    final childBaseline = scopedChild.getDryBaseline(cc, baseline);
+    if (childBaseline == null) {
+      return null;
+    }
+
+    return childBaseline + _paddingTop;
+  }
+
   @override
   Size computeDryLayout(BoxConstraints constraints) =>
       _compute(child, constraints, ChildLayoutHelper.dryLayoutChild);
diff --git a/packages/core/test/style_margin_test.dart b/packages/core/test/style_margin_test.dart
@@ -799,6 +799,33 @@ void main() {
       expect(drySize, equals(const Size(50, 10)));
     });
 
+    testWidgets('computeDryBaseline', (tester) async {
+      final key = GlobalKey();
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(
+            body: SizedBox(
+              width: 100,
+              child: HorizontalMargin(
+                key: key,
+                left: 10,
+                right: 10,
+                child: const Text('Hello'),
+              ),
+            ),
+          ),
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      final renderBox = key.renderBox;
+      final baseline = renderBox.getDryBaseline(
+        renderBox.constraints,
+        TextBaseline.alphabetic,
+      );
+      expect(baseline, isNotNull);
+    });
+
     group('computeMaxIntrinsicWidth', () {
       testWidgets('computes with child', (tester) async {
         await tester.pumpSizedBox(left: 1, right: 2);
diff --git a/packages/core/test/style_sizing_test.dart b/packages/core/test/style_sizing_test.dart
@@ -591,6 +591,28 @@ Future<void> main() async {
       );
     });
 
+    testWidgets('computeDryBaseline', (tester) async {
+      final key = GlobalKey();
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(
+            body: CssSizing(
+              key: key,
+              child: const Text('Hello'),
+            ),
+          ),
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      final renderBox = key.renderBox;
+      final baseline = renderBox.getDryBaseline(
+        renderBox.constraints,
+        TextBaseline.alphabetic,
+      );
+      expect(baseline, isNotNull);
+    });
+
     group('_guessChildSize with 2 dimensions', () {
       testWidgets('respect wide child', (tester) async {
         final key = GlobalKey();
diff --git a/packages/core/test/style_vertical_align_test.dart b/packages/core/test/style_vertical_align_test.dart
@@ -1,4 +1,6 @@
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
 import 'package:mocktail_image_network/mocktail_image_network.dart';
 
 import '_.dart';
@@ -278,4 +280,29 @@ void main() {
       expect(explained, contains('Foo'));
     });
   });
+
+  testWidgets('ValignBaseline computeDryBaseline', (tester) async {
+    final key = GlobalKey();
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: ValignBaselineContainer(
+            child: ValignBaseline(
+              key: key,
+              index: 0,
+              child: const Text('Hello'),
+            ),
+          ),
+        ),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    final renderBox = key.renderBox;
+    final baseline = renderBox.getDryBaseline(
+      renderBox.constraints,
+      TextBaseline.alphabetic,
+    );
+    expect(baseline, isNotNull);
+  });
 }
diff --git a/packages/core/test/tag_li_test.dart b/packages/core/test/tag_li_test.dart
@@ -977,6 +977,30 @@ Future<void> main() async {
       );
     });
 
+    testWidgets('computeDryBaseline', (tester) async {
+      final key = GlobalKey();
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(
+            body: HtmlListItem(
+              key: key,
+              marker: const Text('1.'),
+              textDirection: TextDirection.ltr,
+              child: const Text('Hello'),
+            ),
+          ),
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      final renderBox = key.renderBox;
+      final baseline = renderBox.getDryBaseline(
+        renderBox.constraints,
+        TextBaseline.alphabetic,
+      );
+      expect(baseline, isNotNull);
+    });
+
     testWidgets('computeIntrinsic', (tester) async {
       final key = GlobalKey();
       await tester.pumpWidget(
@@ -1129,6 +1153,33 @@ Future<void> main() async {
       expect(circle,
           contains('alpha: 1.0000, red: 0.0000, green: 1.0000, blue: 0.0000'));
     });
+
+    testWidgets('computeDryBaseline', (tester) async {
+      final key = GlobalKey();
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(
+            body: HtmlListItem(
+              marker: HtmlListMarker(
+                key: key,
+                markerType: HtmlListMarkerType.disc,
+                textStyle: const TextStyle(fontSize: 14),
+              ),
+              textDirection: TextDirection.ltr,
+              child: const Text('Hello'),
+            ),
+          ),
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      final renderBox = key.renderBox;
+      final baseline = renderBox.getDryBaseline(
+        renderBox.constraints,
+        TextBaseline.alphabetic,
+      );
+      expect(baseline, isNotNull);
+    });
   });
 }
 
diff --git a/packages/core/test/tag_ruby_test.dart b/packages/core/test/tag_ruby_test.dart
@@ -247,6 +247,29 @@ void main() {
       );
     });
 
+    testWidgets('computeDryBaseline', (tester) async {
+      final key = GlobalKey();
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(
+            body: HtmlRuby(
+              key: key,
+              ruby: const Text('漢'),
+              rt: const Text('かん'),
+            ),
+          ),
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      final renderBox = key.renderBox;
+      final baseline = renderBox.getDryBaseline(
+        renderBox.constraints,
+        TextBaseline.alphabetic,
+      );
+      expect(baseline, isNotNull);
+    });
+
     testWidgets('computeIntrinsic', (tester) async {
       final rt = GlobalKey();
       final ruby = GlobalKey();
diff --git a/packages/core/test/tag_table_test.dart b/packages/core/test/tag_table_test.dart
