[英]How to add text inside cupertino switch flutter
As of today there is no way to customize the CupertinoSwitch in Flutter out of the box, but hey!到今天为止,还没有办法在Flutter开箱即用地自定义CupertinoSwitch ,但是嘿! there are a number of Plugins in pub.dev that could satisfy your needs, like flutter_switch .
pub.dev中有许多插件可以满足您的需求,例如flutter_switch 。
With the following code you can achieve something like what you want:使用以下代码,您可以实现您想要的效果:
FlutterSwitch(
showOnOff: true,
value: v,
activeIcon: Text("SELL"),
activeText: "BUY",
inactiveIcon: Text("BUY"),
inactiveText: "SELL",
inactiveColor: Colors.blue,
activeTextFontWeight: FontWeight.normal,
inactiveTextFontWeight: FontWeight.normal,
onToggle: (val) {
setState(() {
v = val;
});
},
)
which looks like this:看起来像这样:
That is of course just a sample, you can further customize to get a more beautiful result.这当然只是一个示例,您可以进一步自定义以获得更漂亮的结果。
I create custom widget but without cupertinoswitch animation in it.我创建了自定义小部件,但其中没有 cupertinoswitch animation。 I hope this match your needs =))
我希望这符合您的需求 =))
GestureDetector(
onTap: () {
setState(() {
val = !val;
});
},
child: Container(
width: size.width * 0.35,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: kSecondaryColor),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Container(
width: 60,
height: 30,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(30),
color: val
? Colors.white
: kSecondaryColor),
child: Center(
child: Text(
'BUY',
style: TextStyle(
fontWeight: FontWeight.bold,
color: val
? Colors.black
: Colors.white),
)),
),
Container(
width: 60,
height: 30,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(30),
color: val
? kSecondaryColor
: Colors.white),
child: Center(
child: Text(
'SELL',
style: TextStyle(
fontWeight: FontWeight.bold,
color: val
? Colors.white
: Colors.black),
)),
),
],
),
),
),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.