如何在 Flutter 的 CheckboxListTile 中使 Checkbox 形状圆润？

Question

I have implemented CheckboxListTile in a flutter. The default checkbox is square. But I need a circular Checkbox, just like the one in the below image. Is there any way to do it? Thanks for the help:)

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),
    );
  }
}

Answer 1

If you want to change the default checkbox theme you need to override it like this

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,
      ),
    );
  }
}

Answer 2

You can also implement it directly in the widget, in case you need to implement a theme first.

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: ThemeData(
                        checkboxTheme: CheckboxThemeData(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(25),
                          ),
                        ),
                        unselectedWidgetColor: const Color(0xFF95A1AC),
                      ),
                      child: CheckboxListTile(
                         shape: CircleBorder(),
                    
                        value: checkboxListTileValue ??= false,
                        onChanged: (newValue) =>
                            checkboxListTileValue = newValue!,
                        title: Text(
                          "test of text",
                          style: const TextStyle(

                              // fontSize: 22.0,
                              // fontWeight: FontWeight.bold
                              ),
                        ),
                       
                      ),
                    ),
  }
}