Reland iOS 16 context menu (#117234)

justinmc · web-flow · commit 6781576e80fa · 2022-12-22T15:55:28.000-08:00
Updates the iOS text selection toolbar to look like iOS 16 (reland)
diff --git a/packages/flutter/lib/src/cupertino/colors.dart b/packages/flutter/lib/src/cupertino/colors.dart
@@ -990,7 +990,7 @@ class CupertinoDynamicColor extends Color with Diagnosticable {
   CupertinoDynamicColor resolveFrom(BuildContext context) {
     Brightness brightness = Brightness.light;
     if (_isPlatformBrightnessDependent) {
-      brightness =  CupertinoTheme.maybeBrightnessOf(context) ?? Brightness.light;
+      brightness = CupertinoTheme.maybeBrightnessOf(context) ?? Brightness.light;
     }
     bool isHighContrastEnabled = false;
     if (_isHighContrastDependent) {
diff --git a/packages/flutter/lib/src/cupertino/text_selection_toolbar.dart b/packages/flutter/lib/src/cupertino/text_selection_toolbar.dart
@@ -5,11 +5,13 @@
 import 'dart:collection';
 import 'dart:ui' as ui;
 
-import 'package:flutter/foundation.dart' show clampDouble;
+import 'package:flutter/foundation.dart' show Brightness, clampDouble;
 import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 
+import 'colors.dart';
 import 'text_selection_toolbar_button.dart';
+import 'theme.dart';
 
 // Values extracted from https://developer.apple.com/design/resources/.
 // The height of the toolbar, including the arrow.
@@ -29,9 +31,27 @@ const double _kArrowScreenPadding = 26.0;
 // Values extracted from https://developer.apple.com/design/resources/.
 const Radius _kToolbarBorderRadius = Radius.circular(8);
 
-// Colors extracted from https://developer.apple.com/design/resources/.
-// TODO(LongCatIsLooong): https://github.com/flutter/flutter/issues/41507.
-const Color _kToolbarDividerColor = Color(0xFF808080);
+const CupertinoDynamicColor _kToolbarDividerColor = CupertinoDynamicColor.withBrightness(
+  // This value was extracted from a screenshot of iOS 16.0.3, as light mode
+  // didn't appear in the Apple design resources assets linked below.
+  color: Color(0xFFB6B6B6),
+  // Color extracted from https://developer.apple.com/design/resources/.
+  // TODO(LongCatIsLooong): https://github.com/flutter/flutter/issues/41507.
+  darkColor: Color(0xFF808080),
+);
+
+// These values were extracted from a screenshot of iOS 16.0.3, as light mode
+// didn't appear in the Apple design resources assets linked above.
+final BoxDecoration _kToolbarShadow = BoxDecoration(
+  borderRadius: const BorderRadius.all(_kToolbarBorderRadius),
+  boxShadow: <BoxShadow>[
+    BoxShadow(
+      color: CupertinoColors.black.withOpacity(0.1),
+      blurRadius: 16.0,
+      offset: Offset(0, _kToolbarArrowSize.height / 2),
+    ),
+  ],
+);
 
 /// The type for a Function that builds a toolbar's container with the given
 /// child.
@@ -119,14 +139,23 @@ class CupertinoTextSelectionToolbar extends StatelessWidget {
   // Builds a toolbar just like the default iOS toolbar, with the right color
   // background and a rounded cutout with an arrow.
   static Widget _defaultToolbarBuilder(BuildContext context, Offset anchor, bool isAbove, Widget child) {
-    return _CupertinoTextSelectionToolbarShape(
+    final Widget outputChild = _CupertinoTextSelectionToolbarShape(
       anchor: anchor,
       isAbove: isAbove,
       child: DecoratedBox(
-        decoration: const BoxDecoration(color: _kToolbarDividerColor),
+        decoration: BoxDecoration(
+          color: _kToolbarDividerColor.resolveFrom(context),
+        ),
         child: child,
       ),
     );
+    if (CupertinoTheme.brightnessOf(context) == Brightness.dark) {
+      return outputChild;
+    }
+    return DecoratedBox(
+      decoration: _kToolbarShadow,
+      child: outputChild,
+    );
   }
 
   @override
@@ -226,7 +255,6 @@ class _RenderCupertinoTextSelectionToolbarShape extends RenderShiftedBox {
     super.child,
   );
 
-
   @override
   bool get isRepaintBoundary => true;
 
@@ -485,7 +513,7 @@ class _CupertinoTextSelectionToolbarContentState extends State<_CupertinoTextSel
           onPressed: _handleNextPage,
           text: '▶',
         ),
-        nextButtonDisabled: CupertinoTextSelectionToolbarButton.text(
+        nextButtonDisabled: const CupertinoTextSelectionToolbarButton.text(
           text: '▶',
         ),
         children: widget.children,
diff --git a/packages/flutter/lib/src/cupertino/text_selection_toolbar_button.dart b/packages/flutter/lib/src/cupertino/text_selection_toolbar_button.dart
@@ -18,7 +18,17 @@ const TextStyle _kToolbarButtonFontStyle = TextStyle(
 
 // Colors extracted from https://developer.apple.com/design/resources/.
 // TODO(LongCatIsLooong): https://github.com/flutter/flutter/issues/41507.
-const Color _kToolbarBackgroundColor = Color(0xEB202020);
+const CupertinoDynamicColor _kToolbarBackgroundColor = CupertinoDynamicColor.withBrightness(
+  // This value was extracted from a screenshot of iOS 16.0.3, as light mode
+  // didn't appear in the Apple design resources assets linked above.
+  color: Color(0xEBF7F7F7),
+  darkColor: Color(0xEB202020),
+);
+
+const CupertinoDynamicColor _kToolbarTextColor = CupertinoDynamicColor.withBrightness(
+  color: CupertinoColors.black,
+  darkColor: CupertinoColors.white,
+);
 
 // Eyeballed value.
 const EdgeInsets _kToolbarButtonPadding = EdgeInsets.symmetric(vertical: 16.0, horizontal: 18.0);
@@ -33,22 +43,17 @@ class CupertinoTextSelectionToolbarButton extends StatelessWidget {
     this.onPressed,
     required Widget this.child,
   }) : assert(child != null),
+       text = null,
        buttonItem = null;
 
   /// Create an instance of [CupertinoTextSelectionToolbarButton] whose child is
   /// a [Text] widget styled like the default iOS text selection toolbar button.
-  CupertinoTextSelectionToolbarButton.text({
+  const CupertinoTextSelectionToolbarButton.text({
     super.key,
     this.onPressed,
-    required String text,
+    required this.text,
   }) : buttonItem = null,
-       child = Text(
-         text,
-         overflow: TextOverflow.ellipsis,
-         style: _kToolbarButtonFontStyle.copyWith(
-           color: onPressed != null ? CupertinoColors.white : CupertinoColors.inactiveGray,
-         ),
-       );
+       child = null;
 
   /// Create an instance of [CupertinoTextSelectionToolbarButton] from the given
   /// [ContextMenuButtonItem].
@@ -59,6 +64,7 @@ class CupertinoTextSelectionToolbarButton extends StatelessWidget {
     required ContextMenuButtonItem this.buttonItem,
   }) : assert(buttonItem != null),
        child = null,
+       text = null,
        onPressed = buttonItem.onPressed;
 
   /// {@template flutter.cupertino.CupertinoTextSelectionToolbarButton.child}
@@ -79,6 +85,10 @@ class CupertinoTextSelectionToolbarButton extends StatelessWidget {
   /// {@endtemplate}
   final ContextMenuButtonItem? buttonItem;
 
+  /// The text used in the button's label when using
+  /// [CupertinoTextSelectionToolbarButton.text].
+  final String? text;
+
   /// Returns the default button label String for the button of the given
   /// [ContextMenuButtonItem]'s [ContextMenuButtonType].
   static String getButtonLabel(BuildContext context, ContextMenuButtonItem buttonItem) {
@@ -106,12 +116,15 @@ class CupertinoTextSelectionToolbarButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final Widget child = this.child ?? Text(
-      getButtonLabel(context, buttonItem!),
-      overflow: TextOverflow.ellipsis,
-      style: _kToolbarButtonFontStyle.copyWith(
-        color: onPressed != null ? CupertinoColors.white : CupertinoColors.inactiveGray,
-      ),
-    );
+       text ?? getButtonLabel(context, buttonItem!),
+       overflow: TextOverflow.ellipsis,
+       style: _kToolbarButtonFontStyle.copyWith(
+         color: onPressed != null
+             ? _kToolbarTextColor.resolveFrom(context)
+             : CupertinoColors.inactiveGray,
+       ),
+     );
+
     return CupertinoButton(
       borderRadius: null,
       color: _kToolbarBackgroundColor,
diff --git a/packages/flutter/test/cupertino/text_field_test.dart b/packages/flutter/test/cupertino/text_field_test.dart
@@ -1500,7 +1500,7 @@ void main() {
     expect(controller.text, 'abcdef');
   });
 
-  testWidgets('toolbar has the same visual regardless of theming', (WidgetTester tester) async {
+  testWidgets('toolbar colors change with theme brightness, but nothing else', (WidgetTester tester) async {
     final TextEditingController controller = TextEditingController(
       text: "j'aime la poutine",
     );
@@ -1524,7 +1524,7 @@ void main() {
     await tester.pump(const Duration(milliseconds: 200));
 
     Text text = tester.widget<Text>(find.text('Paste'));
-    expect(text.style!.color, CupertinoColors.white);
+    expect(text.style!.color!.value, CupertinoColors.black.value);
     expect(text.style!.fontSize, 14);
     expect(text.style!.letterSpacing, -0.15);
     expect(text.style!.fontWeight, FontWeight.w400);
@@ -1556,7 +1556,7 @@ void main() {
 
     text = tester.widget<Text>(find.text('Paste'));
     // The toolbar buttons' text are still the same style.
-    expect(text.style!.color, CupertinoColors.white);
+    expect(text.style!.color!.value, CupertinoColors.white.value);
     expect(text.style!.fontSize, 14);
     expect(text.style!.letterSpacing, -0.15);
     expect(text.style!.fontWeight, FontWeight.w400);
diff --git a/packages/flutter/test/cupertino/text_selection_toolbar_test.dart b/packages/flutter/test/cupertino/text_selection_toolbar_test.dart
@@ -60,6 +60,11 @@ class TestBox extends SizedBox {
   static const double itemWidth = 100.0;
 }
 
+const CupertinoDynamicColor _kToolbarBackgroundColor = CupertinoDynamicColor.withBrightness(
+  color: Color(0xEBF7F7F7),
+  darkColor: Color(0xEB202020),
+);
+
 void main() {
   TestWidgetsFlutterBinding.ensureInitialized();
 
@@ -289,4 +294,64 @@ void main() {
     expect(find.text('Paste'), findsNothing);
     expect(find.text('Select all'), findsNothing);
   }, skip: kIsWeb); // [intended] We do not use Flutter-rendered context menu on the Web.
+
+  for (final Brightness? themeBrightness in <Brightness?>[...Brightness.values, null]) {
+    for (final Brightness? mediaBrightness in <Brightness?>[...Brightness.values, null]) {
+      testWidgets('draws dark buttons in dark mode and light button in light mode when theme is $themeBrightness and MediaQuery is $mediaBrightness', (WidgetTester tester) async {
+        await tester.pumpWidget(
+          CupertinoApp(
+            theme: CupertinoThemeData(
+              brightness: themeBrightness,
+            ),
+            home: Center(
+              child: Builder(
+                builder: (BuildContext context) {
+                  return MediaQuery(
+                    data: MediaQuery.of(context).copyWith(platformBrightness: mediaBrightness),
+                    child: CupertinoTextSelectionToolbar(
+                      anchorAbove: const Offset(100.0, 0.0),
+                      anchorBelow: const Offset(100.0, 0.0),
+                      children: <Widget>[
+                        CupertinoTextSelectionToolbarButton.text(
+                          onPressed: () {},
+                          text: 'Button',
+                        ),
+                      ],
+                    ),
+                  );
+                },
+              ),
+            ),
+          ),
+        );
+
+        final Finder buttonFinder = find.byType(CupertinoButton);
+        expect(buttonFinder, findsOneWidget);
+
+        final Finder decorationFinder = find.descendant(
+          of: find.byType(CupertinoButton),
+          matching: find.byType(DecoratedBox)
+        );
+        expect(decorationFinder, findsOneWidget);
+        final DecoratedBox decoratedBox = tester.widget(decorationFinder);
+        final BoxDecoration boxDecoration = decoratedBox.decoration as BoxDecoration;
+
+        // Theme brightness is preferred, otherwise MediaQuery brightness is
+        // used. If both are null, defaults to light.
+        late final Brightness effectiveBrightness;
+        if (themeBrightness != null) {
+          effectiveBrightness = themeBrightness;
+        } else {
+          effectiveBrightness = mediaBrightness ?? Brightness.light;
+        }
+
+        expect(
+          boxDecoration.color!.value,
+          effectiveBrightness == Brightness.dark
+              ? _kToolbarBackgroundColor.darkColor.value
+              : _kToolbarBackgroundColor.color.value,
+        );
+      }, skip: kIsWeb); // [intended] We do not use Flutter-rendered context menu on the Web.
+    }
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -990,7 +990,7 @@ class CupertinoDynamicColor extends Color with Diagnosticable {`
`990`	`990`	`CupertinoDynamicColor resolveFrom(BuildContext context) {`
`991`	`991`	`Brightness brightness = Brightness.light;`
`992`	`992`	`if (_isPlatformBrightnessDependent) {`
`993`		`- brightness = CupertinoTheme.maybeBrightnessOf(context) ?? Brightness.light;`
	`993`	`+ brightness = CupertinoTheme.maybeBrightnessOf(context) ?? Brightness.light;`
`994`	`994`	`}`
`995`	`995`	`bool isHighContrastEnabled = false;`
`996`	`996`	`if (_isHighContrastDependent) {`