Skip to content

[TextField]backgroundColor covers/hides cursor and text selection #96112

Open
Open
[TextField]backgroundColor covers/hides cursor and text selection#96112
Labels
P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemsfound in release: 2.8Found to occur in 2.8found in release: 2.9Found to occur in 2.9has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagespackageflutter/packages repository. See also p: labels.team-text-inputOwned by Text Input teamtriaged-text-inputTriaged by Text Input team

Description

@uvizhe
uvizhe
opened on Jan 4, 2022

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

Activity

  1. maheshj01
    added
    in triagePresently being triaged by the triage team
    on Jan 5, 2022

  2. maheshj01 commented on Jan 5, 2022

    @maheshj01
    maheshj01
    on Jan 5, 2022
    Member

    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
    Simulator Screen Shot - iPhone 13 Pro - 2022-01-05 at 13 47 54
    Web Desktop
    image image
  3. maheshj01
    added
    a: text inputEntering text in a text field or keyboard related problems
    p: material_uimaterial_ui package in flutter/packages
    found in release: 2.8Found to occur in 2.8
    found in release: 2.9Found to occur in 2.9
    frameworkflutter/packages/flutter repository. See also f: labels.
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    and removed
    in triagePresently being triaged by the triage team
    on Jan 5, 2022
  4. maheshj01
    changed the title [-]backgroundColor of TextField covers/hides cursor and text selection[/-] [+][TextField]`backgroundColor` covers/hides cursor and text selection[/+] on Jan 5, 2022

  5. JsouLiang commented on Jan 7, 2022

    @JsouLiang
    JsouLiang
    on Jan 7, 2022
    Contributor

    I had find the reason and solve that: #96276

  6. HansMuller
    assigned
    justinmc
    on Jan 7, 2022

  7. nt4f04uNd commented on Jan 8, 2022

    @nt4f04uNd
    nt4f04uNd
    on Jan 8, 2022
    Member

    Duplicate of #79168. According to @LongCatIsLooong's comment there, it's currently blocked on #39420

  8. justinmc
    removed their assignment
    on Feb 4, 2022

  9. Mr-1311 commented on Feb 22, 2023

    @Mr-1311
    Mr-1311
    on Feb 22, 2023

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

  10. 5 remaining items

  11. TekExplorer commented on Nov 15, 2023

    @TekExplorer
    TekExplorer
    on Nov 15, 2023

    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?)

  12. TekExplorer commented on Nov 16, 2023

    @TekExplorer
    TekExplorer
    on Nov 16, 2023

    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!

  13. Hixie
    removed
    multiteam-retriage-candidate
    on Mar 6, 2024
  14. auto-submit
    added a commit that references this issue on Sep 26, 2024

    [flutter_markdown] remove backgroundColor from code text theme to ena…

    c154d1d

  15. taosimple commented on Jun 25, 2025

    @taosimple
    taosimple
    on Jun 25, 2025

    still persists in Flutter 3.32.2 • channel stable

  16. flutter-triage-bot
    removed
    triaged-designTriaged by Design Languages team
    on Jun 25, 2025

  17. flutter-triage-bot commented on Jun 25, 2025

    @flutter-triage-bot
    flutter-triage-botbot
    on Jun 25, 2025

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

  18. dkwingsmt
    added
    team-text-inputOwned by Text Input team
    and removed
    team-designOwned by Design Languages team
    on Jun 25, 2025
  19. justinmc
    added
    P2Important issues not at the top of the work list
    triaged-text-inputTriaged by Text Input team
    on Jun 26, 2025
  20. creatorpiyush
    added a commit that references this issue on Jun 10, 2026

    [flutter_markdown] remove backgroundColor from code text theme to ena…

    09dd684
  21. bisor0627
    added a commit that references this issue on Jun 19, 2026

    [flutter_markdown] remove backgroundColor from code text theme to ena…

    ceecaed
  22. Piinks
    added
    packageflutter/packages repository. See also p: labels.
    and removed
    frameworkflutter/packages/flutter repository. See also f: labels.
    on Aug 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemsfound in release: 2.8Found to occur in 2.8found in release: 2.9Found to occur in 2.9has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagespackageflutter/packages repository. See also p: labels.team-text-inputOwned by Text Input teamtriaged-text-inputTriaged by Text Input team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions