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

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