Material Text Selection Toolbar color conflicts with brightness theme

In Flutter 2.5, with the new ColorScheme theming, you need to set brightness: Brightness.dark in order to get the status bar info (e.g., battery, wifi, time) to show as dark on light. However, in Material's text_selection_toolbar_text_button.dart line 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.dart it's not a problem because the toolbar color is hard coded with _kToolbarBackgroundColor.

@blaneyneil

@blaneyneil
Can you provide flutter doctor -v and 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 textButtonTheme in your ThemeData's colorScheme: ColorScheme() of:

textButtonTheme: TextButtonThemeData(
    style: TextButton.styleFrom(
      textStyle: TextStyle(),
      backgroundColor: Colors.whatever,
    ),
),

which also controls your Android text selection toolbar.

@justinmc

CC @justinmc @darrenaustin

Thanks 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!

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

@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:

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

Lines 137 to 138 in 972d36c

    
           final bool isDark = theme.colorScheme.brightness == Brightness.dark; 
        
           final Color foregroundColor = isDark ? Colors.white : Colors.black87;

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.

Android context menu theming and visual update (#131816)

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.

Android context menu theming and visual update (#131816)

Navigation Menu

Repository navigation

Material Text Selection Toolbar color conflicts with brightness theme #89939

5 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	final bool isDark = theme.colorScheme.brightness == Brightness.dark;
	final Color foregroundColor = isDark ? Colors.white : Colors.black87;

Material Text Selection Toolbar color conflicts with brightness theme #89939

Description

Activity

darshankawar commented on Sep 13, 2021

blaneyneil commented on Sep 13, 2021

blaneyneil commented on Sep 13, 2021

HansMuller commented on Sep 13, 2021

darshankawar commented on Sep 14, 2021

5 remaining items

creatorpiyush commented on Jul 31, 2023

justinmc commented on Jul 31, 2023

QuncCccccc commented on Jul 31, 2023

github-actions commented on Aug 22, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions