Flutter如何修改Material 3中Switch关闭状态的边框颜色

在Material 3里，Switch关闭状态的边框由outlineColor属性控制，开启状态下边框默认与背景色一致（可设为透明保持视觉统一）。下面提供两种修改方式：

1. 单独给目标Switch设置样式 #

直接在Switch组件的theme参数中自定义SwitchThemeData，通过MaterialStateProperty.resolveWith根据组件状态返回对应颜色：

Switch(
  trackColor: MaterialStatePropertyAll(miniVerbose ? Colors.greenAccent : Colors.orange),
  value: miniVerbose,
  onChanged: (value) {
    setState(() {
      miniVerbose = value;
    });
  },
  // 自定义关闭状态边框颜色
  theme: SwitchThemeData(
    outlineColor: MaterialStateProperty.resolveWith((states) {
      // 选中（开启）状态下边框透明，和背景色一致
      if (states.contains(MaterialState.selected)) {
        return Colors.transparent;
      }
      // 未选中（关闭）状态的边框颜色，替换成你需要的颜色
      return Colors.red;
    }),
  ),
)

2. 全局统一设置（整个App的Switch生效） #

如果需要所有Switch都使用相同的边框样式，可在MaterialApp的theme中配置switchTheme：

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    switchTheme: SwitchThemeData(
      outlineColor: MaterialStateProperty.resolveWith((states) {
        return states.contains(MaterialState.selected) 
            ? Colors.transparent 
            : Colors.blue; // 全局关闭状态边框颜色
      }),
    ),
  ),
  home: YourHomePage(),
)

注意：outlineColor需要通过MaterialStateProperty适配不同状态，确保开启状态下边框透明，和trackColor保持视觉统一。

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