How to add text inside cupertino switch flutter

Question

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

Tetragrammaton

Sindu please check my answer here hope its help to you – Vidette

Have you tried pub.dev/packages/flutter_toggle_tab ? – Nutcracker

@RavindraS.Patil The answer looks good. But I am really looking for something exactly like the picture I have added. Thanks for the effort – Tetragrammaton

@Nutcracker This actually looks good. Will try – Tetragrammaton

Answer 1

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),
                                          )),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ),

Homeward

This is just perfect. Thanks for the effort – Tetragrammaton

Answer 2

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.

Combative

I have tried the above link already and also custom switch.. It doesn't satisfy my needs – Tetragrammaton

@Tetragrammaton I've be put snippet soon for your requirement – Lagos

@Sindu, please look at the updated answer, i think you could achieve what you want with the plugin named flutter_switch – Combative

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,
                        ),
                      ]
                    ]),
                  ),

Abstractionist

where is customSwitcher on your code is not defined – Demeter

Answer 4

I tried finding a solution with the animation and couldn't find one.

So, I implemented the same with an AnimatedContainer inside a Stack, just changing the position of the container animates it, so we get desired result similar to the CupertinoWidget.

Here is the example code:

bool switchValue = true;
Widget getCustomAnimatedSwitch() {
  return GestureDetector(
    onTap: () {
     setState(() {
      switchValue = !switchValue;
     });
    },
    child: Container(
      width: 124,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30), color: Colors.black26),
      child: Stack(
        alignment: Alignment.center,
        children: [
          AnimatedContainer(
            alignment:
            switchValue ? Alignment.centerLeft : Alignment.centerRight,
            duration: const Duration(milliseconds: 250),
            child: Container(
              width: 70,
              height: 35,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30),
                color: Colors.black),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Center(
                  child: Text('Option 1', style: TextStyle(color: switchValue ? Colors.white : Colors.black),
              )),
              Center(
                  child: Text('Option 2', style: TextStyle(color: switchValue ? Colors.black : Colors.white),
              )),
            ],
          ),
        ],
      ),
    ),
  );
}

Helicline