blocks|key|4053609|text|为什么你要把它和ClipRect复杂化呢？只需使用官方material+icon即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4053610|entityMap|0|LINK|mutability|MUTABLE|url|https://material.io/tools/icons/?search=check&icon=check_circle&style=baseline^0|8|8|R|D|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Why do you complicate it with <code>ClipRect</code> ? Just use the official <a href="https://material.io/tools/icons/?search=check&amp;icon=check_circle&amp;style=baseline" rel="nofollow noreferrer">material icon</a>.

blocks|key|4053627|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4053628|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+%7C%7C+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,
++++++++++),
++++++++),
++++++),
++++);
++}
}|code-block|syntax|javascript|4053629|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try this:

<pre><code>import 'package:flutter/material.dart';

class CircleCheckbox extends StatelessWidget {
 final bool value;
 final ValueChanged&lt;bool&gt; 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,
 ),
 ),
 ),
 );
 }
}
</code></pre>

blocks|key|4054033|text|复制Material+Checkbox的代码并创建新的Checkbox小部件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4054034|在此小部件中，将变量const+Radius+_kEdgeRadius+=+Radius.circular(1.0)更改为Radius.circular(100)。|offset|length|style|CODE|4054035|​|4054036|📷|atomic|4054037|4054038|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/e0ecba87e73716dc5ebb20cd6c60b7d0.png|imageAlt^0|0|A|1C|1P|K|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|M|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U|V|-4]]]]

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

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

<a href="https://i.stack.imgur.com/Bp7FS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Bp7FS.png" alt="enter image description here"></a>

blocks|key|4054050|text|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;
++++++++++++++});
++++++++++++},
++++++++++),
++++++++),
++++++),|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4054051|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

blocks|key|4053733|text|我们只能使用材质图标来实现这一点，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4053734|bool+checkboxValue+=+false;

Row(
++++mainAxisAlignment:+MainAxisAlignment.center,
++++children:+[
++++++++GestureDetector(
++++++++onTap:+()+{
++++++++++++setState(()+{
++++++++++++checkboxValue+=+!checkboxValue;
++++++++++++});
++++++++},
++++++++child:+checkboxValue
++++++++++++?+Icon(
++++++++++++++++Icons.radio_button_checked,
++++++++++++++++color:+Colors.blue,
++++++++++++++++size:+20,
++++++++++++++++)
++++++++++++:+Icon(
++++++++++++++++Icons.radio_button_unchecked,
++++++++++++++++color:+Colors.grey,
++++++++++++++++size:+20,
++++++++++++++++),
++++++++),
++++++++SizedBox(width:+5),
++++++++Text("Accept+Terms+and+Conditions"),
++++],
),|code-block|syntax|javascript|4053735|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

We can use only material icons to achieve this as below:
<pre><code>bool checkboxValue = false;

Row(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 GestureDetector(
 onTap: () {
 setState(() {
 checkboxValue = !checkboxValue;
 });
 },
 child: checkboxValue
 ? Icon(
 Icons.radio_button_checked,
 color: Colors.blue,
 size: 20,
 )
 : Icon(
 Icons.radio_button_unchecked,
 color: Colors.grey,
 size: 20,
 ),
 ),
 SizedBox(width: 5),
 Text(&quot;Accept Terms and Conditions&quot;),
 ],
),
</code></pre>

blocks|key|4053783|text|我花了很长时间来构建它，并想出了这个解决方案。我想像我这样的人总有一天会需要它的。所以就是这样了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4053784|InkWell(
++++onTap:+()+{
++++++++setState(()+{
++++++++++++selected+=+!selected;
++++++++});
++++},
++++child:+Container(
++++++++height:+28,
++++++++width:+28,
++++++++decoration:+BoxDecoration(
++++++++++++shape:+BoxShape.circle,+color:+selected+?+Colors.green+:+Colors.white,
++++++++++++border:+Border.all(width:+2,+color:+Colors.green)
++++++++),
++++++++child:+Padding(
++++++++++++padding:+const+EdgeInsets.all(3.0),
++++++++++++child:+selected+?+Icon(
++++++++++++++++Icons.check,
++++++++++++++++size:+18.0,
++++++++++++++++color:+Colors.white,
++++++++++++)+:+Container()
++++++++),
++++),
),|code-block|syntax|javascript|4053785|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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.
<pre><code>InkWell(
 onTap: () {
 setState(() {
 selected = !selected;
 });
 },
 child: Container(
 height: 28,
 width: 28,
 decoration: BoxDecoration(
 shape: BoxShape.circle, color: selected ? Colors.green : Colors.white,
 border: Border.all(width: 2, color: Colors.green)
 ),
 child: Padding(
 padding: const EdgeInsets.all(3.0),
 child: selected ? Icon(
 Icons.check,
 size: 18.0,
 color: Colors.white,
 ) : Container()
 ),
 ),
),
</code></pre>

