Sliver Constrained Cross Axis (#124337)

Sliver Constrained Cross Axis

examples/api/lib/widgets/sliver/sliver_constrained_cross_axis.0.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const SliverConstrainedCrossAxisExampleApp());
+
+class SliverConstrainedCrossAxisExampleApp extends StatelessWidget {
+  const SliverConstrainedCrossAxisExampleApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        appBar: AppBar(title: const Text('SliverConstrainedCrossAxis Sample')),
+        body: const SliverConstrainedCrossAxisExample(),
+      ),
+    );
+  }
+}
+
+class SliverConstrainedCrossAxisExample extends StatelessWidget {
+  const SliverConstrainedCrossAxisExample({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomScrollView(
+      slivers: <Widget>[
+        SliverConstrainedCrossAxis(
+          maxExtent: 200,
+          sliver: SliverList.builder(
+            itemBuilder: (BuildContext context, int index) {
+              return Container(
+                color: index.isEven ? Colors.amber[300] : Colors.blue[300],
+                height: 100.0,
+                child: Center(
+                  child: Text(
+                    'Item $index',
+                    style: const TextStyle(fontSize: 24),
+                  ),
+                ),
+              );
+            },
+            itemCount: 10,
+          ),
+        ),
+      ],
+    );
+  }
+}

examples/api/test/widgets/sliver/sliver_constrained_cross_axis.0_test.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter_api_samples/widgets/sliver/sliver_constrained_cross_axis.0.dart'
+    as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('SliverConstrainedCrossAxis example', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.SliverConstrainedCrossAxisExampleApp(),
+    );
+
+    final RenderSliverList renderSliverList = tester.renderObject(find.byType(SliverList));
+    expect(renderSliverList.constraints.crossAxisExtent, equals(200));
+  });
+}

packages/flutter/lib/src/rendering/proxy_sliver.dart

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:math';
 import 'dart:ui' as ui show Color;
 
 import 'package:flutter/animation.dart';
@@ -414,3 +415,42 @@ class RenderSliverAnimatedOpacity extends RenderProxySliver with RenderAnimatedO
     child = sliver;
   }
 }
+
+/// Applies a cross-axis constraint to its sliver child.
+///
+/// This render object takes a [maxExtent] parameter and uses the smaller of
+/// [maxExtent] and the parent's [SliverConstraints.crossAxisExtent] as the
+/// cross axis extent of the [SliverConstraints] passed to the sliver child.
+class RenderSliverConstrainedCrossAxis extends RenderProxySliver {
+  /// Creates a render object that constrains the cross axis extent of its sliver child.
+  ///
+  /// The [maxExtent] parameter must not be null and must be nonnegative.
+  RenderSliverConstrainedCrossAxis({
+    required double maxExtent
+  }) : _maxExtent = maxExtent,
+       assert(maxExtent >= 0.0);
+
+  /// The cross axis extent to apply to the sliver child.
+  ///
+  /// This value must be nonnegative.
+  double get maxExtent => _maxExtent;
+  double _maxExtent;
+  set maxExtent(double value) {
+    if (_maxExtent == value) {
+      return;
+    }
+    _maxExtent = value;
+    markNeedsLayout();
+  }
+
+  @override
+  void performLayout() {
+    assert(child != null);
+    assert(maxExtent >= 0.0);
+    child!.layout(
+      constraints.copyWith(crossAxisExtent: min(_maxExtent, constraints.crossAxisExtent)),
+      parentUsesSize: true,
+    );
+    geometry = child!.geometry;
+  }
+}

packages/flutter/lib/src/widgets/sliver.dart

@@ -1365,3 +1365,47 @@ class KeepAlive extends ParentDataWidget<KeepAliveParentDataMixin> {
     properties.add(DiagnosticsProperty<bool>('keepAlive', keepAlive));
   }
 }
