在Dart中不使用官方CheckBox类绘制复选框的可行实现方案有哪些？

完全可以通过自定义绘制实现不依赖Material库的Checkbox组件，你现有的思路可行，以下是更精简的全绘制实现方案，无需Stack叠加多个组件，所有逻辑都在CustomPaint中完成：

核心实现思路 #

• 完全基于CustomPainter子类完成背景框、选中填充、勾选标记全量绘制，减少Widget树层级
• 用GestureDetector包裹CustomPaint组件处理点击事件，仅维护单个isChecked状态变量控制绘制逻辑
• 可灵活扩展支持动画过渡、自定义圆角、多状态样式等能力，自定义成本远低于官方组件

核心绘制代码示例 #

class CustomCheckboxPainter extends CustomPainter {
  final bool isChecked;
  final Color borderColor;
  final Color fillColor;
  final Color tickColor;
  final double borderRadius;
  final double strokeWidth;

  CustomCheckboxPainter({
    required this.isChecked,
    required this.borderColor,
    required this.fillColor,
    required this.tickColor,
    this.borderRadius = 4,
    this.strokeWidth = 1.5,
  });

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制外框和填充背景
    final paint = Paint()
      ..style = isChecked ? PaintingStyle.fill : PaintingStyle.stroke
      ..color = isChecked ? fillColor : borderColor
      ..strokeWidth = strokeWidth;
    final boxRect = Rect.fromLTWH(0, 0, size.width, size.height);
    final box = RRect.fromRectAndRadius(boxRect, Radius.circular(borderRadius));
    canvas.drawRRect(box, paint);

    // 选中态绘制对勾
    if (isChecked) {
      final tickPaint = Paint()
        ..style = PaintingStyle.stroke
        ..color = tickColor
        ..strokeWidth = 2
        ..strokeCap = StrokeCap.round;
      final tickPath = Path();
      tickPath.moveTo(size.width * 0.2, size.height * 0.5);
      tickPath.lineTo(size.width * 0.45, size.height * 0.7);
      tickPath.lineTo(size.width * 0.8, size.height * 0.3);
      canvas.drawPath(tickPath, tickPaint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomCheckboxPainter oldDelegate) {
    return oldDelegate.isChecked != isChecked ||
        oldDelegate.borderColor != borderColor ||
        oldDelegate.fillColor != fillColor;
  }
}

可直接调用的组件封装 #

class CustomCheckbox extends StatefulWidget {
  final bool initialValue;
  final ValueChanged<bool> onChanged;
  final Color? borderColor;
  final Color? checkedFillColor;
  final Color? tickColor;
  final double size;

  const CustomCheckbox({
    super.key,
    required this.initialValue,
    required this.onChanged,
    this.borderColor,
    this.checkedFillColor,
    this.tickColor,
    this.size = 24,
  });

  @override
  State<CustomCheckbox> createState() => _CustomCheckboxState();
}

class _CustomCheckboxState extends State<CustomCheckbox> {
  late bool _isChecked;

  @override
  void initState() {
    super.initState();
    _isChecked = widget.initialValue;
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        setState(() {
          _isChecked = !_isChecked;
          widget.onChanged(_isChecked);
        });
      },
      child: CustomPaint(
        size: Size(widget.size, widget.size),
        painter: CustomCheckboxPainter(
          isChecked: _isChecked,
          borderColor: widget.borderColor ?? theme.dividerColor,
          fillColor: widget.checkedFillColor ?? theme.primaryColor,
          tickColor: widget.tickColor ?? Colors.white,
        ),
      ),
    );
  }
}

方案优势 #

• 无Material库强制依赖，仅依赖基础的绘制和手势类，可在任意Flutter项目中使用
• 无需嵌套Stack、Icon等组件，Widget结构更精简，渲染性能更高
• 所有样式可自由扩展，比如新增半选态、禁用态、切换动画、不同形状等，只需要修改绘制逻辑即可
• 调用方式和官方组件兼容，可直接替换原有官方Checkbox使用

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