How to create TabBar like ToggleButton in flutter?

Question

What I want:

I want to create a button like the one on TabBar(); , where it's like a ToggleButton() with an underline.

images:

well, The functionality of this button should be similar to ToggleButton(), refer here. for toggleButton class.

What I have Tried so far:

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

output of the above code:

user_12096653 · Answer

I have only created a Custom Toggle Button with all the functionality like onTap, call the function. I hope this will solve your problem please have a look at below example

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

user_12103749 · Answer

I have found a package that you can use for that which is the flutter_toggle_tab. I am sure this could help somehow

How to create TabBar like ToggleButton in flutter?

2 Answers