blocks|key|4054148|text|您可以简单地设置复选框的形状，如下所示；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4054149|Checkbox(
++shape:+RoundedRectangleBorder(
++++borderRadius:+BorderRadius.circular(15),
++),
)|code-block|syntax|javascript|4054150|link+to+documentation|offset|length|4054151|entityMap|0|LINK|mutability|MUTABLE|url|https://api.flutter.dev/flutter/material/Checkbox-class.html^0|0|0|0|L|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You can simply set the shape of the Checkbox as below;
<pre class="lang-dart prettyprint-override"><code>Checkbox(
 shape: RoundedRectangleBorder(
 borderRadius: BorderRadius.circular(15),
 ),
)
</code></pre>
<a href="https://api.flutter.dev/flutter/material/Checkbox-class.html" rel="nofollow noreferrer">link to documentation</a>

blocks|key|4053828|text|Checkbox(
++++++checkColor:+Colors.white,
++++++fillColor:+MaterialStateProperty.resolveWith(getColor),
++++++value:+isChecked,
++++++shape:+RoundedRectangleBorder(borderRadius:+BorderRadius.circular(2)),
++++++onChanged:+(bool?+value)+{
++++++++setState(()+{
++++++++++isChecked+=+value!;
++++++++});
++++++},
++++);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4053829|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>Checkbox(
 checkColor: Colors.white,
 fillColor: MaterialStateProperty.resolveWith(getColor),
 value: isChecked,
 shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
 onChanged: (bool? value) {
 setState(() {
 isChecked = value!;
 });
 },
 );
</code></pre>

blocks|key|4054176|text|Checkbox(
++++++++++++++++++++value:+_bigBox,
//Simply+add+this+line
++++++++++++++++++++shape:+CircleBorder(),
++++++++++++++++++++splashRadius:+20,
++++++++++++++++++++onChanged:+(value)+{
++++++++++++++++++++++_bigBox+=+value;
++++++++++++++++++++++setState(()+{});
++++++++++++++++++++},
++++++++++++++),|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4054177|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>Checkbox(
 value: _bigBox,
//Simply add this line
 shape: CircleBorder(),
 splashRadius: 20,
 onChanged: (value) {
 _bigBox = value;
 setState(() {});
 },
 ),
</code></pre>

blocks|key|4054202|text|如下所示设置主题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4054203|+Theme(
++data:+ThemeData(
++++checkboxTheme:+CheckboxThemeData(
++++++shape:+RoundedRectangleBorder(
++++++++borderRadius:+BorderRadius.circular(25),
++++++),
++++),
++);++++++|code-block|syntax|javascript|4054204|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Set up the Theme like this:
<pre><code> Theme(
 data: ThemeData(
 checkboxTheme: CheckboxThemeData(
 shape: RoundedRectangleBorder(
 borderRadius: BorderRadius.circular(25),
 ),
 ),
 ); 
</code></pre>

I want to create a round CheckBox like this 

<a href="https://i.stack.imgur.com/bGgyE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bGgyE.png" alt="enter image description here"></a>

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.

<pre><code>new Row(
 children: &lt;Widget&gt;[
 //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)
 ),
 )
 ),

 ],
 ),
</code></pre>

I am new to Flutter.Thanks in advance.

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

我想创建一个圆形的CheckBox，如下所示​​我尝试过这种方法的多种变体，但似乎都不起作用。包括我试着使用ClipRRect。因为有更多的代码，所以我只选择其中的一部分在这里显示。new Row( children: <Widget>[ //new ClipRRect( // b...

问如何在Flutter中创建圆形CheckBox？或者更改复选框的样式，例如Flutter中的选定图像？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Flutter中创建圆形CheckBox？或者更改复选框的样式，例如Flutter中的选定图像？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Flutter中创建圆形CheckBox？或者更改复选框的样式，例如Flutter中的选定图像？
EN