如何在颤动滤镜中更改检查图标的颜色

Question

我需要一种将支票（✔）颜色更改为白色的方法。我该如何实现

Answer 1

黑色或白色对勾标记

您可以根据浅色或深色主题将颜色更改为黑色或白色。您可以全局或wrap the specific widget within a Theme widget更改主题。

FilterChip

其他颜色

当前无法将Material包提供的void _paintCheck(Canvas canvas, Offset origin, double size) { Color paintColor; switch (theme.brightness) { case Brightness.light: paintColor = theme.showAvatar ? Colors.white : Colors.black.withAlpha(_kCheckmarkAlpha); break; case Brightness.dark: paintColor = theme.showAvatar ? Colors.black : Colors.white.withAlpha(_kCheckmarkAlpha); break; } ... 中选中标记的颜色更改为任意颜色。在the source code for the Chip classes here中可以找到勾号的绘制方式。

为将来参考，这是绘制复选标记的代码部分：

{{1}}

因此它现在只能显示为黑色或白色。如果希望将其着色，则必须使用自定义小部件。

您还可以在the already opened issue on Flutters Github project上发出提示音。

Answer 2

您只需将FilterChip包装在Theme小部件中，然后设置所需的ThemeData，而无需更改一般的应用样式。

Theme(
  data: ThemeData.dark(), // White color. Select light for black.
  child: FilterChip(
    label: Text('Test'),
    selected: _selected,
    onSelected: (val) {
      setState(() => _selected = val);
    },
    backgroundColor: Colors.blue,
    selectedColor: Colors.pink,
    labelStyle: TextStyle(
      color: Colors.white,
    ),
  ),
),

Answer 3

您可以使用checkMarkColor属性更改选中标记的颜色

FilterChip(
        label: Text('Pizza'),
        shape: StadiumBorder(side: BorderSide()),
        checkmarkColor: Colors.red,
        backgroundColor: Colors.transparent,
      ),

Answer 4

您可以通过使用头像并对其进行自定义以表示刻度线来解决此问题，例如

FilterChip(
   label: Text(
      "label text",
         style: TextStyle(color: Colors.red),
      ),
      avatar: isSelected ? Icon(Icons.check, color: contrastColor(Colors.red)) : null,
      // selected: isSelected,
   },
)

函数contrastColor仅查看提供的颜色，并根据其发光程度选择白色或黑色。

切换时的动画效果会稍微破坏它，因此，如果看起来很糟，您可能需要保留一个“空”头像而不是null。

用FilterChip类的作品包装Theme，但是至少对我来说，当在浅色和深色主题之间切换时，背景颜色显示不正确（太暗）。