Flutter中如何将LabeledCheckbox/CheckboxListTile复选框移至文本左侧？

情况1：使用Flutter原生CheckboxListTile组件 #

直接通过controlAffinity参数控制复选框位置，设置为ListTileControlAffinity.leading即可将复选框置于文本左侧：

@override
Widget build(BuildContext context) {
  return CheckboxListTile(
    title: const Text('Text of my Checkbox'),
    padding: const EdgeInsets.symmetric(horizontal: 20.0),
    value: _isSelected,
    onChanged: (bool? newValue) {
      setState(() {
        _isSelected = newValue ?? false;
      });
    },
    // 核心配置：将复选框放在文本左侧
    controlAffinity: ListTileControlAffinity.leading,
  );
}

情况2：使用自定义LabeledCheckbox组件 #

如果你的LabeledCheckbox是自定义组件，需要修改其内部布局，调整Checkbox与文本的顺序：

修改后的自定义LabeledCheckbox示例： #

class LabeledCheckbox extends StatelessWidget {
  final String label;
  final EdgeInsets padding;
  final bool value;
  final ValueChanged<bool> onChanged;

  const LabeledCheckbox({
    required this.label,
    required this.padding,
    required this.value,
    required this.onChanged,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => onChanged(!value),
      child: Padding(
        padding: padding,
        // 调整Row子组件顺序：先放Checkbox，再放文本
        child: Row(
          children: [
            Checkbox(value: value, onChanged: onChanged),
            const SizedBox(width: 8), // 可选：添加复选框与文本的间距
            Text(label),
          ],
        ),
      ),
    );
  }
}

调用代码保持不变： #

@override
Widget build(BuildContext context) {
  return LabeledCheckbox(
    label: 'Text of my Checkbox',
    padding: const EdgeInsets.symmetric(horizontal: 20.0),
    value: _isSelected,
    onChanged: (bool newValue) {
      setState(() {
        _isSelected = newValue;
      });
    },
  );
}

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