Flutter 如何在Flatter中创建类似TabBar的ToggleButton？

我想要什么：

                    ToggleButtons(
                      borderRadius: BorderRadius.zero,
                      children: [
                        RichText(
                          text: TextSpan(
                            text: "Today",
                            style: TextStyle(
                                color: Colors.black, fontSize: 15),
                            children: [
                              TextSpan(
                                  text:
                                      "    ${offline.length.toString()}  Slots",
                                  style: TextStyle(color: Colors.green))
                            ],
                          ),
                        ),
                        RichText(
                          text: TextSpan(
                            text: "Today",
                            style: TextStyle(
                                color: Colors.black, fontSize: 15),
                            children: [
                              TextSpan(
                                  text:
                                      "    ${offline.length.toString()}  Slots",
                                  style: TextStyle(color: Colors.green))
                            ],
                          ),
                        ),
                      ],
                      isSelected: isSelected,
                      onPressed: (int index) {
                        setState(
                          () {
                            for (int buttonIndex = 0;
                                buttonIndex < isSelected.length;
                                buttonIndex++) {
                              if (buttonIndex == index) {
                                isSelected[buttonIndex] = true;
                              } else {
                                isSelected[buttonIndex] = false;
                              }
                            }
                          },
                        );
                      },
                    ),

我想创建一个类似于

TabBar（）上的按钮

，它就像一个带有下划线的

ToggleButton（）

图像：

这个按钮的功能应该类似于

ToggleButton（），

到目前为止我所尝试的：

                    ToggleButtons(
                      borderRadius: BorderRadius.zero,
                      children: [
                        RichText(
                          text: TextSpan(
                            text: "Today",
                            style: TextStyle(
                                color: Colors.black, fontSize: 15),
                            children: [
                              TextSpan(
                                  text:
                                      "    ${offline.length.toString()}  Slots",
                                  style: TextStyle(color: Colors.green))
                            ],
                          ),
                        ),
                        RichText(
                          text: TextSpan(
                            text: "Today",
                            style: TextStyle(
                                color: Colors.black, fontSize: 15),
                            children: [
                              TextSpan(
                                  text:
                                      "    ${offline.length.toString()}  Slots",
                                  style: TextStyle(color: Colors.green))
                            ],
                          ),
                        ),
                      ],
                      isSelected: isSelected,
                      onPressed: (int index) {
                        setState(
                          () {
                            for (int buttonIndex = 0;
                                buttonIndex < isSelected.length;
                                buttonIndex++) {
                              if (buttonIndex == index) {
                                isSelected[buttonIndex] = true;
                              } else {
                                isSelected[buttonIndex] = false;
                              }
                            }
                          },
                        );
                      },
                    ),

切换按钮(
borderRadius:borderRadius.0，
儿童：[
RichText(
text:TextSpan(
正文：“今天”，
样式：TextStyle(
颜色：颜色。黑色，字体大小：15），
儿童：[
TextSpan(
正文：
“${offline.length.toString（）}插槽”，
样式：TextStyle（颜色：Colors.green））
],
),
),
RichText(
text:TextSpan(
正文：“今天”，
样式：TextStyle(
颜色：颜色。黑色，字体大小：15），
儿童：[
TextSpan(
正文：
“${offline.length.toString（）}插槽”，
样式：TextStyle（颜色：Colors.green））
],
),
),
],
当选：当选，
onPressed：（int索引）{
设定状态(
() {
对于（int buttonIndex=0；
按钮索引

上述代码的输出：

---

我只创建了一个

自定义切换按钮

，它具有

onTap

，

调用该函数等所有功能。我希望这能解决你的问题，请看下面的例子


void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
debugShowCheckedModeBanner:false，
主题：主题数据(
颜色：颜色。蓝色，
),
主页：CustomToggleButton（），
);
}
}
类CustomToggleButton扩展StatefulWidget{
@凌驾
_CustomToggleButtonState createState（）=>\u CustomToggleButtonState（）；
}
常数双倍宽度=300.0；
常数双倍高度=60.0；
const double todayAlign=-1；
const-double-signalign=1；
const Color selectedColor=Colors.black；
const Color normalColor=Colors.black38；
类_CustomToggleButtonState扩展状态{
双xAlign；
今天的颜色；
色彩明日色彩；
布尔选择值；
@凌驾
void initState（）{
super.initState（）；
xAlign=todayAlign；
todayColor=selectedColor；
明日颜色=正常颜色；
selectedValue=true；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：容器(
颜色：颜色，白色，
宽度：MediaQuery.of（context）.size.width，
高度：MediaQuery.of（context）.size.height，
子：列(
儿童：[
容器(
身高：10，
),
容器(
宽度：宽度，
身高：100，
装饰：康斯特盒子装饰(
//颜色：颜色，红色，
borderRadius:borderRadius.all(
圆形半径（00.0），
),
),
子：堆栈(
儿童：[
动木(
对齐：对齐（xAlign，0），
持续时间：持续时间（毫秒：300），
子：容器(
颜色：颜色，红色，
宽度：宽度*0.5，
身高：70，
子：容器(
装饰：康斯特盒子装饰(
//颜色：颜色。粉红色，
梯度：线性梯度(
颜色：[
颜色，白色，
颜色，白色，
颜色，白色，
颜色，白色，
颜色。粉红色
],
开始：Alignment.topCenter，
结束：对齐。底部中心，
//停止：[0.0,1.0]，
//tileMode:tileMode.clamp
),
),
),
),
),
手势检测器(
onTap:（）{
设置状态（）{
xAlign=todayAlign；
todayColor=selectedColor；
明日颜色=正常颜色；
selectedValue=true；
});
},
子对象：对齐(