'textSelectionHandleColor' doesn't work for iOS whereas 'textSelectionColor' works for both platforms

[Pavel-Sulimau]

Steps to Reproduce

1. Create an app with this code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textSelectionColor: Colors.green,
        textSelectionHandleColor: Colors.greenAccent,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('textSelectionHandleColor'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: TextField(),
          ),
        ),
      ),
    );
  }
}

2. Run it iOS and Android platforms, type some text and make the text selected.
3. Take a look at the color of the text selection handles.
4. Android uses both 'textSelectionColor' and 'textSelectionHandleColor' theme's values, whereas iOS ignores the latter.

Target Platform: iOS
Devices: Simulator (iPhone 11 - 13.1), iPhone 8 - 13.1.3

Logs

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.15 19A602, locale en-BY)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.1)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.39.2)
[✓] Connected device (2 available)

• No issues found!

I dug into the sources of flutter a bit and saw the following:

material 'text_selection.dart' uses the theme's value

painter: _TextSelectionHandlePainter(
      color: Theme.of(context).textSelectionHandleColor
),

whereas cupertino 'text_selection.dart' has the hardcoded color value

final Paint paint = Paint()
    ..color = _kHandlesColor
    ..strokeWidth = 2.0;

Shouldn't the text selection handles on iOS be affected by 'textSelectionHandleColor' value?

[HansMuller]

In this case the TextField's adaptation for iOS is intended to be faithful to the native look and feel for the text selection, rather than to the Material theme. Maybe we need a way to override that.

CC @LongCatIsLooong

[Pavel-Sulimau]

If it's intended to be faithful to iOS, I would expect that either both of the mentioned properties work or both don't. I would also suggest making this behavior more explicit by putting a corresponding comment on the color/colors.

[TahaTesser]

Code Sample

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData(
          cursorColor: Colors.red,
          textSelectionHandleColor: Colors.red,
          textSelectionColor: Colors.red.withOpacity(0.4)),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
        child: TextField(),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.6 19G73, locale en-GB)
    • Flutter version 1.17.5 at /Users/tahatesser/Code/flutter_stable
    • Framework revision 8af6b2f038 (4 weeks ago), 2020-06-30 12:53:55 -0700
    • Engine revision ee76268252
    • Dart version 2.8.4

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.1
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.47.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.2

[✓] Connected device (2 available)
    • Taha’s iPhone • 00008020-001059882212002E            • ios • iOS 13.6
    • iPhone 11     • 7863E29F-EEE8-499E-BB28-6B111B76E3EE • ios •
      com.apple.CoreSimulator.SimRuntime.iOS-13-6 (simulator)

• No issues found!

flutter doctor -v

[✓] Flutter (Channel dev, 1.21.0-1.0.pre, on Mac OS X 10.15.6 19G73, locale
    en-GB)
    • Flutter version 1.21.0-1.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision f25bd9c55c (2 weeks ago), 2020-07-14 20:26:01 -0400
    • Engine revision 99c2b3a245
    • Dart version 2.9.0 (build 2.9.0-21.0.dev 20bf2fcf56)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.1
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.47.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.2

[✓] Connected device (5 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E            • ios
      • iOS 13.6
    • iPhone 11 (mobile)     • 7863E29F-EEE8-499E-BB28-6B111B76E3EE • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-13-6 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64
      • Mac OS X 10.15.6 19G73
    • Web Server (web)       • web-server                           •
      web-javascript • Flutter Tools
    • Chrome (web)           • chrome                               •
      web-javascript • Google Chrome 84.0.4147.89

• No issues found!

[vanlooverenkoen]

I can see that @LongCatIsLooong has added the follow line on 8/10/2020 on master.

painter: _TextSelectionHandlePainter(CupertinoTheme.of(context).primaryColor),

I tried to over write it like this. but it didn't work (on the master branch)

CupertinoTheme(
        data: CupertinoThemeData(
          primaryColor: Colors.green,
        ),
        child: TextField()
)

[adeolaex]

@vanlooverenkoen Try setting the cupertinoOverrideTheme over at the ThemeData in the MaterialApp widget.

For example

// Root class called by the runApp() method.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        textSelectionColor: Colors.green,
        brightness: Brightness.light,
        cupertinoOverrideTheme: CupertinoThemeData(
          primaryColor: Colors.green,
        ),
      ),
      home: App(),
    );
  }
}

For some reason, IOS ignores the Material defined values.

[GaryQian]

cc @justinmc Did you want to take a look at this? This doesn't look like it needs much code changes, but more of a policy decision on whether to set the textSelectionHandleColor in the Cupertino theme derivation of Material theme.

[justinmc]

@darrenaustin I believe you were working on TextSelectionTheme, did you have any opinion on how iOS should use those settings?

I think I'm leaning towards iOS-style text selection using only Cupertino theme values. That would mean updating it so that textSelectionColor has no effect on iOS. iOS text selection is mostly defined in cupertino/text_selection.dart, which doesn't have access to the Material library's theming. I'm not sure how we plan to handle this kind of theming for other platforms, though.

I can open a quick PR to disable textSelectionColor on iOS if no one objects.

[AyushBherwani1998]

@justinmc I think that would be a better option. Said that, the ThemeData.textSelectionColor is already deprecated and TextSelectionThemeData.selectionColor is not taken into consideration by iOS. Currently, it's really inconvenient because text selection color doesn't depend on the CupertinoTheme, and cursor color depends on CupertinoTheme. I just had a hard time figure out what was going on and why ThemeData values were not taken into consideration.

Said that, we should file another issue for improving the docs to mention this behavior. Happy to file and raise a PR, if we are on same page.

[darrenaustin]

I don't have a strong opinion on whether we should allow the material theme settings should apply to textfields on iOS, but we should be consistent. It looks like two of the TextSelectionThemeData parameters (cursorColor and selectionColor) are used on Cupertino text fields, while the selectionHandleColor is not. I would lean toward turning them all off for Cupertino, but I seem to recall someone raised an issue a while back that they couldn't change the colors on iOS, so people may need this.

I am not that familiar with how the text selection handles are implemented for Cupertino. Would it be hard to have them use the material theme data for this to be consistent?

[justinmc]

I think it would be hard for CupertinoTextField, because CupertinoTextField can't access the Material theme.

@AyushBherwani1998 I'm on board with just updating the docs if you're still able to write a pull request.

[AyushBherwani1998]

@justinmc I'll send a PR soon to update docs.

[flutter-triage-bot]

This issue is assigned but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

[flutter-triage-bot]

This issue was assigned to @AyushBherwani1998 but has had no status updates in a long time. To remove any ambiguity about whether the issue is being worked on, the assignee was removed.

[justinmc]

It looks like this should have been closed with #75967.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.