You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何自定义Flutter Material 3 Switch?解决白色边框修改难题

Flutter Material 3 Switch 白色边框无法自定义为红色的问题

已将Flutter Material 3 Switch的大部分样式自定义为红色,但仍存在白色边框,找不到对应参数将其修改为红色。查阅Switch类官方文档后发现,文档中两个示例基于Material 2,唯一的Material 3示例未涉及边框修改。

当前Switch组件配置代码如下:

Switch(
  // focusColor: Colors.blue,
  trackColor: MaterialStateProperty.resolveWith(
    (Set<MaterialState> states) {
      if (states.contains(MaterialState.selected)) {
        return Colors.red;
      }
      return Colors.red.withOpacity(.1);
    },
  ),
  overlayColor: MaterialStateProperty.resolveWith(
    (Set<MaterialState> states) {
      if (states.contains(MaterialState.disabled)) {
        return Colors.red;
      }
      return Colors.white.withOpacity(.1);
    },
  ),
  // hoverColor: Colors.green,
  thumbColor: MaterialStateProperty.resolveWith(
    (Set<MaterialState> states) {
      if (states.contains(MaterialState.selected)) {
        return HSLColor.fromColor(Colors.red)
            .withLightness(0.2)
            .toColor();
      }
      return Colors.red;
    },
  ),
  splashRadius: 24,
  // inactiveTrackColor: Colors.pink,
  // activeTrackColor: Colors.green,
  thumbIcon: MaterialStateProperty.resolveWith(
    (Set<MaterialState> states) {
      if (states.contains(MaterialState.selected)) {
        return const Icon(Icons.check, color: Colors.red);
      }
      return null;
    },
  ),
  // activeColor: Colors.lime,
  // inactiveThumbColor: Colors.orange,
  value: _value,
  onChanged: (bool value) => setState(() => _value = !_value),
)

已尝试过代码中注释掉的参数,但均无效。


内容的提问来源于stack exchange,提问作者Alex

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.30 15:39:21