Chip's delete button tap target is too big #129986
Description
Steps to reproduce
When implementing a Chip that uses the onDeleted method a Chip with a delete button is created.
The tap target of this delete button spans quite far to the left, even covering some part of the chip's label.
When the button is clicked a splash occurs that much more resembles what the tap target of the button should be, but even when clicking outside of this area still triggers the button.
There are related issues that actually say that the tap target of the delete button is too small (see #94098 and #42455), however I do not see this problem in my case.
I tried this on Chrome (web), macOs (desktop), and iPhone 14 Pro Max (mobile).
Expected results
The delete button should only be triggered when it is tapped within a circular area (like the one indicated by the splash effect).
Actual results
The delete button is also triggered when tapping further left, even towards the end of the chip's label, which does not seem right.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: MyWidget(),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Center(
child: Chip(
onDeleted: () {
print('test');
},
avatar: const CircleAvatar(
child: Text('AB'),
),
label: const Text(
'AaBb',
),
),
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
Chip_delete_button_tap_target.mov
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.10.5, on macOS 13.3 22E252 darwin-arm64, locale de-DE)
• Flutter version 3.10.5 on channel stable at /Users/user/sdks/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 796c8ef792 (3 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/user/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 11.0.15+0-b2043.56-8887301)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E222b
• CocoaPods version 1.12.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.1)
• 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.15+0-b2043.56-8887301)
[✓] IntelliJ IDEA Community Edition (version 2021.2.3)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin version 71.2.2
• Dart plugin version 212.5744
[✓] IntelliJ IDEA Community Edition (version 2021.1)
• IntelliJ at /Applications/IntelliJ IDEA CE_x86.app
• 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
[✓] VS Code (version 1.79.2)
• VS Code at /Users/user/Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.66.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.3 22E252 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 114.0.5735.198
[✓] Network resources
• All expected network resources are available.
• No issues found!
Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listMatching the OEM platforms betterflutter/packages/flutter/material repository.Found to occur in 3.10Found to occur in 3.12flutter/packages/flutter repository. See also f: labels.Issue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages team
Type
Projects
Status