Question 77960 in Flutter Question posted in
The official Flutter documentation can be found here.

How to add text inside cupertino switch flutter

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

enter image description here

Tags:

3

Answers


  1. 0

    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:

    enter image description here

    That is of course just a sample, you can further customize to get a more beautiful result.

    Login or Signup to reply.
  2. 0

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

    image

    Login or Signup to reply.
  3. 0

    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,
                        ),
                      ]
                    ]),
                  ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search