[英]flutter circle checkbox with text inside
You can make a button that on pressed toggles a bool and based on if bool is true or false you can make the border be transparent or not.您可以制作一个按下按钮来切换布尔值,并根据布尔值是真还是假,您可以使边框透明或不透明。 This may not be the best solution but it should work这可能不是最好的解决方案,但它应该可以工作
class CustomCheckbox extends StatefulWidget {
@override
State<CustomCheckbox> createState() => _CustomCheckboxState();
}
class _CustomCheckboxState extends State<CustomCheckbox> {
bool checked = false;
@override
Widget build(BuildContext context) {
return RawMaterialButton(
onPressed: () {
setState(() {
checked = !checked;
});
},
splashColor: Colors.transparent,
child: Text('AS', style: TextStyle(color: checked ? Colors.white : Colors.grey, fontSize: 20)),
padding: EdgeInsets.all(13.0),
shape: CircleBorder(side: BorderSide(color: checked ? Colors.yellowAccent : Colors.transparent)),
);
}
}
try using ClipOval in a row children尝试连续使用 ClipOval 孩子
ClipOval(
child:
Container(
color: yourColor
height: 10.0,
width: 10.0,
))
class Checkbox extends StatefulWidget {
final String value;
final bool check;
const Checkbox({
Key? key, required this.value, required this.check,
}) : super(key: key);
@override
State<Checkbox> createState() => _CheckboxState();
}
class _CheckboxState extends State<Checkbox> {
late bool check;
@override
void initState() {
check = widget.check;
super.initState();
}
@override
Widget build(BuildContext context) {
return InkWell(
onTap: (){
setState(()=>check = !check);
},
child: Container(
padding: EdgeInsets.all(6),
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: check ? Colors.yellow : Colors.transparent,
width: 2),
),
child: Text(widget.value, style: TextStyle(color: check ? Colors.white
: Colors.grey)),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.