Constrain date picker to max width to avoid bending outwards (#120827)

Constrain date picker to max width to avoid bending outwards

packages/flutter/lib/src/cupertino/date_picker.dart

@@ -81,6 +81,7 @@ class _DatePickerLayoutDelegate extends MultiChildLayoutDelegate {
   _DatePickerLayoutDelegate({
     required this.columnWidths,
     required this.textDirectionFactor,
+    required this.maxWidth,
   });
 
   // The list containing widths of all columns.
@@ -89,16 +90,19 @@ class _DatePickerLayoutDelegate extends MultiChildLayoutDelegate {
   // textDirectionFactor is 1 if text is written left to right, and -1 if right to left.
   final int textDirectionFactor;
 
+  // The max width the children should reach to avoid bending outwards.
+  final double maxWidth;
+
   @override
   void performLayout(Size size) {
-    double remainingWidth = size.width;
+    double remainingWidth = maxWidth < size.width ? maxWidth : size.width;
+
+    double currentHorizontalOffset = (size.width - remainingWidth) / 2;
 
     for (int i = 0; i < columnWidths.length; i++) {
       remainingWidth -= columnWidths[i] + _kDatePickerPadSize * 2;
     }
 
-    double currentHorizontalOffset = 0.0;
-
     for (int i = 0; i < columnWidths.length; i++) {
       final int index = textDirectionFactor == 1 ? i : columnWidths.length - i - 1;
 
@@ -1024,6 +1028,7 @@ class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {
     }
 
     final List<Widget> pickers = <Widget>[];
+    double totalColumnWidths = 4 * _kDatePickerPadSize;
 
     for (int i = 0; i < columnWidths.length; i++) {
       double offAxisFraction = 0.0;
@@ -1044,6 +1049,8 @@ class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {
         padding = padding.flipped;
       }
 
+      totalColumnWidths += columnWidths[i] + (2 * _kDatePickerPadSize);
+
       pickers.add(LayoutId(
         id: i,
         child: pickerBuilders[i](
@@ -1068,6 +1075,8 @@ class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {
       ));
     }
 
+    final double maxPickerWidth = totalColumnWidths > _kPickerWidth ? totalColumnWidths : _kPickerWidth;
+
     return MediaQuery(
       data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
       child: DefaultTextStyle.merge(
@@ -1076,6 +1085,7 @@ class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {
           delegate: _DatePickerLayoutDelegate(
             columnWidths: columnWidths,
             textDirectionFactor: textDirectionFactor,
+            maxWidth: maxPickerWidth,
           ),
           children: pickers,
         ),
@@ -1418,6 +1428,7 @@ class _CupertinoDatePickerDateState extends State<CupertinoDatePicker> {
     }
 
     final List<Widget> pickers = <Widget>[];
+    double totalColumnWidths = 4 * _kDatePickerPadSize;
 
     for (int i = 0; i < columnWidths.length; i++) {
       final double offAxisFraction = (i - 1) * 0.3 * textDirectionFactor;
@@ -1434,6 +1445,8 @@ class _CupertinoDatePickerDateState extends State<CupertinoDatePicker> {
         selectionOverlay = _endSelectionOverlay;
       }
 
+      totalColumnWidths += columnWidths[i] + (2 * _kDatePickerPadSize);
+
       pickers.add(LayoutId(
         id: i,
         child: pickerBuilders[i](
@@ -1456,6 +1469,8 @@ class _CupertinoDatePickerDateState extends State<CupertinoDatePicker> {
       ));
     }
 
+    final double maxPickerWidth = totalColumnWidths > _kPickerWidth ? totalColumnWidths : _kPickerWidth;
+
     return MediaQuery(
       data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
       child: DefaultTextStyle.merge(
@@ -1464,6 +1479,7 @@ class _CupertinoDatePickerDateState extends State<CupertinoDatePicker> {
           delegate: _DatePickerLayoutDelegate(
             columnWidths: columnWidths,
             textDirectionFactor: textDirectionFactor,
+            maxWidth: maxPickerWidth,
           ),
           children: pickers,
         ),

packages/flutter/test/cupertino/date_picker_test.dart

@@ -592,6 +592,56 @@ void main() {
       );
     });
 
+    testWidgets('width of wheel in background does not increase at large widths', (WidgetTester tester) async {
+
+      final Widget dateWidget = CupertinoDatePicker(
+        mode: CupertinoDatePickerMode.date,
+        onDateTimeChanged: (_) { },
+        initialDateTime: DateTime(2018, 1, 1, 10, 30),
+      );
+
+      await tester.pumpWidget(
+        CupertinoApp(
+          home: CupertinoPageScaffold(
+            child: Center(
+              child: SizedBox(
+                height: 200.0,
+                width: 300.0,
+                child: dateWidget,
+              ),
+            ),
+          ),
+        ),
+      );
+
+      double decemberX = tester.getBottomLeft(find.text('December')).dx;
+      double octoberX = tester.getBottomLeft(find.text('October')).dx;
+      final double distance = octoberX - decemberX;
+
+      await tester.pumpWidget(
+        CupertinoApp(
+          home: CupertinoPageScaffold(
+            child: Center(
+              child: SizedBox(
+                height: 200.0,
+                width: 3000.0,
+                child: dateWidget,
+              ),
+            ),
+          ),
+        ),
+      );
+
+      decemberX = tester.getBottomLeft(find.text('December')).dx;
+      octoberX = tester.getBottomLeft(find.text('October')).dx;
+
+      // The wheel does not bend outwards at large widths.
+      expect(
+        distance >= (octoberX - decemberX),
+        true,
+      );
+    });
+
     testWidgets('picker automatically scrolls away from invalid date on month change', (WidgetTester tester) async {
       late DateTime date;
       await tester.pumpWidget(