如何在Flutter中创建圆形CheckBox？还是更改CheckBox的样式，例如Flutter中的选定图像？ [英] How to create a round CheckBox in Flutter ? Or change the CheckBox's style , such as selected image in Flutter?

问题描述

我想创建一个圆形的CheckBox

I want to create a round CheckBox like this

我已经尝试了多种变体，但是似乎没有一个起作用。包括我尝试使用ClipRRect。

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

      ],
    ),

我是Flutter的新手，谢谢。

I am new to Flutter.Thanks in advance.

推荐答案

您可以尝试&玩以下代码： Round CheckBox

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

这篇关于如何在Flutter中创建圆形CheckBox？还是更改CheckBox的样式，例如Flutter中的选定图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！