+
+/// A sliver that constrains the cross axis extent of its sliver child.
+///
+/// The [SliverConstrainedCrossAxis] takes a [maxExtent] parameter and uses it as
+/// the cross axis extent of the [SliverConstraints] passed to the sliver child.
+/// The widget ensures that the [maxExtent] is a nonnegative value.
+///
+/// This is useful when you want to apply a custom cross-axis extent constraint
+/// to a sliver child, as slivers typically consume the full cross axis extent.
+///
+/// {@tool dartpad}
+/// In this sample the [SliverConstrainedCrossAxis] sizes its [child] so that the
+/// cross axis extent takes up less space than the actual viewport.
+///
+/// ** See code in examples/api/lib/widgets/sliver/sliver_constrained_cross_axis.0.dart **
+/// {@end-tool}
+
+class SliverConstrainedCrossAxis extends SingleChildRenderObjectWidget {
+  /// Creates a sliver that constrains the cross axis extent of its sliver child.
+  ///
+  /// The [maxExtent] parameter is required and must be nonnegative.
+  const SliverConstrainedCrossAxis({
+    super.key,
+    required this.maxExtent,
+    required Widget sliver,
+  }) : assert(maxExtent >= 0.0),
+       super(child: sliver);
+
+  /// The cross axis extent to apply to the sliver child.
+  ///
+  /// This value must be nonnegative.
+  final double maxExtent;
+
+  @override
+  RenderSliverConstrainedCrossAxis createRenderObject(BuildContext context) {
+    return RenderSliverConstrainedCrossAxis(maxExtent: maxExtent);
+  }
+
+  @override
+  void updateRenderObject(
+      BuildContext context, RenderSliverConstrainedCrossAxis renderObject) {
+    renderObject.maxExtent = maxExtent;
+  }
+}

packages/flutter/test/widgets/sliver_constrained_cross_axis_test.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+const double VIEWPORT_HEIGHT = 500;
+const double VIEWPORT_WIDTH = 300;
+
+void main() {
+  testWidgets('SliverConstrainedCrossAxis basic test', (WidgetTester tester) async {
+    await tester.pumpWidget(_buildSliverConstrainedCrossAxis(maxExtent: 50));
+
+    final RenderBox box = tester.renderObject(find.byType(Container));
+    expect(box.size.height, 100);
+    expect(box.size.width, 50);
+
+    final RenderSliver sliver = tester.renderObject(find.byType(SliverToBoxAdapter));
+    expect(sliver.geometry!.paintExtent, equals(100));
+  });
+
+  testWidgets('SliverConstrainedCrossAxis updates correctly', (WidgetTester tester) async {
+    await tester.pumpWidget(_buildSliverConstrainedCrossAxis(maxExtent: 50));
+
+    final RenderBox box1 = tester.renderObject(find.byType(Container));
+    expect(box1.size.height, 100);
+    expect(box1.size.width, 50);
+
+    await tester.pumpWidget(_buildSliverConstrainedCrossAxis(maxExtent: 80));
+
+    final RenderBox box2 = tester.renderObject(find.byType(Container));
+    expect(box2.size.height, 100);
+    expect(box2.size.width, 80);
+  });
+
+  testWidgets('SliverConstrainedCrossAxis uses parent extent if maxExtent is greater', (WidgetTester tester) async {
+    await tester.pumpWidget(_buildSliverConstrainedCrossAxis(maxExtent: 400));
+
+    final RenderBox box = tester.renderObject(find.byType(Container));
+    expect(box.size.height, 100);
+    expect(box.size.width, VIEWPORT_WIDTH);
+  });
+
+  testWidgets('SliverConstrainedCrossAxis constrains the height when direction is horizontal', (WidgetTester tester) async {
+    await tester.pumpWidget(_buildSliverConstrainedCrossAxis(
+      maxExtent: 50,
+      scrollDirection: Axis.horizontal,
+    ));
+
+    final RenderBox box = tester.renderObject(find.byType(Container));
+    expect(box.size.height, 50);
+  });
+}
+
+Widget _buildSliverConstrainedCrossAxis({
+  required double maxExtent,
+  Axis scrollDirection = Axis.vertical,
+}) {
+  return Directionality(
+    textDirection: TextDirection.ltr,
+    child: Center(
+      child: SizedBox(
+        width: VIEWPORT_WIDTH,
+        height: VIEWPORT_HEIGHT,
+        child: CustomScrollView(
+          scrollDirection: scrollDirection,
+          slivers: <Widget>[
+            SliverConstrainedCrossAxis(
+              maxExtent: maxExtent,
+              sliver: SliverToBoxAdapter(
+                child: scrollDirection == Axis.vertical
+                  ? Container(height: 100)
+                  : Container(width: 100),
+              ),
+            ),
+          ],
+        ),
+      ),
+    ),
+  );
+}