Chip delete button tap target is always 1/3 the width of the whole chip. #43291
Description
Description
- On a chip with a delete button, the chip considers any tap on the rightmost 1/3 of the chip as a tap on the delete button. (On an RTL chip, it is the leftmost 1/3.)
- This tap target could be too large (if the chip is long) or too small (if the chip is short).
- To implement it correctly, the tap target for the delete button should depend solely on the location and size of the delete button, not the size of the entire chip. For example, we can let the tap target be a 48×48 square centered on the delete button.
Possible related issues
This issue may be related to the following issue:
- Chip delete button tap target is too small. Chip delete button tap target is too small. #42455
Steps to reproduce
- Create a new flutter app.
- Copy the code below and save it as
main.dartfor the app. - Run the app.
- You will see a chip with a long text label and a delete button.
- You will also see a text message below the chip.
- When you click on different parts of the chip, the text message on the screen will show you which part of the chip (label vs. delete button) is clicked.
- If you click on the word "chip" in the label (which is very near the delete button), the message will say "Delete button pressed" instead of "Label pressed".
Code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _messageCount = 0;
String _onScreenMessage = 'Press the chip in different positions.';
String get currentReport => '[$_messageCount] $_onScreenMessage';
void _report(String report) {
setState(() {
_messageCount ++;
_onScreenMessage = report;
});
print(currentReport);
}
@override
Widget build(BuildContext context) {
return Material(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RawChip(
label: Text("A supercalifragilisticexpialidocious chip."),
onPressed: () {_report('Label pressed.');},
onDeleted: () {_report('Delete button pressed.');},
deleteIcon: Icon(Icons.close),
),
Text(
currentReport,
style: Theme.of(context).textTheme.subtitle,
),
],
),
),
);
}
}