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

Question

我已经在颤抖中实现了

CheckboxListTile

。默认复选框是方形的。但我需要一个圆形复选框，如下图所示。有什么办法可以做到吗？感谢您的帮助:)

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

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

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

您可以实施 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)),
                      ),
                    ),

Answer 3

您也可以直接在小部件中实现它，以防您需要先实现主题。

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

Answer 4

此外，通过@Hosam Hasan 的回答，你可以这样做..

                  Container(
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.teal)),
                child: CheckboxListTile(
                  checkboxShape:  RoundedRectangleBorder(borderRadius: BorderRadius.circular(100)),
                  title: const Text('Woolha.com'),
                  subtitle: const Text('A programming blog'),
                  value: _isChecked,
                  activeColor: ProjectColors.green2,
                  checkColor: ProjectColors.white,
                  onChanged: (value) {
                    setState(() {
                      _isChecked = value!;
                    });
                  },
                ),
              ),

Answer 5

不要使用

RoundedRectangleBorder

上的大半径，而是使用

CircleBorder

。每次都会有效。另一方面，如果矩形足够大，它将停止工作。

CheckboxListTile(
    shape: const CircleBorder(),
),