[TextField]`backgroundColor` covers/hides cursor and text selection

[uvizhe]

Setting backgroundColor on TextField appears to mask cursor and text selection. That is when you type some text in a text box and move cursor back it disappears. Selecting text doesn't show any visual indicator of a selection either.

Below is a code to reproduce this.

I observe this behavior at least on linux and android.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextField(
          style: new TextStyle(backgroundColor: Colors.yellow),
        ),
      ),
    );
  }
}

https://dartpad.dev/?id=c76c8bd3543de7eeea64cd6d0b225835 <== you can test it here

[maheshj01]

Hi @uvizhe, thanks for reporting the issue. I am able to reproduce the issue on the stable and the master channel on all platforms. By adding the background color to text, text selection is not visible. Also, the textSelectionTheme doesn't seem to take effect, unless the backgroundColor is removed.

 theme: ThemeData(
          textSelectionTheme: const TextSelectionThemeData(
        selectionColor: Colors.red,
      )),

flutter doctor -v

[✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-arm, locale en-GB)
    • Flutter version 2.8.1 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 77d935af4d (3 weeks ago), 2021-12-16 08:37:33 -0800
    • Engine revision 890a5fca2e
    • Dart version 2.15.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

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

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 60.1.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.3:5555                     • android-arm64  • Android 11 (API 30)
    • iPhone 13 Pro (mobile) • 0FA2FB93-2A89-4FDB-8293-DF66188F1E54 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0
      (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.1 21C52 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 96.0.4664.110

• No issues found!

[✓] Flutter (Channel master, 2.9.0-1.0.pre.224, on macOS 12.1 21C52 darwin-arm, locale en-GB)
    • Flutter version 2.9.0-1.0.pre.224 at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a0f8937b7c (2 days ago), 2022-01-03 04:15:18 -0500
    • Engine revision 8f53bbfde0
    • Dart version 2.16.0 (build 2.16.0-134.0.dev)
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

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

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 60.1.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.3:5555                     • android-arm64  • Android 11 (API 30)
    • iPhone 13 Pro (mobile) • 0FA2FB93-2A89-4FDB-8293-DF66188F1E54 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0
      (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.1 21C52 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 96.0.4664.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Android	IOS

Web	Desktop

[JsouLiang]

I had find the reason and solve that: https://github.com/flutter/flutter/pull/96276

[nt4f04uNd]

Duplicate of https://github.com/flutter/flutter/issues/79168. According to @LongCatIsLooong's comment there, it's currently blocked on https://github.com/flutter/flutter/issues/39420

[Mr-1311]

Blocking issue seems like merged, is there an update on this issue?

[maheshj01]

cc: @LongCatIsLooong

[radkr]

Is there any update on this issue? It is blocking for me.

[TekExplorer]

This is a serious issue for me; I have to define background color for reasons, but i need selection to actually appear, and i do not want to do this custom. It makes zero sense to me that it's behind the background color. Why not make the selection appear in front of it? (maybe still behind the text but in front of the color?)

[TekExplorer]

I've managed to get around this by stacking rich texts, (bottom one has the background color and transparent text, top one has the text color but no background) but this should not be necessary guys!

[taosimple]

still persists in Flutter 3.32.2 • channel stable

[flutter-triage-bot[bot]]

This issue is missing a priority label. Please set a priority label when adding the triaged-design label.