How to add text inside cupertino switch flutter - flutter

Question

I want to add text inside cupertino switch like attached image.. Is there a way to do it?

Answer 1

As of today there is no way to customize the CupertinoSwitch in Flutter out of the box, but hey! there are a number of Plugins in pub.dev that could satisfy your needs, like 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.

Answer 2

I create custom widget but without cupertinoswitch animation in it. 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),
)),
),
],
),
),
),
),

Answer 3

add text inside cupertinoswitch flutter
customSwitcher: CupertinoSwitch(
value: model.enableBiometric == 'enable' ? true: false,
activeColor: Color.transparent,
trackColor: Color.transparent,
onChanged: (bool val) {
model.enableBiometric =
(model.enableBiometric == "disable"
? 'enable'
: 'disable');
},),
Container(
width: 70,
height: 36,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular((100)),
border: Border.all(
width: 1.0,
color: model?.enableBiometric == 'enable'
? Color.red
: Color.red,
),
color: Color.red),
child: Row(children: [
if (model?.enableBiometric == "enable")...[
Padding(
padding: EdgeInsets.only(left:model?.enableBiometric == "enable" ? 12 : 0),
child: AppText(
txt:model?.enableBiometric == "enable" ? "Yes" : "",
fontSize: 11,
fontWeight:800,
),
),
] else ...[
SizedBox(
width: 4.0.w,
),
],
Expanded(
child: Container(
// width: ch(12),
//color: AppColor.red,
child: Transform.scale(
transformHitTests: false,
scale: 1.0,
child: customSwitcher!,
),
)),
if (model?.enableBiometric == "disable") ...[
Padding(
padding: EdgeInsets.only(
right:
model?.enableBiometric == "disable" ? 12 : 0),
child: AppText(
txt:
model?.enableBiometric == "disable" ? "No" : "",
fontSize: 11,
fontWeight: 800,
),
),
] else ...[
SizedBox(
width: 4.0.w,
),
]
]),
),