Scroll CupertinoContextMenu if items overflow (flutter#154133)

Fixes flutter#55025
Fixes flutter#154040

### Native Context menu

https://github.com/user-attachments/assets/4ebed3e3-ab4f-4e94-8b47-e9c957f245ef

### Flutter iOS Context menu

https://github.com/user-attachments/assets/ad8426b4-ff18-40e1-9a4f-c61d7620b069

### Flutter macOS Context menu

https://github.com/user-attachments/assets/7374a8b2-ee8d-447b-9cd4-a7f2e7674fc2

Author: victorsanni

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

@@ -16,6 +16,7 @@ import 'package:flutter/widgets.dart';
 
 import 'colors.dart';
 import 'localizations.dart';
+import 'scrollbar.dart';
 
 // The scale of the child at the time that the CupertinoContextMenu opens.
 // This value was eyeballed from a physical device running iOS 13.1.2.
@@ -58,6 +59,11 @@ const Color _borderColor = CupertinoDynamicColor.withBrightness(
   darkColor: Color(0xFF57585A),
 );
 
+const Color _kBackgroundColor = CupertinoDynamicColor.withBrightness(
+   color: Color(0xFFF1F1F1),
+   darkColor: Color(0xFF212122),
+);
+
 typedef _DismissCallback = void Function(
   BuildContext context,
   double scale,
@@ -233,6 +239,10 @@ class CupertinoContextMenu extends StatefulWidget {
   static final double animationOpensAt =
       _previewLongPressTimeout.inMilliseconds / _animationDuration;
 
+  /// The background color of a [CupertinoContextMenuAction] and a
+  /// [CupertinoContextMenu] sheet.
+  static const Color kBackgroundColor = _kBackgroundColor;
+
   /// A function that returns a widget to be used alternatively from [child].
   ///
   /// The widget returned by the function will be shown at all times: when the
@@ -1369,21 +1379,36 @@ class _ContextMenuRouteStaticState extends State<_ContextMenuRouteStatic> with T
 
 // The menu that displays when CupertinoContextMenu is open. It consists of a
 // list of actions that are typically CupertinoContextMenuActions.
-class _ContextMenuSheet extends StatelessWidget {
+class _ContextMenuSheet extends StatefulWidget {
   _ContextMenuSheet({
     super.key,
     required this.actions,
-    required _ContextMenuLocation contextMenuLocation,
-    required Orientation orientation,
-  }) : assert(actions.isNotEmpty),
-       _contextMenuLocation = contextMenuLocation,
-       _orientation = orientation;
+    required this.contextMenuLocation,
+    required this.orientation,
+  }) : assert(actions.isNotEmpty);
 
   final List<Widget> actions;
-  final _ContextMenuLocation _contextMenuLocation;
-  final Orientation _orientation;
+  final _ContextMenuLocation contextMenuLocation;
+  final Orientation orientation;
 
+  @override
+  State<_ContextMenuSheet> createState() => _ContextMenuSheetState();
+}
+
+class _ContextMenuSheetState extends State<_ContextMenuSheet> {
+  late final ScrollController _controller;
   static const double _kMenuWidth = 250.0;
+  // Eyeballed on a context menu on an iOS 15 simulator running iOS 17.5.
+  static const double _kScrollbarMainAxisMargin = 13.0;
+
+  @override
+  void initState() {
+    super.initState();
+    // Link the scrollbar to the scroll view by providing both the same scroll
+    // controller. Using SingleChildScrollview.primary might conflict with users
+    // already using the PrimaryScrollController.
+    _controller = ScrollController();
+  }
 
   // Get the children, whose order depends on orientation and
   // contextMenuLocation.
@@ -1393,40 +1418,59 @@ class _ContextMenuSheet extends StatelessWidget {
       child: IntrinsicHeight(
         child: ClipRRect(
           borderRadius: const BorderRadius.all(Radius.circular(13.0)),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: <Widget>[
-              actions.first,
-              for (final Widget action in actions.skip(1))
-                DecoratedBox(
-                  decoration: BoxDecoration(
-                    border: Border(
-                      top: BorderSide(
-                        color: CupertinoDynamicColor.resolve(
-                          _borderColor,
-                          context,
+          child: ColoredBox(
+            color: CupertinoDynamicColor.resolve(CupertinoContextMenu.kBackgroundColor, context),
+            child: ScrollConfiguration(
+              behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
+              child: CupertinoScrollbar(
+                mainAxisMargin: _kScrollbarMainAxisMargin,
+                controller: _controller,
+                child: SingleChildScrollView(
+                  controller: _controller,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
+                    children: <Widget>[
+                      widget.actions.first,
+                      for (final Widget action in widget.actions.skip(1))
+                        DecoratedBox(
+                          decoration: BoxDecoration(
+                            border: Border(
+                              top: BorderSide(
+                                color: CupertinoDynamicColor.resolve(
+                                  _borderColor,
+                                  context,
+                                ),
+                                width: 0.4,
+                              ),
+                            ),
+                          ),
+                          position: DecorationPosition.foreground,
+                          child: action,
                         ),
-                        width: 0.4,
-                      ),
-                    ),
+                    ],
                   ),
-                  position: DecorationPosition.foreground,
-                  child: action,
                 ),
-            ],
+              ),
+            ),
           ),
         ),
       ),
     );
 
-    return switch (_contextMenuLocation) {
-      _ContextMenuLocation.center when _orientation == Orientation.portrait => <Widget>[const Spacer(), menu, const Spacer()],
+    return switch (widget.contextMenuLocation) {
+      _ContextMenuLocation.center when widget.orientation == Orientation.portrait => <Widget>[const Spacer(), menu, const Spacer()],
       _ContextMenuLocation.center => <Widget>[menu, const Spacer()],
       _ContextMenuLocation.right  => <Widget>[const Spacer(), menu],
       _ContextMenuLocation.left   => <Widget>[menu, const Spacer()],
     };
   }
 
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Row(

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

@@ -5,6 +5,7 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'colors.dart';
+import 'context_menu.dart';
 
 /// A button in a _ContextMenuSheet.
 ///
@@ -47,10 +48,6 @@ class CupertinoContextMenuAction extends StatefulWidget {
 }
 
 class _CupertinoContextMenuActionState extends State<CupertinoContextMenuAction> {
-  static const Color _kBackgroundColor = CupertinoDynamicColor.withBrightness(
-    color: Color(0xFFF1F1F1),
-    darkColor: Color(0xFF212122),
-  );
   static const Color _kBackgroundColorPressed = CupertinoDynamicColor.withBrightness(
     color: Color(0xFFDDDDDD),
     darkColor: Color(0xFF3F3F40),
@@ -123,7 +120,7 @@ class _CupertinoContextMenuActionState extends State<CupertinoContextMenuAction>
             child: ColoredBox(
               color: _isPressed
                   ? CupertinoDynamicColor.resolve(_kBackgroundColorPressed, context)
-                  : CupertinoDynamicColor.resolve(_kBackgroundColor, context),
+                  : CupertinoDynamicColor.resolve(CupertinoContextMenu.kBackgroundColor, context),
               child: Padding(
                 padding: const EdgeInsets.fromLTRB(15.5, 8.0, 17.5, 8.0),
                 child: DefaultTextStyle(

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

@@ -84,6 +84,7 @@ class CupertinoScrollbar extends RawScrollbar {
     this.radiusWhileDragging = defaultRadiusWhileDragging,
     ScrollNotificationPredicate? notificationPredicate,
     super.scrollbarOrientation,
+    super.mainAxisMargin = _kScrollbarMainAxisMargin,
   }) : assert(thickness < double.infinity),
        assert(thicknessWhileDragging < double.infinity),
        super(
@@ -156,7 +157,7 @@ class _CupertinoScrollbarState extends RawScrollbarState<CupertinoScrollbar> {
       ..color = CupertinoDynamicColor.resolve(_kScrollbarColor, context)
       ..textDirection = Directionality.of(context)
       ..thickness = _thickness
-      ..mainAxisMargin = _kScrollbarMainAxisMargin
+      ..mainAxisMargin = widget.mainAxisMargin
       ..crossAxisMargin = _kScrollbarCrossAxisMargin
       ..radius = _radius
       ..padding = MediaQuery.paddingOf(context)

packages/flutter/test/cupertino/context_menu_test.dart

@@ -495,7 +495,8 @@ void main() {
       await tester.pumpAndSettle();
       expect(findStatic(), findsOneWidget);
 
-      expect(findStaticChildColor(tester), findsNWidgets(1));
+      // Both the background color and the action colors are found.
+      expect(findStaticChildColor(tester), findsNWidgets(2));
 
       // Close the CupertinoContextMenu.
       await tester.tapAt(const Offset(1.0, 1.0));
@@ -527,7 +528,7 @@ void main() {
       await tester.pumpAndSettle();
       expect(findStatic(), findsOneWidget);
 
-      expect(findStaticChildColor(tester), findsNWidgets(2));
+      expect(findStaticChildColor(tester), findsNWidgets(3));
     });
 
     testWidgets('Can close CupertinoContextMenu by background tap', (WidgetTester tester) async {
@@ -1024,4 +1025,61 @@ void main() {
       expect(routeStatic, findsOneWidget);
     }
   });
+
+  testWidgets('CupertinoContextMenu scrolls correctly', (WidgetTester tester) async {
+    const int numMenuItems = 100;
+    final Widget child = getChild();
+    await tester.pumpWidget(
+      CupertinoApp(
+        home: CupertinoPageScaffold(
+          child: MediaQuery(
+            data: const MediaQueryData(size: Size(100, 100)),
+            child: CupertinoContextMenu(
+              actions: List<CupertinoContextMenuAction>.generate(numMenuItems, (int index) {
+                return CupertinoContextMenuAction(
+                  child: Text('Item $index'),
+                  onPressed: () {},
+                );
+              }),
+              child: child,
+            ),
+          ),
+        ),
+      ),
+    );
+
+    // Open the CupertinoContextMenu.
+    final TestGesture gesture = await tester.startGesture(tester.getCenter(find.byWidget(child)));
+    await tester.pumpAndSettle();
+    await gesture.up();
+    await tester.pumpAndSettle();
+
+    expect(find.byType(CupertinoContextMenu), findsOneWidget);
+
+    // Verify the first items are visible.
+    expect(find.text('Item 0'), findsOneWidget);
+    expect(find.text('Item 1'), findsOneWidget);
+
+    // Find the scrollable part of the context menu.
+    final Finder scrollableFinder = find.byType(Scrollable);
+    expect(scrollableFinder, findsOneWidget);
+
+    // Verify a scrollbar is displayed.
+    expect(find.byType(CupertinoScrollbar), findsOneWidget);
+
+    // Scroll to the bottom.
+    await tester.drag(scrollableFinder, const Offset(0, -500));
+    await tester.pumpAndSettle();
+
+    // Verify the last item is visible.
+    expect(find.text('Item ${numMenuItems - 1}'), findsOneWidget);
+
+    // Scroll back to the top.
+    await tester.drag(scrollableFinder, const Offset(0, 500));
+    await tester.pumpAndSettle();
+
+    // Verify the first items are still visible.
+    expect(find.text('Item 0'), findsOneWidget);
+    expect(find.text('Item 1'), findsOneWidget);
+  });
 }