Skip to content

[Chip] Delete icon ripple not visible for Chip when background color is set #41461

Closed
Closed
[Chip] Delete icon ripple not visible for Chip when background color is set#41461
Labels
P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms betterc: contributor-productivityTeam-specific productivity, code health, technical debt.found 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/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Description

@perclasson
perclasson
opened on Sep 27, 2019

This issue is a bug report.

Chip with backgroundColor set, and delete icon, will not display the ink response in the foreground.

Steps to Reproduce

Chip(
        backgroundColor: Colors.pink,
        label: Text('Test'),
        onDeleted: () {},
)
  1. Go to flutter_gallery under Chips and delete a chip with a background color set
  2. The icon ripple is then not visible
  3. If you do the same for a chip that does not have a background color, it shows it correctly
The ink response is behind the chip (with background color set): On a chip without background color the ink response is visible:
before the ink response was behind the chip how it looks on gray chip

Logs

$ flutter doctor -v
Downloading android-arm-profile/darwin-x64 tools...                 0.9s
Downloading android-arm-release/darwin-x64 tools...                 0.7s
Downloading android-arm64-profile/darwin-x64 tools...               0.8s
Downloading android-arm64-release/darwin-x64 tools...               0.7s
[✓] Flutter (Channel master, v1.10.1-pre.309, on Mac OS X 10.14.6 18G95, locale en-DE)
    • Flutter version 1.10.1-pre.309 at /Users/perc/development/flutter
    • Framework revision 1696975ef3 (24 minutes ago), 2019-09-27 11:39:41 +0200
    • Engine revision 18bc0b2596
    • Dart version 2.6.0 (build 2.6.0-dev.0.0 403c4af720)


[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/perc/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-stable, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 10.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.3, Build version 10G8
    • CocoaPods version 1.7.5

[✓] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio with Blaze.app/Contents
    • Flutter plugin version 39.0.3
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 39.0.3
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] Connected device (1 available)
    • iPhone Xʀ • FAA0F7B9-5367-4003-90C4-866BC84154F8 • ios • com.apple.CoreSimulator.SimRuntime.iOS-12-4 (simulator)

• No issues found!

Activity

  1. perclasson
    self-assigned this
    on Sep 27, 2019
  2. escamoteur
    added
    a: fidelityMatching the OEM platforms better
    p: material_uimaterial_ui package in flutter/packages
    frameworkflutter/packages/flutter repository. See also f: labels.
    c: contributor-productivityTeam-specific productivity, code health, technical debt.
    on Sep 27, 2019

  3. perclasson commented on Oct 7, 2019

    @perclasson
    perclasson
    on Oct 7, 2019
    ContributorAuthor

    This is the same issue as #36133.

  4. perclasson commented on Oct 25, 2019

    @perclasson
    perclasson
    on Oct 25, 2019
    ContributorAuthor

    This issue can be fixed with #41463, but we do no longer have any ripples on chips with only onDeleted set (see issue), thus the tests in the pull requests fails on master.

    After the issue 43534 is fixed, and we have ripples with only onDelete again, the already existing pull request can be re-merged to master.

  5. perclasson
    removed their assignment
    on Jan 13, 2020

  6. TahaTesser commented on Apr 2, 2020

    @TahaTesser
    TahaTesser
    on Apr 2, 2020
    Contributor
    Code Sample 
    // Flutter code sample for DeletableChipAttributes.onDeleted

// This sample shows how to use [onDeleted] to remove an entry when the
// delete button is tapped.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class Actor {
  const Actor(this.name, this.initials);
  final String name;
  final String initials;
}

class CastList extends StatefulWidget {
  @override
  State createState() => CastListState();
}

class CastListState extends State<CastList> {
  final List<Actor> _cast = <Actor>[
    const Actor('Aaron Burr', 'AB'),
    const Actor('Alexander Hamilton', 'AH'),
    const Actor('Eliza Hamilton', 'EH'),
    const Actor('James Madison', 'JM'),
  ];

