Material 3 Chip, Can't remove outline on InputChip Widget

Question

I wanted to create an InputChip Widget that looked the this (The red circle). M3 Official Figma

With This code, I can get the chip circled in blue:

@override
Widget build(BuildContext context) {
  return InputChip(
    label: const Text('tag'),
    onDeleted: () {},
  );
}

By adding some parameters I can change the color:

@override
Widget build(BuildContext context) {
  return InputChip(
    label: const Text('tag'),
    backgroundColor: Colors.blue[100],
    onDeleted: () {},
  );
}

But I can't remove the outline.

I have tried changing the selected parameter to true but this creates a check mark I don't want:

@override
Widget build(BuildContext context) {
  return InputChip(
    label: const Text('tag'),
    selected: true,
    onDeleted: () {},
  );
}

How can I achieve this?

Answer 1

If you see the implementation of InputChip, the border style is controlled by the value of isSelected:

@override
BorderSide? get side => !isSelected
  ? isEnabled
    ? BorderSide(color: _colors.outline)
    : BorderSide(color: _colors.onSurface.withOpacity(0.12))
  : const BorderSide(color: Colors.transparent);

From the source code it seems like there are no other way to achieve the exact combination of border style and background color like that, so you just have to enable selected and disable showCheckmark like this:

InputChip(
  // ...
  selected: true,
  showCheckmark: false,
)

---

Note: It is also possible to set side to BorderSide(color: Colors.transparent), but then we have to set the background color manually too. The background color used when the chip is selected is taken from a private method in RawChip called _getBackgroundColor, which make this a more complicated solution.