如何在 cupertino switch flutter 中添加文本答案

【问题标题】：How to add text inside cupertino switch flutter如何在 cupertino switch flutter 中添加文本
【发布时间】：2023-01-10 15:20:46
【问题描述】：

我想在 cupertino switch 中添加文本，就像附加的图像一样。有没有办法做到这一点？

【问题讨论】：

Sindu 请查看我的回答here 希望对你有帮助
你试过pub.dev/packages/flutter_toggle_tab吗？
@RavindraS.Patil 答案看起来不错。但我真的在寻找与我添加的图片完全一样的东西。谢谢你的努力
@Rahul 这看起来不错。会尝试

标签： flutter dart button

【解决方案1】：

截至今天，无法自定义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;
                });
              },
            )

看起来像这样：

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

【讨论】：

我已经尝试了上面的链接和自定义开关。它不能满足我的需求
@Sindu 我很快就会根据你的要求安排 sn-p
@Sindu，请查看更新后的答案，我认为你可以使用名为 flutter_switch 的插件实现你想要的
这真的很有帮助。谢谢

【解决方案2】：

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

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][1]][1]


  [1]: https://i.stack.imgur.com/4Tr7k.png

【讨论】：