Adds a fade in and out, rounds corners, fixes offset and fixes height of cursor on iOS (#24876)

* Fixes cursor on iOS devices

bin/internal/goldens.version

-6fc7ec65d51116c3f83acb5251e57e779af2ebbb
+b530d67675a5aa9c5458b93019ce91e20ad88758

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

@@ -110,6 +110,11 @@ class CupertinoButton extends StatefulWidget {
   /// Defaults to round corners of 8 logical pixels.
   final BorderRadius borderRadius;
 
+  /// The shape of the button.
+  ///
+  /// Defaults to a super ellipse with
+//  final ShapeBorder shape;
+
   final bool _filled;
 
   /// Whether the button is enabled or disabled. Buttons are disabled by default. To

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

@@ -35,6 +35,14 @@ const Color _kSelectionHighlightColor = Color(0x667FAACF);
 const Color _kInactiveTextColor = Color(0xFFC2C2C2);
 const Color _kDisabledBackground = Color(0xFFFAFAFA);
 
+// An eyeballed value that moves the cursor slightly left of where it is
+// rendered for text on Android so it's positioning more accurately matches the
+// native iOS text cursor positioning.
+//
+// This value is in device pixels, not logical pixels as is typically used
+// throughout the codebase.
+const int _iOSHorizontalCursorOffsetPixels = -2;
+
 /// Visibility of text field overlays based on the state of the current text entry.
 ///
 /// Used to toggle the visibility behavior of the optional decorating widgets
@@ -163,7 +171,7 @@ class CupertinoTextField extends StatefulWidget {
     this.inputFormatters,
     this.enabled,
     this.cursorWidth = 2.0,
-    this.cursorRadius,
+    this.cursorRadius = const Radius.circular(2.0),
     this.cursorColor = CupertinoColors.activeBlue,
     this.keyboardAppearance,
     this.scrollPadding = const EdgeInsets.all(20.0),
@@ -598,6 +606,7 @@ class _CupertinoTextFieldState extends State<CupertinoTextField> with AutomaticK
     final TextEditingController controller = _effectiveController;
     final List<TextInputFormatter> formatters = widget.inputFormatters ?? <TextInputFormatter>[];
     final bool enabled = widget.enabled ?? true;
+    final Offset cursorOffset = Offset(_iOSHorizontalCursorOffsetPixels / MediaQuery.of(context).devicePixelRatio, 0);
     if (widget.maxLength != null && widget.maxLengthEnforced) {
       formatters.add(LengthLimitingTextInputFormatter(widget.maxLength));
     }
@@ -631,6 +640,9 @@ class _CupertinoTextFieldState extends State<CupertinoTextField> with AutomaticK
           cursorWidth: widget.cursorWidth,
           cursorRadius: widget.cursorRadius,
           cursorColor: widget.cursorColor,
+          cursorOpacityAnimates: true,
+          cursorOffset: cursorOffset,
+          paintCursorAboveText: true,
           backgroundCursorColor: CupertinoColors.inactiveGray,
           scrollPadding: widget.scrollPadding,
           keyboardAppearance: keyboardAppearance,

packages/flutter/lib/src/material/text_field.dart

@@ -8,6 +8,7 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
 
 import 'debug.dart';
@@ -36,6 +37,14 @@ typedef InputCounterWidgetBuilder = Widget Function(
   }
 );
 
+// An eyeballed value that moves the cursor slightly left of where it is
+// rendered for text on Android so it's positioning more accurately matches the
+// native iOS text cursor positioning.
+//
+// This value is in device pixels, not logical pixels as is typically used
+// throughout the codebase.
+const int _iOSHorizontalCursorOffsetPixels = 2;
+
 /// A material design text field.
 ///
 /// A text field lets the user enter text, either with hardware keyboard or with
@@ -469,6 +478,14 @@ class _TextFieldState extends State<TextField> with AutomaticKeepAliveClientMixi
     && widget.decoration != null
     && widget.decoration.counterText == null;
 
+  Radius get _cursorRadius {
+    if (widget.cursorRadius != null)
+      return widget.cursorRadius;
+    if (Theme.of(context).platform == TargetPlatform.iOS)
+      return const Radius.circular(2.0);
+    return null;
+  }
+
   InputDecoration _getEffectiveDecoration() {
     final MaterialLocalizations localizations = MaterialLocalizations.of(context);
     final ThemeData themeData = Theme.of(context);
@@ -682,6 +699,22 @@ class _TextFieldState extends State<TextField> with AutomaticKeepAliveClientMixi
   @override
   bool get wantKeepAlive => _splashes != null && _splashes.isNotEmpty;
 
+  bool get _cursorOpacityAnimates => Theme.of(context).platform == TargetPlatform.iOS ? true : false;
+
+  Offset get _getCursorOffset => Offset(_iOSHorizontalCursorOffsetPixels / MediaQuery.of(context).devicePixelRatio, 0);
+
+  bool get _paintCursorAboveText => Theme.of(context).platform == TargetPlatform.iOS ? true : false;
+
+  Color get _cursorColor {
+    if (widget.cursorColor == null) {
+      if (Theme.of(context).platform == TargetPlatform.iOS)
+        return CupertinoTheme.of(context).primaryColor;
+      else
+        return Theme.of(context).cursorColor;
+    }
+    return widget.cursorColor;
+  }
+
   @override
   void deactivate() {
     if (_splashes != null) {
@@ -755,8 +788,11 @@ class _TextFieldState extends State<TextField> with AutomaticKeepAliveClientMixi
         inputFormatters: formatters,
         rendererIgnoresPointer: true,
         cursorWidth: widget.cursorWidth,
-        cursorRadius: widget.cursorRadius,
-        cursorColor: widget.cursorColor ?? themeData.cursorColor,
+        cursorRadius: _cursorRadius,
+        cursorColor: _cursorColor,
+        cursorOpacityAnimates: _cursorOpacityAnimates,
+        cursorOffset: _getCursorOffset,
+        paintCursorAboveText: _paintCursorAboveText,
         backgroundCursorColor: CupertinoColors.inactiveGray,
         scrollPadding: widget.scrollPadding,
         keyboardAppearance: keyboardAppearance,

packages/flutter/test/cupertino/text_field_test.dart

@@ -7,6 +7,7 @@ import 'dart:async';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 class MockClipboard {
@@ -143,6 +144,72 @@ void main() {
     },
   );
 
+  testWidgets('iOS cursor has offset', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const CupertinoApp(
+        home: CupertinoTextField(),
+      ),
+    );
+
+    final EditableText editableText = tester.firstWidget(find.byType(EditableText));
+    expect(editableText.cursorOffset, const Offset(-2.0 / 3.0, 0));
+  });
+
+  testWidgets('Cursor animates on iOS', (WidgetTester tester) async {
+    debugDefaultTargetPlatformOverride = TargetPlatform.iOS;
+
+    await tester.pumpWidget(
+      const CupertinoApp(
+        home: CupertinoTextField(),
+      ),
+    );
+
+    final Finder textFinder = find.byType(CupertinoTextField);
+    await tester.tap(textFinder);
+    await tester.pump();
+
+    final EditableTextState editableTextState = tester.firstState(find.byType(EditableText));
+    final RenderEditable renderEditable = editableTextState.renderEditable;
+
+    expect(renderEditable.cursorColor.alpha, 255);
+
+    await tester.pump(const Duration(milliseconds: 100));
+    await tester.pump(const Duration(milliseconds: 400));
+
+    expect(renderEditable.cursorColor.alpha, 255);
+
+    await tester.pump(const Duration(milliseconds: 200));
+    await tester.pump(const Duration(milliseconds: 100));
+
+    expect(renderEditable.cursorColor.alpha, 110);
+
+    await tester.pump(const Duration(milliseconds: 100));
+
+    expect(renderEditable.cursorColor.alpha, 16);
+    await tester.pump(const Duration(milliseconds: 50));
+
+    expect(renderEditable.cursorColor.alpha, 0);
+
+    debugDefaultTargetPlatformOverride = null;
+  });
+
+  testWidgets('Cursor radius is 2.0 on iOS', (WidgetTester tester) async {
+    debugDefaultTargetPlatformOverride = TargetPlatform.iOS;
+
+    await tester.pumpWidget(
+      const CupertinoApp(
+        home: CupertinoTextField(),
+      ),
+    );
+
+    final EditableTextState editableTextState = tester.firstState(find.byType(EditableText));
+    final RenderEditable renderEditable = editableTextState.renderEditable;
+
+    expect(renderEditable.cursorRadius, const Radius.circular(2.0));
+
+    debugDefaultTargetPlatformOverride = null;
+  });
+
   testWidgets(
     'can control text content via controller',
     (WidgetTester tester) async {

packages/flutter/test/material/text_field_test.dart

@@ -277,6 +277,65 @@ void main() {
     await checkCursorToggle();
   });
 
+  testWidgets('Cursor animates on iOS', (WidgetTester tester) async {
+    debugDefaultTargetPlatformOverride = TargetPlatform.iOS;
+
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Material(
+          child: TextField(),
+        ),
+      ),
+    );
+
+    final Finder textFinder = find.byType(TextField);
+    await tester.tap(textFinder);
+    await tester.pump();
+
+    final EditableTextState editableTextState = tester.firstState(find.byType(EditableText));
+    final RenderEditable renderEditable = editableTextState.renderEditable;
+
+    expect(renderEditable.cursorColor.alpha, 255);
+
+    await tester.pump(const Duration(milliseconds: 100));
+    await tester.pump(const Duration(milliseconds: 400));
+
+    expect(renderEditable.cursorColor.alpha, 255);
+
+    await tester.pump(const Duration(milliseconds: 200));
+    await tester.pump(const Duration(milliseconds: 100));
+
+    expect(renderEditable.cursorColor.alpha, 110);
+
+    await tester.pump(const Duration(milliseconds: 100));
+
+    expect(renderEditable.cursorColor.alpha, 16);
+    await tester.pump(const Duration(milliseconds: 50));
+
+    expect(renderEditable.cursorColor.alpha, 0);
+
+    debugDefaultTargetPlatformOverride = null;
+  });
+
+  testWidgets('Cursor radius is 2.0 on iOS', (WidgetTester tester) async {
+    debugDefaultTargetPlatformOverride = TargetPlatform.iOS;
+
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Material(
+          child: TextField(),
+        ),
+      ),
+    );
+
+    final EditableTextState editableTextState = tester.firstState(find.byType(EditableText));
+    final RenderEditable renderEditable = editableTextState.renderEditable;
+
+    expect(renderEditable.cursorRadius, const Radius.circular(2.0));
+
+    debugDefaultTargetPlatformOverride = null;
+  });
+
   testWidgets('cursor has expected defaults', (WidgetTester tester) async {
     await tester.pumpWidget(
         overlay(
@@ -305,6 +364,7 @@ void main() {
   });
 
   testWidgets('cursor layout has correct width', (WidgetTester tester) async {
+    EditableText.debugDeterministicCursor = true;
     await tester.pumpWidget(
         overlay(
           child: const RepaintBoundary(
@@ -321,9 +381,11 @@ void main() {
       find.byType(TextField),
       matchesGoldenFile('text_field_test.0.0.png'),
     );
+    EditableText.debugDeterministicCursor = false;
   }, skip: !Platform.isLinux);
 
   testWidgets('cursor layout has correct radius', (WidgetTester tester) async {
+    EditableText.debugDeterministicCursor = true;
     await tester.pumpWidget(
         overlay(
           child: const RepaintBoundary(
@@ -341,6 +403,7 @@ void main() {
       find.byType(TextField),
       matchesGoldenFile('text_field_test.1.0.png'),
     );
+    EditableText.debugDeterministicCursor = false;
   }, skip: !Platform.isLinux);
 
   testWidgets('obscureText control test', (WidgetTester tester) async {
@@ -1469,7 +1532,7 @@ void main() {
       editable.getLocalRectForCaret(const TextPosition(offset: 0)).topLeft,
     );
 
-    expect(topLeft.dx, equals(398.5));
+    expect(topLeft.dx, equals(401.0));
 
     await tester.enterText(find.byType(TextField), 'abcd');
     await tester.pump();
@@ -1478,7 +1541,7 @@ void main() {
       editable.getLocalRectForCaret(const TextPosition(offset: 2)).topLeft,
     );
 
-    expect(topLeft.dx, equals(398.5));
+    expect(topLeft.dx, equals(401.0));
   });
 
   testWidgets('Can align to center within center', (WidgetTester tester) async {
@@ -1501,7 +1564,7 @@ void main() {
       editable.getLocalRectForCaret(const TextPosition(offset: 0)).topLeft,
     );
 
-    expect(topLeft.dx, equals(398.5));
+    expect(topLeft.dx, equals(401.0));
 
     await tester.enterText(find.byType(TextField), 'abcd');
     await tester.pump();
@@ -1510,7 +1573,7 @@ void main() {
       editable.getLocalRectForCaret(const TextPosition(offset: 2)).topLeft,
     );
 
-    expect(topLeft.dx, equals(398.5));
+    expect(topLeft.dx, equals(401.0));
   });
 
   testWidgets('Controller can update server', (WidgetTester tester) async {
@@ -1723,7 +1786,7 @@ void main() {
 
     scrollableState = tester.firstState(find.byType(Scrollable));
     // For a horizontal input, scrolls to the exact position of the caret.
-    expect(scrollableState.position.pixels, equals(222.0));
+    expect(scrollableState.position.pixels, equals(223.0));
   });
 
   testWidgets('Multiline text field scrolls the caret into view', (WidgetTester tester) async {
@@ -3130,7 +3193,7 @@ void main() {
       editable.getLocalRectForCaret(const TextPosition(offset: 10)).topLeft,
     );
 
-    expect(topLeft.dx, equals(701.0));
+    expect(topLeft.dx, equals(701.6666870117188));
 
     await tester.pumpWidget(
       const MaterialApp(
@@ -3150,7 +3213,7 @@ void main() {
       editable.getLocalRectForCaret(const TextPosition(offset: 10)).topLeft,
     );
 
-    expect(topLeft.dx, equals(160.0));
+    expect(topLeft.dx, equals(160.6666717529297));
   });
 
   testWidgets('TextField semantics', (WidgetTester tester) async {

packages/flutter/test/rendering/editable_test.dart

@@ -124,7 +124,9 @@ void main() {
 
     await tester.pumpWidget(
       MaterialApp(
-        home: Material(
+        home: Padding(
+          padding: const EdgeInsets.only(top: 0.25),
+          child: Material(
             child: TextField(
               controller: controller,
               focusNode: focusNode,
@@ -132,6 +134,7 @@ void main() {
             ),
           ),
         ),
+      ),
     );
 
     await tester.tap(find.byType(EditableText));
@@ -144,16 +147,32 @@ void main() {
       offset: const Offset(20, 20)));
     await tester.pump();
 
-    expect(find.byType(EditableText), paints..rrect(
-      rrect: RRect.fromRectAndRadius(Rect.fromLTRB(464.5, 0, 467.5, 16.0), const Radius.circular(1.0)), color: const Color(0xff4285f4))
+    expect(editable, paints
+      ..rrect(rrect: RRect.fromRectAndRadius(
+        Rect.fromLTRB(464.6666564941406, -1.5833333730697632, 466.6666564941406, 16.41666603088379),
+        const Radius.circular(2.0)),
+        color: const Color(0xff8e8e93))
+      ..rrect(rrect: RRect.fromRectAndRadius(
+        Rect.fromLTRB(465.1666564941406, -2.416666269302368, 468.1666564941406, 17.58333396911621),
+        const Radius.circular(1.0)),
+        color: const Color(0xbf2196f3))
     );
 
     // Moves the cursor right a few characters.
-    editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.Update,
+    editableTextState.updateFloatingCursor(
+        RawFloatingCursorPoint(
+          state: FloatingCursorDragState.Update,
           offset: const Offset(-250, 20)));
 
-    expect(find.byType(EditableText), paints..rrect(
-      rrect: RRect.fromRectAndRadius(Rect.fromLTRB(194.5, 0, 197.5, 16.0), const Radius.circular(1.0)), color: const Color(0xff4285f4))
+    expect(find.byType(EditableText), paints
+      ..rrect(rrect: RRect.fromRectAndRadius(
+          Rect.fromLTRB(192.6666717529297, -1.5833333730697632, 194.6666717529297, 16.41666603088379),
+          const Radius.circular(2.0)),
+          color: const Color(0xff8e8e93))
+      ..rrect(rrect: RRect.fromRectAndRadius(
+          Rect.fromLTRB(195.16665649414062, -2.416666269302368, 198.16665649414062, 17.58333396911621),
+          const Radius.circular(1.0)),
+          color: const Color(0xbf2196f3))
     );
 
     editableTextState.updateFloatingCursor(RawFloatingCursorPoint(state: FloatingCursorDragState.End));

packages/flutter/test/widgets/editable_text_show_on_screen_test.dart

@@ -201,7 +201,10 @@ void main() {
     final TextEditingController textController = TextEditingController();
     final PageController pageController = PageController(initialPage: 1);
 
-    await tester.pumpWidget(Directionality(
+    await tester.pumpWidget(
+      MediaQuery(
+        data: const MediaQueryData(devicePixelRatio: 1.0),
+        child: Directionality(
           textDirection: TextDirection.ltr,
           child: Material(
             child: PageView(
@@ -222,7 +225,9 @@ void main() {
               ],
             ),
           ),
-    ));
+        ),
+      ),
+    );
 
     await tester.showKeyboard(find.byType(EditableText));
     await tester.pumpAndSettle();

packages/flutter/test/widgets/form_test.dart

@@ -11,7 +11,9 @@ void main() {
     String fieldValue;
 
     Widget builder() {
-      return Directionality(
+      return MediaQuery(
+        data: const MediaQueryData(devicePixelRatio: 1.0),
+        child: Directionality(
           textDirection: TextDirection.ltr,
           child: Center(
             child: Material(
@@ -23,6 +25,7 @@ void main() {
               ),
             ),
           ),
+        ),
       );
     }
 
@@ -45,7 +48,9 @@ void main() {
     String fieldValue;
 
     Widget builder() {
-      return Directionality(
+      return MediaQuery(
+        data: const MediaQueryData(devicePixelRatio: 1.0),
+        child: Directionality(
           textDirection: TextDirection.ltr,
           child: Center(
             child: Material(
@@ -56,6 +61,7 @@ void main() {
               ),
             ),
           ),
+        ),
       );
     }
 
@@ -78,7 +84,9 @@ void main() {
     String errorText(String value) => value + '/error';
 
     Widget builder(bool autovalidate) {
-      return Directionality(
+      return MediaQuery(
+        data: const MediaQueryData(devicePixelRatio: 1.0),
+        child: Directionality(
           textDirection: TextDirection.ltr,
           child: Center(
             child: Material(
@@ -91,6 +99,7 @@ void main() {
               ),
             ),
           ),
+        ),
       );
     }
 
@@ -129,7 +138,9 @@ void main() {
     String errorText(String input) => '${fieldKey.currentState.value}/error';
 
     Widget builder() {
-      return Directionality(
+      return MediaQuery(
+        data: const MediaQueryData(devicePixelRatio: 1.0),
+        child: Directionality(
           textDirection: TextDirection.ltr,
           child: Center(
             child: Material(
@@ -149,6 +160,7 @@ void main() {
               ),
             ),
           ),
+        ),
       );
     }
 
@@ -172,7 +184,9 @@ void main() {
     final GlobalKey<FormFieldState<String>> inputKey = GlobalKey<FormFieldState<String>>();
 
     Widget builder() {
-      return Directionality(
+      return MediaQuery(
+        data: const MediaQueryData(devicePixelRatio: 1.0),
+        child: Directionality(
           textDirection: TextDirection.ltr,
           child: Center(
             child: Material(
@@ -184,6 +198,7 @@ void main() {
               ),
             ),
           ),
+        ),
       );
     }
 
@@ -212,7 +227,9 @@ void main() {
     final GlobalKey<FormFieldState<String>> inputKey = GlobalKey<FormFieldState<String>>();
 
     Widget builder() {
-      return Directionality(
+      return MediaQuery(
+        data: const MediaQueryData(devicePixelRatio: 1.0),
+        child: Directionality(
           textDirection: TextDirection.ltr,
           child: Center(
             child: Material(
@@ -224,6 +241,7 @@ void main() {
               ),
             ),
           ),
+        ),
       );
     }
 
@@ -254,7 +272,9 @@ void main() {
     final TextEditingController controller = TextEditingController(text: 'Plover');
 
     Widget builder() {
-      return Directionality(
+      return MediaQuery(
+        data: const MediaQueryData(devicePixelRatio: 1.0),
+        child: Directionality(
           textDirection: TextDirection.ltr,
           child: Center(
             child: Material(
@@ -268,6 +288,7 @@ void main() {
               ),
             ),
           ),
+        ),
       );
     }
     await tester.pumpWidget(builder());
@@ -301,7 +322,9 @@ void main() {
       return StatefulBuilder(
         builder: (BuildContext context, StateSetter setter) {
           setState = setter;
-          return Directionality(
+          return MediaQuery(
+            data: const MediaQueryData(devicePixelRatio: 1.0),
+            child: Directionality(
               textDirection: TextDirection.ltr,
               child: Center(
                 child: Material(
@@ -313,6 +336,7 @@ void main() {
                   ),
                 ),
               ),
+            ),
           );
         },
       );
@@ -396,7 +420,9 @@ void main() {
     String fieldValue;
 
     Widget builder(bool remove) {
-      return Directionality(
+      return MediaQuery(
+        data: const MediaQueryData(devicePixelRatio: 1.0),
+        child: Directionality(
           textDirection: TextDirection.ltr,
           child: Center(
             child: Material(
@@ -410,6 +436,7 @@ void main() {
               ),
             ),
           ),
+        ),
       );
     }
 

packages/flutter/test/widgets/physical_model_test.dart

@@ -6,7 +6,10 @@ import 'package:flutter_test/flutter_test.dart';
 void main() {
   testWidgets('PhysicalModel - creates a physical model layer when it needs compositing', (WidgetTester tester) async {
     debugDisableShadows = false;
-    await tester.pumpWidget(Directionality(
+    await tester.pumpWidget(
+      MediaQuery(
+        data: const MediaQueryData(devicePixelRatio: 1.0),
+        child: Directionality(
           textDirection: TextDirection.ltr,
           child: PhysicalModel(
             shape: BoxShape.rectangle,
@@ -16,6 +19,7 @@ void main() {
             child: Material(child: TextField(controller: TextEditingController())),
           ),
         ),
+      ),
     );
     await tester.pump();