  Iterable<Widget> get actorWidgets sync* {
    for (Actor actor in _cast) {
      yield Padding(
        padding: const EdgeInsets.all(4.0),
        child: Chip(
          avatar: CircleAvatar(child: Text(actor.initials)),
          label: Text(actor.name),
          backgroundColor: Colors.white,
          onDeleted: () {
            setState(() {
              _cast.removeWhere((Actor entry) {
                return entry.name == actor.name;
              });
            });
          },
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: actorWidgets.toList(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return CastList();
  }
}
    flutter doctor -v 
    [✓] Flutter (Channel dev, 1.21.0-1.0.pre, on Mac OS X 10.15.6 19G73, locale
    en-GB)
    • Flutter version 1.21.0-1.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision f25bd9c55c (2 weeks ago), 2020-07-14 20:26:01 -0400
    • Engine revision 99c2b3a245
    • Dart version 2.9.0 (build 2.9.0-21.0.dev 20bf2fcf56)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.1
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

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

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (4 available)
    • SM M305F (mobile) • 32003c30dc19668f • android-arm64  • Android 10 (API
      29)
    • macOS (desktop)   • macos            • darwin-x64     • Mac OS X 10.15.6
      19G73
    • Web Server (web)  • web-server       • web-javascript • Flutter Tools
    • Chrome (web)      • chrome           • web-javascript • Google Chrome
      84.0.4147.105

• No issues found!
  7. TahaTesser
    added
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    on Apr 2, 2020
  8. TahaTesser
    added
    found in release: 1.21Found to occur in 1.21
    passed first triage
    on Jul 30, 2020

  9. danagbemava-nc commented on Jun 30, 2022

    @danagbemava-nc
    danagbemava-nc
    on Jun 30, 2022
    Member

    Reproducible on the latest versions of flutter.

    video
    Screen.Recording.2022-06-30.at.11.18.01.mov
    code sample 
    // Flutter code sample for DeletableChipAttributes.onDeleted

// This sample shows how to use [onDeleted] to remove an entry when the
// delete button is tapped.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class Actor {
  const Actor(this.name, this.initials);
  final String name;
  final String initials;
}

class CastList extends StatefulWidget {
  const CastList({super.key});

  @override
  State createState() => CastListState();
}

class CastListState extends State<CastList> {
  final List<Actor> _cast = <Actor>[
    const Actor('Aaron Burr', 'AB'),
    const Actor('Alexander Hamilton', 'AH'),
    const Actor('Eliza Hamilton', 'EH'),
    const Actor('James Madison', 'JM'),
  ];

  Iterable<Widget> get actorWidgets sync* {
    for (Actor actor in _cast) {
      yield Padding(
        padding: const EdgeInsets.all(4.0),
        child: Chip(
          avatar: CircleAvatar(child: Text(actor.initials)),
          label: Text(actor.name),
          backgroundColor: Colors.white,
          onDeleted: () {
            setState(() {
              _cast.removeWhere((Actor entry) {
                return entry.name == actor.name;
              });
            });
          },
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: actorWidgets.toList(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return CastList();
  }
}
    flutter doctor -v 
    [✓] Flutter (Channel stable, 3.0.3, on macOS 12.4 21F79 darwin-arm, locale en-GB)
    • Flutter version 3.0.3 at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 676cefaaff (5 days ago), 2022-06-22 11:34:49 -0700
    • Engine revision ffe7b86a1e
    • Dart version 2.17.5
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • 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.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] 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)

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

[✓] Connected device (3 available)
    • M2007J20CG (mobile) • 5dd3be00 • android-arm64  • Android 11 (API 30)
    • macOS (desktop)     • macos    • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)        • chrome   • web-javascript • Google Chrome 102.0.5005.115

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

• No issues found!

    [✓] Flutter (Channel master, 3.1.0-0.0.pre.1442, on macOS 12.4 21F79 darwin-arm, locale en-GB)
    • Flutter version 3.1.0-0.0.pre.1442 on channel master at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision caadc255b7 (8 hours ago), 2022-06-30 10:50:05 +0800
    • Engine revision 870bc6062c
    • Dart version 2.18.0 (build 2.18.0-238.0.dev)
    • DevTools version 2.14.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • 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.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13E500a
    • CocoaPods version 1.11.3

[✓] 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)

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

[✓] Connected device (2 available)
    • 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!
  10. danagbemava-nc
    added
    found in release: 3.0Found to occur in 3.0
    and removed
    found in release: 1.21Found to occur in 1.21
    on Jun 30, 2022

  11. 2 remaining items

  12. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-designOwned by Design Languages team
    triaged-designTriaged by Design Languages team
    on Jul 8, 2023
  13. Hixie
    removed
    passed first triage
    on Jul 8, 2023
  14. Hixie
    removed
    multiteam-retriage-candidate
    on Mar 6, 2024
  15. Piinks
    added this to Nevercodeon Dec 11, 2024
  16. github-project-automation
    moved this to To do in Nevercodeon Dec 11, 2024
  17. Piinks
    added
    P2Important issues not at the top of the work list
    on Dec 11, 2024

  18. TahaTesser commented on Jan 7, 2025

    @TahaTesser
    TahaTesser
    on Jan 7, 2025
    Contributor

    This is now working as expected.
    Screenshot 2025-01-07 at 18 03 04

    It was probably fixed by Ink widget in the internally. Added in my PR #124673

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

    Lines 1415 to 1422 in b552906

    return Ink(
    decoration: ShapeDecoration(
    shape: resolvedShape,
    color: _getBackgroundColor(theme, chipTheme, chipDefaults),
    ),
    child: child,
    );
    },

  19. TahaTesser
    closed this as completedon Jan 7, 2025
  20. github-project-automation
    moved this from To do to Done (PR merged) in Nevercodeon Jan 7, 2025
  21. TahaTesser
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Jan 7, 2025
  22. TahaTesser
    moved this from Done (PR merged) to Issue closed with comment in Nevercodeon Jan 7, 2025

  23. github-actions commented on Jan 21, 2025

    @github-actions
    github-actionsbot
    on Jan 21, 2025 – 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 Jan 21, 2025
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: fidelityMatching the OEM platforms betterc: contributor-productivityTeam-specific productivity, code health, technical debt.found 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/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    • Nevercode
      Status
      Issue closed with comment

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions