Skip to content

ExpansionTile.backgroundColor & ExpansionTile.collapsedBackgroundColor removes splash effect #107113

Closed
#141777
Closed
ExpansionTile.backgroundColor & ExpansionTile.collapsedBackgroundColor removes splash effect#107113
#141777
Assignees
TahaTesser
Labels
P2Important issues not at the top of the work listc: proposalA detailed proposal for a change to Flutterfound in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Description

@TzviPM
TzviPM
opened on Jul 5, 2022

Steps to Reproduce

  1. Open this demo on DartPad: https://dartpad.dev/bb018c7bfe104bbfe78185a7fc6641e4
  2. Run the sample
  3. Expand the first ExpansionTile widget
  4. Attempt to hover over the widget

Expected results: The opacity should be changed on hover to reflect the tap affordance of the widget (i.e. it's a button)

Actual results: Overriding the backgroundColor of the ExpansionTile also overrode the hover opacity.

Code sample

See https://dartpad.dev/bb018c7bfe104bbfe78185a7fc6641e4

Screen Recording:

flutter-expension-tile-bug.webm

Activity

  1. TzviPM commented on Jul 5, 2022

    @TzviPM
    TzviPM
    on Jul 5, 2022
    ContributorAuthor

    Some more details:

    ExpansionTile uses a BoxDecoration on a Container that wraps an underlying ListTile. The BoxDecoration provides a backgroundBlendMode property that defaults to BlendMode.srcOver, and the ExpansionTile does not provide a mechanism to override this.

    Suggested next steps

    1. In a minor release: add an optional backgroundBlendMode property to ExpansionTile that forwards to the underlying BoxDecoration.
    2. Consider adding better documentation around this use case. For example, a note on the backgroundColor property suggesting that the default blend mode is srcOver and that srcATop might be more expected (figure out what actually would be the right value here).
    3. In a major release, consider changing the default value to something more intuitive.
  2. TzviPM
    self-assigned this
    on Jul 5, 2022
  3. maheshj01
    added
    in triagePresently being triaged by the triage team
    on Jul 6, 2022

  4. maheshj01 commented on Jul 6, 2022

    @maheshj01
    maheshj01
    on Jul 6, 2022
    Member

    Hi @TzviPM, Thanks for filing the issue. The issue is reproducible on the latest stable and master channel. hover Ink is not visible when backgroundColor is specified.

    Screen.Recording.2022-07-06.at.12.52.05.PM.mov
    flutter doctor -v (mac) 
    [✓] Flutter (Channel stable, 3.0.4, on macOS 12.4 21F79 darwin-arm, locale en-IN)
    • Flutter version 3.0.4 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 85684f9300 (4 days ago), 2022-06-30 13:22:47 -0700
    • Engine revision 6ba2af10bb
    • Dart version 2.17.5
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2021.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.12+0-b1504.28-7817840)

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

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

[✓] Connected device (3 available)
    • sdk gphone arm64 (mobile) • emulator-5554 • android-arm64  • Android 11 (API 30) (emulator)
    • macOS (desktop)           • macos         • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)              • chrome        • web-javascript • Google Chrome 103.0.5060.53

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

• No issues found!

    [✓] Flutter (Channel master, 3.1.0-0.0.pre.1494, on macOS 12.4 21F79 darwin-arm, locale en-IN)
    • Flutter version 3.1.0-0.0.pre.1494 on channel master at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 829bddf616 (3 hours ago), 2022-07-04 03:49:08 -0400
    • Engine revision e78ed7f1c9
    • Dart version 2.18.0 (build 2.18.0-251.0.dev)
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2021.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.12+0-b1504.28-7817840)

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

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

[✓] Connected device (3 available)
    • sdk gphone arm64 (mobile) • emulator-5554 • android-arm64  • Android 11 (API 30) (emulator)
    • macOS (desktop)           • macos         • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)              • chrome        • web-javascript • Google Chrome 103.0.5060.53

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

• No issues found!
  5. maheshj01
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    found in release: 3.0Found to occur in 3.0
    found in release: 3.1Found to occur in 3.1
    and removed
    in triagePresently being triaged by the triage team
    on Jul 6, 2022
  6. HansMuller
    added
    c: proposalA detailed proposal for a change to Flutter
    on Jul 7, 2022

  7. HansMuller commented on Jul 7, 2022

    @HansMuller
    HansMuller
    on Jul 7, 2022
    Contributor

    Although this is a bit of a special case, the proposal sounds reasonable.

  8. TzviPM commented on Jul 28, 2022

    @TzviPM
    TzviPM
    on Jul 28, 2022
    ContributorAuthor

    I have updated the dartpad example to use MaterialStateColor in order to show that it also doesn't work as expected. After discussing with @Piinks, it seems that the right path forward is to make backgroundColor support MaterialStateColor

  9. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-designOwned by Design Languages team
    on Jul 8, 2023

  10. 2 remaining items

  11. flutter-triage-bot commented on Jul 8, 2023

    @flutter-triage-bot
    flutter-triage-botbot
    on Jul 8, 2023

    This issue is assigned but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

  12. TzviPM
    removed their assignment
    on Jul 8, 2023
  13. HansMuller
    added
    P2Important issues not at the top of the work list
    triaged-designTriaged by Design Languages team
    on Jul 26, 2023
  14. TahaTesser
    changed the title [-][flutter/material] ExpansionTile backgroundColor overrides hover opacity[/-] [+]`ExpansionTile. backgroundColor` & `ExpansionTile. collapsedBackgroundColor` removes splash effect[/+] on Oct 2, 2023
  15. TahaTesser
    changed the title [-]`ExpansionTile. backgroundColor` & `ExpansionTile. collapsedBackgroundColor` removes splash effect[/-] [+]`ExpansionTile.backgroundColor` & `ExpansionTile.collapsedBackgroundColor` removes splash effect[/+] on Oct 2, 2023
  16. TahaTesser
    self-assigned this
    on Oct 2, 2023
  17. TahaTesser
    added this to Nevercodeon Oct 2, 2023
  18. github-project-automation
    moved this to To do in Nevercodeon Oct 2, 2023
  19. TahaTesser
    moved this from To do to PR submitted in Nevercodeon Oct 3, 2023
  20. auto-submit
    closed this as completedin #141777on Jan 22, 2024
  21. auto-submit
    added a commit that references this issue on Jan 22, 2024

    Fix `shape` and `collapsedShape` isn't applied to `ExpansionTile`'s s…

    9574d58
  22. github-project-automation
    moved this from PR submitted to Done (PR merged) in Nevercodeon Jan 22, 2024

  23. github-actions commented on Feb 5, 2024

    @github-actions
    github-actionsbot
    on Feb 5, 2024 – with GitHub Actions

    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.

  24. github-actions
    locked as resolved and limited conversation to collaborators on Feb 5, 2024
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 listc: proposalA detailed proposal for a change to Flutterfound in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

  • Nevercode
    Status
    Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions