Skip to content

Missing API for TextSelectionToolbar styling #22210

Closed
#107193
Closed
Missing API for TextSelectionToolbar styling#22210
#107193
Assignees
justinmc
Labels
P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemsc: new featureNothing broken; request for a new capabilityframeworkflutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packages

Description

@lesnitsky
lesnitsky
opened on Sep 24, 2018

There is no way to override TextSelectionToolbar styles.
Example below doesn't have any effect on TextSelectionToolbar styling

Theme(
    data: Theme.of(context).copyWith(
        splashColor: Colors.black, // should update splash color of FlatButton used in Toolbar
        canvasColor: Colors.red, // should update background color
    ),
    child: TextField(...),
);

Background color of TextSelectionToolbar is also not obvious to override (it comes from underlying Material which takes canvasColor as a background). This chain of "dependencies" is not really obvious, so maybe it worth extending ThemeData with textSelectionToolbarTheme prop?

Flutter doctor output:

[✓] Flutter (Channel beta, v0.8.2, on Mac OS X 10.13.6 17G65, locale en-BY)
    • Flutter version 0.8.2 at /Users/r1zzu/flutter
    • Framework revision 5ab9e70727 (2 weeks ago), 2018-09-07 12:33:05 -0700
    • Engine revision 58a1894a1c
    • Dart version 2.1.0-dev.3.1.flutter-760a9690c2

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at /Users/r1zzu/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-27, build-tools 27.0.3
    • ANDROID_HOME = /Users/r1zzu/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)
    • All Android licenses accepted.

[!] iOS toolchain - develop for iOS devices (Xcode 9.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.1, Build version 9B55
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[!] IntelliJ IDEA Community Edition (version 2017.2.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • For information about installing plugins, see
      https://flutter.io/intellij-setup/#installing-the-plugins

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

[✓] Connected devices (1 available)
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 9 (API 28) (emulator)

Activity

  1. zoechi
    added
    c: new featureNothing broken; request for a new capability
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    on Sep 24, 2018
  2. zoechi
    added this to the milestone on Sep 24, 2018
  3. zoechi
    added
    a: text inputEntering text in a text field or keyboard related problems
    on Feb 14, 2019
  4. kf6gpe
    added
    P2Important issues not at the top of the work list
    on May 29, 2020
  5. Hixie
    removed this from the milestone on Aug 17, 2020

  6. AlexV525 commented on Aug 29, 2020

    @AlexV525
    AlexV525
    on Aug 29, 2020
    Member

    Related to #36220 , #34640 .

    @justinmc Generally speaking, we have two ideas for those issues. One is to completely refactor/fix widgets related to similar behaviors of the overlay, another is add properties into them for customization. Which one make sense to you? FYI @LongCatIsLooong

  7. justinmc commented on Sep 3, 2020

    @justinmc
    justinmc
    on Sep 3, 2020
    Contributor

    (Sorry for the late reply)

    CC @darrenaustin who I believe was just working on text selection menu theming. Did you notice this problem (theme not being applied due to Overlay) and any opinions here?

    I think in general we try to avoid accumulating lots of properties and want to keep it clean and composable, but it depends on how much of a breaking change it would be.

  8. darrenaustin commented on Sep 3, 2020

    @darrenaustin
    darrenaustin
    on Sep 3, 2020
    Contributor

    CC @darrenaustin who I believe was just working on text selection menu theming. Did you notice this problem (theme not being applied due to Overlay) and any opinions here?

    I haven't really looked at the toolbar that closely, nor am I that familiar with the overlay, but I can take a look. Perhaps it is an issue with the overlay using a different context?

    I recently added a TextSelectionTheme that we are in the process of migrating to. It covers the colors for the cursor, text selection and text selection handles. It might make sense to add text selection toolbar config to this as well instead of introducing another theme.

  9. justinmc commented on Sep 3, 2020

    @justinmc
    justinmc
    on Sep 3, 2020
    Contributor

    Thanks for the context on TextSelectionTheme. No need to dive any deeper unless you're interested, I just wanted to make sure this issue is in sync with your theme work.

    Since TextSelectionTheme colors the handles, it seems like it could be affected by any solution to this Overlay problem here.

  10. petrnymsa commented on Oct 19, 2021

    @petrnymsa
    petrnymsa
    on Oct 19, 2021

    Is this somehow already adressed? I am currently struggling with this #92092

  11. justinmc commented on Oct 25, 2021

    @justinmc
    justinmc
    on Oct 25, 2021
    Contributor

    No, there is no theming for TextSelectionToolbar in TextSelectionTheme right now. You could work around this by implementing your own text selection toolbar, but it's overly complicated for this problem (example).

  12. justinmc commented on Jul 14, 2022

    @justinmc
    justinmc
    on Jul 14, 2022
    Contributor

    I think this should be fixed with #107193.

    I didn't particularly work on a way to theme the text selection toolbar, but I am copying the theme into the overlay (code), and anyway the toolbar will be fully customizable.

  13. justinmc
    self-assigned this
    on Jul 14, 2022
  14. justinmc
    closed this as completedin #107193on Oct 28, 2022

  15. justinmc commented on Oct 28, 2022

    @justinmc
    justinmc
    on Oct 28, 2022
    Contributor

    It's now possible to use any widget as the text selection toolbar via contextMenuBuilder. Also, all built-in toolbar widgets and their button widgets have been made public. See AdaptiveTextSelectionToolbar.

    There are no new explicit Theme values that configure these toolbars, but they can be easily swapped out for other widgets. We may still want to investigate the themeability of these built-in toolbars in the future.

  16. github-actions commented on Nov 11, 2022

    @github-actions
    github-actionsbot
    on Nov 11, 2022

    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.

  17. github-actions
    locked as resolved and limited conversation to collaborators on Nov 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemsc: new featureNothing broken; request for a new capabilityframeworkflutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packages

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions