Repository navigation
Material Text Selection Toolbar color conflicts with brightness theme #89939
Description
Activity
@blaneyneil
Can you provideflutter doctor -vand a complete minimal reproducible code sample that we can use to verify this issue ?
Thanks.[✓] Flutter (Channel stable, 2.5.0, on macOS 11.5.2 20G95 darwin-x64, locale en-US) • Flutter version 2.5.0 at /Users/neil/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 4cc385b4b8 (6 days ago), 2021-09-07 23:01:49 -0700 • Engine revision f0826da7ef • Dart version 2.14.0 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0-rc5) • Android SDK at /Users/neil/Library/Android/sdk • Platform android-30, build-tools 31.0.0-rc5 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.5.1, Build version 12E507 • CocoaPods version 1.10.0 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2020.3) • 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.10+0-b96-7281165) [✓] IntelliJ IDEA Ultimate Edition (version 2021.2.1) • IntelliJ at /Applications/IntelliJ IDEA.app • Flutter plugin version 60.1.4 • Dart plugin version 212.5080.8 [✓] Connected device (5 available) • Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 10 (API 29) (emulator) • iPhone 8 (mobile) • CAA1230E-A3E2-4952-B865-605C69E2F0C6 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator) • iPhone 12 Pro Max (mobile) • 4E0CCEC5-85E5-43B3-AC21-E6BC824828D9 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator) • Chrome (web) • chrome • web-javascript • Google Chrome 93.0.4577.63 • No issues found!class Sample extends StatelessWidget { const Sample(); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: SelectableText.rich( TextSpan( style: const TextStyle(color: Colors.black, fontSize: 13.0, fontFamily: 'roboto'), children: [ TextSpan( text: 'sdf saf asd asdf asd fasd fas dfas dfas dfas df asdf asdf asd fasdf asd fasdf asd asd fa', //style: _styleLocal.copyWith(color: GColors.grey), ), ], ), ), ), ); } }and this is using theme data of:
colorScheme: ColorScheme( brightness: Brightness.dark, // dark icons on light background surface: Colors.white, // The background color for widgets like Card. onSurface: Colors.grey, // A color that's clearly legible when drawn on surface ),in case anyone is looking for a workaround, you can set a
textButtonThemein your ThemeData'scolorScheme: ColorScheme()of:textButtonTheme: TextButtonThemeData( style: TextButton.styleFrom( textStyle: TextStyle(), backgroundColor: Colors.whatever, ), ),which also controls your Android text selection toolbar.
Reacted by Petr NymsaReacted by Petr NymsaThanks for the details. I see the same behavior.
stable, master flutter doctor -v
[✓] Flutter (Channel stable, 2.5.0, on Mac OS X 10.15.4 19E2269 darwin-x64, locale en-GB) • Flutter version 2.5.0 at /Users/dhs/documents/fluttersdk/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 4cc385b4b8 (2 days ago), 2021-09-07 23:01:49 -0700 • Engine revision f0826da7ef • Dart version 2.14.0 [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.3, Build version 12C33 • CocoaPods version 1.10.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.58.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Connected device (3 available) • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 93.0.4577.63 • No issues found! [✓] Flutter (Channel master, 2.6.0-6.0.pre.82, on Mac OS X 10.15.4 19E2269 darwin-x64, locale en-GB) • Flutter version 2.6.0-6.0.pre.82 at /Users/dhs/documents/fluttersdk/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 3b7adb989f (88 minutes ago), 2021-09-13 21:32:04 -0700 • Engine revision abb1980f65 • Dart version 2.15.0 (build 2.15.0-96.0.dev) [✓] Xcode - develop for iOS and macOS (Xcode 12.3) • Xcode at /Applications/Xcode.app/Contents/Developer • CocoaPods version 1.10.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.58.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 93.0.4577.63 • No issues found!5 remaining items
Hello, I am also getting a similar issue with Android only.
In theme data I have ThemeData( textButtonTheme: textButtonThemeData, ) and textButtonThemeData => TextButtonThemeData(style: defaultTextButtonStyle); also, ButtonStyle get defaultTextButtonStyle => ButtonStyle( backgroundColor: Color(0xff05164d),// blue color ),- On selecting the text of just doing copy, paste.
I am working with Flutter version 3.10.5
[✓] Flutter (Channel stable, 3.10.5, on macOS 13.5 22G74 darwin-arm64, locale en-IN) • Flutter version 3.10.5 on channel stable at /Users/piyushanand/development/FlutterSDK/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 796c8ef792 (7 weeks ago), 2023-06-13 15:51:02 -0700 • Engine revision 45f6e00911 • Dart version 3.0.5 • DevTools version 2.23.1 [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2) • Android SDK at /Users/piyushanand/Library/Android/sdk • Platform android-33, build-tools 33.0.2 • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E300c • CocoaPods version 1.12.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.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 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.80.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.68.0 [✓] Connected device (5 available) • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 13 (API 33) (emulator) • iPhone 14 (mobile) • A0DD9D39-9216-46E2-ADEB-9BA16B42145B • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • iPhone 14 Pro Max (mobile) • 59B56FAE-81CB-4E0E-B69C-78B29CD00DF2 • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 13.5 22G74 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 115.0.5790.114 [✓] Network resources • All expected network resources are available. • No issues found!@QuncCccccc Would you be able to help me sort out how the context menu button colors should work with theming? Or let me know if you're not the right person.
Currently I'm setting the text color based on two hard-coded values that switch based on brightness:
I think the background color is just the default color of the Material widget.
Ideally, the background and text color should probably be controllable via the theme in the same way that other buttons are, if that's possible. Can I do that here?
Code Result // From Taha's sample code above. theme: ThemeData( colorScheme: Theme.of(context).colorScheme.copyWith( brightness: Brightness.dark, surface: Colors.white, onSurface: Colors.grey, ), ),
theme: ThemeData( brightness: Brightness.light, ), ),
theme: ThemeData( brightness: Brightness.dark, ),
final Color foregroundColor = isDark ? Colors.white : Colors.black87;
Can we directly remove this line👆and change here to
forgroundColor: theme.colorScheme.onSurface?It seems in this case, we set a dark brightness for colorScheme, so the foregroundColor of context menu is set to white. Then with a white surface, we cannot see the text on the buttons.
Reacted by Justin McCandless- added a commit that references this issue
on Aug 7, 2023 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 -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on Aug 22, 2023 - added a commit that references this issue
on Jun 12, 2026
Metadata
Metadata
Assignees
Labels
Entering text in a text field or keyboard related problemsFound to occur in 2.5Found to occur in 2.6flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onmaterial_ui package in flutter/packagesIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages team
In Flutter 2.5, with the new ColorScheme theming, you need to set
brightness: Brightness.darkin order to get the status bar info (e.g., battery, wifi, time) to show as dark on light. However, in Material'stext_selection_toolbar_text_button.dartline 112 the ternary logic uses that brightness setting, which results in a white on white toolbar for the text selection options.With Cupertino's
text_selection_toolbar_button.dartit's not a problem because the toolbar color is hard coded with _kToolbarBackgroundColor.