如何在 Flutter 中使 CheckboxListTile 中的复选框形状变圆?

Jay*_*llu 1 dart flutter flutter-layout

我已经CheckboxListTile在flutter中实现了。默认复选框是方形的。但我需要一个圆形复选框,如下图所示。有什么办法可以做到吗?谢谢您的帮助 :)

圆形复选框

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      title: const Text('Animate Slowly'),
      value: timeDilation != 1.0,
      onChanged: (bool? value) {
        setState(() {
          timeDilation = value! ? 10.0 : 1.0;
        });
      },
      secondary: const Icon(Icons.hourglass_empty),
    );
  }
}


Run Code Online (Sandbox Code Playgroud)

小智 8

如果您想更改默认复选框主题,您需要像这样覆盖它

class Exmaple extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final oldCheckboxTheme = theme.checkboxTheme;

    final newCheckBoxTheme = oldCheckboxTheme.copyWith(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(100)),
    );

    return Theme(
      data: theme.copyWith(checkboxTheme: newCheckBoxTheme),
      child: CheckboxListTile(
        onChanged: (_) {},
        value: false,
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)


小智 5

您可以实现提供标签和形状属性的 CheckboxListTile 小部件。还附上输出在此输入图像描述

SizedBox(
                      width: 160,
                      height: 50,
                      child: CheckboxListTile(
                        contentPadding: EdgeInsets.all(0),
                        title: Text("Remember Me"), //    <-- label
                        value: true,
                        onChanged: (newValue) {},
                        controlAffinity: ListTileControlAffinity
                            .leading, //  <-- leading Checkbox
                        activeColor: ColorPalette.purpleColor,
                        checkboxShape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(15)),
                      ),
                    ),
Run Code Online (Sandbox Code Playgroud)