flutter - 如何在 flutter 中创建类似 ToggleButton 的 TabBar？

Question

我想要的:

我想创建一个类似 TabBar(); 的按钮，它就像一个带下划线的 ToggleButton()。

图像:

好吧，这个按钮的功能应该类似于ToggleButton(), refer here. for toggleButton class.

到目前为止我尝试了什么:

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

以上代码的输出:

Answer 1

我只创建了一个 Custom Toggle Button，它具有所有功能，例如 onTap，调用函数。我希望这能解决您的问题，请看下面的示例

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        accentColor: Colors.blue,
      ),
      home: CustomToggleButton(),
    );
  }
}

class CustomToggleButton extends StatefulWidget {
  @override
  _CustomToggleButtonState createState() => _CustomToggleButtonState();
}

const double width = 300.0;
const double height = 60.0;
const double todayAlign = -1;
const double signInAlign = 1;
const Color selectedColor = Colors.black;
const Color normalColor = Colors.black38;

class _CustomToggleButtonState extends State<CustomToggleButton> {
  double xAlign;
  Color todayColor;
  Color tomorrowColor;
  bool selectedValue;

  @override
  void initState() {
    super.initState();
    xAlign = todayAlign;
    todayColor = selectedColor;
    tomorrowColor = normalColor;
    selectedValue = true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(

        body: Container(
          color: Colors.white,
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Column(
            children: [
              Container(
                height: 10,
              ),
              Container(
                width: width,
                height: 100,
                decoration: const BoxDecoration(
                  // color: Colors.red,
                  borderRadius: BorderRadius.all(
                    Radius.circular(00.0),
                  ),
                ),
                child: Stack(
                  children: [
                    AnimatedAlign(
                      alignment: Alignment(xAlign, 0),
                      duration: Duration(milliseconds: 300),
                      child: Container(
                        color: Colors.red,
                        width: width * 0.5,
                        height: 70,
                        child: Container(
                          decoration: const BoxDecoration(
                            // color: Colors.pink,
                            gradient: LinearGradient(
                              colors: [
                                Colors.white,
                                Colors.white,
                                Colors.white,
                                Colors.white,
                                Colors.pink
                              ],
                              begin: Alignment.topCenter,
                              end: Alignment.bottomCenter,
                              // stops: [0.0, 1.0],
                              // tileMode: TileMode.clamp
                            ),
                          ),
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        setState(() {
                          xAlign = todayAlign;
                          todayColor = selectedColor;
                          tomorrowColor = normalColor;
                          selectedValue = true;
                        });
                      },
                      child: Align(
                        alignment: Alignment(-1, 0),
                        child: Container(
                          width: width * 0.5,
                          color: Colors.transparent,
                          alignment: Alignment.center,
                          child: RichText(
                            text: TextSpan(
                              text: "Today",
                              style: TextStyle(color: todayColor, fontSize: 15),
                              children: [
                                TextSpan(
                                    text: "    2 Slots",
                                    style: TextStyle(color: Colors.green))
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        setState(() {
                          xAlign = signInAlign;
                          tomorrowColor = selectedColor;
                          selectedValue = false;
                          todayColor = normalColor;
                        });
                      },
                      child: Align(
                        alignment: Alignment(1, 0),
                        child: Container(
                          width: width * 0.5,
                          color: Colors.transparent,
                          alignment: Alignment.center,
                          child: RichText(
                            text: TextSpan(
                              text: "Tomorrow",
                              style:
                                  TextStyle(color: tomorrowColor, fontSize: 15),
                              children: [
                                TextSpan(
                                    text: "    3 Slots",
                                    style: TextStyle(color: Colors.green))
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                height: 20,
              ),
             Expanded(
               child:  Container(
                 child: selectedValue ? Text("Today Data") : Text(" Tomorrow Data"),
               ),
             )
            ],
          ),
        ));
  }
}