[英]How do I make my radio button fully filled with color in active color without white borders in Flutter?
I want to fully fill my radio button with a single color.我想用一种颜色完全填充我的单选按钮。 Like this
像这样
Currently Radio button give this layout by default.目前单选按钮默认提供此布局。
So how can I change this?那么我该如何改变呢?
My Code我的代码
Radio(
value: 3,
groupValue: radioValue,
onChanged: onChanged,
fillColor: MaterialStateColor.resolveWith(
(states) => Colors.lightBlueAccent),
),
Please Help请帮忙
You can create your own radio widget to achieve this:您可以创建自己的收音机小部件来实现此目的:
class FilledRadio<T> extends StatelessWidget {
final T value;
final T groupValue;
final ValueChanged<T> onChanged;
final double radius;
final Color color;
FilledRadio(
{required this.value,
required this.groupValue,
required this.onChanged,
this.radius = 16,
this.color = const Color(0xFF49EF3E)});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () {
onChanged(this.value);
},
child: Container(
height: this.radius * 2,
width: this.radius * 2,
decoration: ShapeDecoration(
shape: CircleBorder(),
color: color,
),
child: Center(
child: Container(
height: (this.radius * 2) - 8,
width: (this.radius * 2) - 8,
decoration: ShapeDecoration(
shape: CircleBorder(),
color: value == groupValue
? color
: Theme.of(context).scaffoldBackgroundColor,
),
),
),
),
),
);
}
}
You can use it like:你可以像这样使用它:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FilledRadio(
value: "0",
radius: 20,
color: Colors.redAccent,
groupValue: _radValue,
onChanged: (String value) {
setState(() {
_radValue = value;
});
},
),
FilledRadio(
value: "1",
radius: 16,
color: Colors.red,
groupValue: _radValue,
onChanged: (String value) {
setState(() {
_radValue = value;
});
},
),
FilledRadio(
value: "2",
radius: 12,
color: Colors.amber,
groupValue: _radValue,
onChanged: (String value) {
setState(() {
_radValue = value;
});
},
),
FilledRadio(
value: "3",
radius: 16,
color: Colors.green,
groupValue: _radValue,
onChanged: (String value) {
setState(() {
_radValue = value;
});
},
),
FilledRadio(
value: "4",
radius: 20,
color: Colors.greenAccent,
groupValue: _radValue,
onChanged: (String value) {
setState(() {
_radValue = value;
});
},
),
],
),
And it will look like:它看起来像:
Note: This implementation supports only from dart 2.12.0 and above.注意:此实现仅支持 dart 2.12.0 及更高版本。 If you are trying to use it in older versions of dart, just change the constructor to:
如果您尝试在旧版本的 dart 中使用它,只需将构造函数更改为:
FilledRadio(
{@required this.value,
@required this.groupValue,
@required this.onChanged,
this.radius = 16,
this.color = const Color(0xFF49EF3E)});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.