如何在库比蒂诺开关颤动中添加文本

Question

我想在库比蒂诺开关内添加文本，如附图所示。有办法做到吗？

Answer 1

截至今天，还无法在 Flutter 中开箱即用地自定义 CupertinoSwitch，但是嘿！ pub.dev中有许多插件可以满足您的需求，例如flutter_switch。

使用下面的代码你可以实现你想要的东西：

            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;
                });
              },
            )

看起来像这样：

这当然只是一个示例，您可以进一步定制以获得更漂亮的结果。

Answer 2

我创建了自定义小部件，但其中没有 cupertinoswitch 动画。我希望这符合您的需求 =))

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

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

Answer 4

我尝试用动画寻找解决方案，但找不到。

因此，我在 Stack 内使用 AnimatedContainer 实现了相同的效果，只需更改容器的位置即可对其进行动画处理，因此我们得到了与 CupertinoWidget 类似的所需结果。

这是示例代码：

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