Material 3 InputChip组件如何去除边框？

问题描述 #

我想要创建一个InputChip Widget，使其呈现Figma中红圈标注的M3官方样式。使用默认代码会得到带边框的Chip：

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

添加backgroundColor可修改背景色，但边框仍存在：

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

尝试设置selected: true会去掉边框，但会出现不需要的勾选标记：

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

解决方法 #

直接通过border参数设置为InputBorder.none即可去除边框，无需启用selected属性。完整示例代码：

@override
Widget build(BuildContext context) {
  return InputChip(
    label: const Text('tag'),
    backgroundColor: Colors.blue[100], // 按需设置背景色
    border: InputBorder.none, // 核心：移除边框
    onDeleted: () {},
  );
}

进阶：匹配M3设计细节 #

如果要完全对齐Figma中的M3样式，可额外调整文字、图标样式：

@override
Widget build(BuildContext context) {
  return InputChip(
    label: const Text('tag'),
    backgroundColor: Colors.blue[100],
    border: InputBorder.none,
    labelStyle: TextStyle(
      color: Colors.blue[800],
      fontSize: 14,
      fontWeight: FontWeight.w500,
    ),
    deleteIcon: const Icon(
      Icons.close,
      size: 18,
      color: Colors.blue[800],
    ),
    onDeleted: () {},
  );
}

这样就能得到无边框、样式贴合M3设计且无多余勾选标记的InputChip。

内容的提问来源于stack exchange，提问作者Yukinosuke Takada