Flutter如何为Switch添加内边框阴影并自定义ON/OFF标签

针对你的两个疑问的解答 #

• flutter_switch 本身未提供内阴影的配置项，你可以在外层嵌套 Container，通过 BoxDecoration 的 boxShadow 属性配置 BlurStyle.inner 即可实现内边框阴影效果，不需要修改原有flutter_switch的逻辑。
• flutter_neumorphic 默认的开关组件没有内置文本标签插槽，不是你操作有误，你可以通过Stack组件将文本和开关层叠，自己添加ON/OFF标签即可。

完整实现代码（无额外依赖，完全匹配参考效果） #

直接自定义开关组件可控性更高，不需要依赖第三方库，完整代码如下：

import 'package:flutter/material.dart';

class CustomSwitch extends StatefulWidget {
  const CustomSwitch({super.key});

  @override
  State<CustomSwitch> createState() => _CustomSwitchState();
}

class _CustomSwitchState extends State<CustomSwitch> {
  bool _isOn = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _isOn = !_isOn),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        width: 80,
        height: 40,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: _isOn ? Colors.green.shade100 : Colors.grey.shade200,
          // 内边框阴影实现
          boxShadow: const [
            BoxShadow(
              color: Colors.black12,
              blurRadius: 4,
              spreadRadius: 1,
              blurStyle: BlurStyle.inner,
            )
          ],
        ),
        child: Stack(
          children: [
            // ON/OFF标签
            Positioned(
              left: 10,
              top: 0,
              bottom: 0,
              child: Center(
                child: Text(
                  'ON',
                  style: TextStyle(
                    color: _isOn ? Colors.green : Colors.grey.shade400,
                    fontWeight: FontWeight.bold,
                    fontSize: 12,
                  ),
                ),
              ),
            ),
            Positioned(
              right: 10,
              top: 0,
              bottom: 0,
              child: Center(
                child: Text(
                  'OFF',
                  style: TextStyle(
                    color: !_isOn ? Colors.grey.shade700 : Colors.grey.shade400,
                    fontWeight: FontWeight.bold,
                    fontSize: 12,
                  ),
                ),
              ),
            ),
            // 滑动滑块
            AnimatedAlign(
              duration: const Duration(milliseconds: 200),
              alignment: _isOn ? Alignment.centerRight : Alignment.centerLeft,
              child: Container(
                margin: const EdgeInsets.all(4),
                width: 32,
                height: 32,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.2),
                      blurRadius: 3,
                      spreadRadius: 1,
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

直接调用CustomSwitch组件即可实现你需要的效果，你可以根据自己的需求调整尺寸、颜色、阴影参数等。

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