How to create a round CheckBox in Flutter ? Or change the CheckBox's style , such as selected image in Flutter?

问题

I want to create a round CheckBox like this

I've tried multiple variations of this, but none of them seem to work. Including I tried to use ClipRRect .

Because there are more code, I only select part of it to show here.

new Row(
      children: <Widget>[
        //new ClipRRect(
        // borderRadius: BorderRadius.all(Radius.circular(90.0)),
        //  child:
          new Checkbox(
              tristate: true,
              value: true,
              onChanged: (bool newValue){
                setState(() {

                });
              },
            activeColor: Color(0xff06bbfb),
          ),
       // ),

        new Expanded(
            child: new Text('将此手机号码和QQ号绑定，提高账号安全性。',
              style: new TextStyle(
                  color: Color(0xff797979)
              ),
            )
        ),

      ],
    ),

I am new to Flutter.Thanks in advance.

回答1:

You can try & play with this Code: Round CheckBox

 bool _value = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Circle CheckBox"),
      ),
      body: Center(
          child: InkWell(
        onTap: () {
          setState(() {
            _value = !_value;
          });
        },
        child: Container(
          decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: _value
                ? Icon(
                    Icons.check,
                    size: 30.0,
                    color: Colors.white,
                  )
                : Icon(
                    Icons.check_box_outline_blank,
                    size: 30.0,
                    color: Colors.blue,
                  ),
          ),
        ),
      )),
    );
  }

回答2:

Copy the code of the Material Checkbox and create your new Checkbox widget.

In this widget change the variable const Radius _kEdgeRadius = Radius.circular(1.0) to Radius.circular(100).

回答3:

There is a simple package you can add that keeps the functionality and animation of the checkbox: https://pub.dev/packages/circular_check_box

Implementation after installing and importing package:

CircularCheckBox(
          value: someBooleanValue,
          materialTapTargetSize: MaterialTapTargetSize.padded,
          onChanged: (bool x) {
          someBooleanValue = !someBooleanValue;
          }
        ),

回答4:

I had a hard time building this and came up with this solution. I thought someone like me would need it one day. So here it is.

ClipRRect(
      clipBehavior: Clip.hardEdge,
      borderRadius: BorderRadius.all(Radius.circular(5)),
      child: SizedBox(
        width: Checkbox.width,
        height: Checkbox.width,
        child: Container(
          decoration: new BoxDecoration(
            border: Border.all(
              width: 1,
            ),
            borderRadius: new BorderRadius.circular(5),
          ),
          child: Theme(
            data: ThemeData(
              unselectedWidgetColor: Colors.transparent,
            ),
            child: Checkbox(
              value: isWinnerTakesAll,
              onChanged: (state) =>
                  setState(() => isWinnerTakesAll = !isWinnerTakesAll),
              activeColor: Colors.transparent,
              checkColor: CommonColors.checkBoxColor,
              materialTapTargetSize: MaterialTapTargetSize.padded,
            ),
          ),
        ),
      ),
    ),

I hope this solves your problem! Any questions are welcomed.

Reason for using Theme widget Without the theme widget, the checkbox had its original square box in the unselected state and I removed it with making it transparent.

回答5:

Why do you complicate it with ClipRect ? Just use the official material icon.

回答6:

try this:

import 'package:flutter/material.dart';

class CircleCheckbox extends StatelessWidget {
  final bool value;
  final ValueChanged<bool> onChanged;
  final Color activeColor;
  final Color checkColor;
  final bool tristate;
  final MaterialTapTargetSize materialTapTargetSize;

  CircleCheckbox({
    Key key,
    @required this.value,
    this.tristate = false,
    @required this.onChanged,
    this.activeColor,
    this.checkColor,
    this.materialTapTargetSize,
  })  : assert(tristate != null),
        assert(tristate || value != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: SizedBox(
        width: Checkbox.width,
        height: Checkbox.width,
        child: Container(
          decoration: new BoxDecoration(
            border: Border.all(
                width: 2,
                color: Theme.of(context).unselectedWidgetColor ??
                    Theme.of(context).disabledColor),
            borderRadius: new BorderRadius.circular(100),
          ),
          child: Checkbox(
            value: value,
            tristate: tristate,
            onChanged: onChanged,
            activeColor: activeColor,
            checkColor: checkColor,
            materialTapTargetSize: materialTapTargetSize,
          ),
        ),
      ),
    );
  }
}

回答7:

Container(
        decoration: BoxDecoration(
            border: Border.all(
              color: (checkedValue) ? Colors.red : Colors.blue,
              width: 1,
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(5),
            )),
        width: 24,
        height: 24,
        child: Theme(
          data: ThemeData(
            unselectedWidgetColor: Colors.transparent,
          ),
          child: Checkbox(
            activeColor: Colors.transparent,
            checkColor: Colors.red,
            value: checkedValue,
            tristate: false,
            onChanged: (bool isChecked) {
              setState(() {
                checkedValue = isChecked;
              });
            },
          ),
        ),
      ),

来源：https://stackoverflow.com/questions/52326268/how-to-create-a-round-checkbox-in-flutter-or-change-the-checkboxs-style-suc