Not responding to clicking on the bottom text

[HaniKhaledAli]

Hello everyone,

I have an issue that I hope can be resolved. I have divided my tabbar button into two vertical sections. You can refer to the attached image for reference. When I click on the top text "Active," it triggers a response upon tapping. However, if I click on the bottom text, which is the number "2" as shown in the image, there is no response. How can I make the response cover all the entire content of the tabbar button?

Thank you.

[afonsocraposo]

Can you provide some demo/example code?

[HaniKhaledAli]

Hello @afonsocraposo Thank you for your response and I appreciate it. I've noticed that the problem is when using Stack,Positioned, The example code in attachment Thank you again.

tabbar.txt

[afonsocraposo]

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:buttons_tabbar/buttons_tabbar.dart';

class TabBarPage extends StatefulWidget {
  const TabBarPage({Key? key}) : super(key: key);

  @override
  TabBarPageState createState() => TabBarPageState();
}

class TabBarPageState extends State<TabBarPage>
    with SingleTickerProviderStateMixin {
  late TabController tabController;

  @override
  void initState() {
    tabController = TabController(length: 2, vsync: this, initialIndex: 0);
    super.initState();
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
        backgroundColor: Colors.amber,
        body: Column(
          children: [
            HeaderBar(size: size, tabController: tabController),
            SizedBox(
              height: 43.h,
            ),
            Expanded(
              child: Stack(
                children: [
                  Container(
                    alignment: Alignment.topCenter,
                    width: size.width,
                    height: size.height,
                    color: Colors.white,
                    child: TabBarView(
                      controller: tabController,
                      children: [
                        Container(
                          color: Colors.black,
                        ),
                        Container(
                          color: Colors.red,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}

class HeaderBar extends StatefulWidget {
  const HeaderBar({
    Key? key,
    required this.size,
    required this.tabController,
  }) : super(key: key);

  final Size size;
  final TabController tabController;

  @override
  State<HeaderBar> createState() => _HeaderBarState();
}

class _HeaderBarState extends State<HeaderBar> {
  @override
  Widget build(BuildContext context) {
    double tabWidth = 70.w;

    return Stack(
      clipBehavior: Clip.none,
      alignment: Alignment.center,
      children: [
        Container(
          width: widget.size.width,
          height: 127.h,
          color: Colors.blue,
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      'TabBar Page ',
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 10.0),
                  child: GestureDetector(
                    onTap: () {},
                    child: Icon(Icons.help),
                  ),
                ),
              ],
            ),
          ),
        ),
        Positioned(
          top: 95.h,
          width: MediaQuery.of(context).size.width - 20,
          child: Container(
            height: 66.h,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
              boxShadow: const [
                BoxShadow(
                  color: Colors.grey,
                  spreadRadius: 3,
                  blurRadius: 5,
                  offset: Offset(0, 0),
                ),
              ],
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ButtonsTabBar(
                  controller: widget.tabController,
                  splashColor: Colors.white,
                  unselectedBackgroundColor: Colors.white,
                  unselectedLabelStyle: const TextStyle(
                    color: Colors.black,
                  ),
                  backgroundColor: Colors.white,
                  height: 47.h,
                  buttonMargin: EdgeInsets.symmetric(horizontal: 20.w),
                  tabs: [
                    Tab(
                      child: Container(
                        width: tabWidth,
                        alignment: Alignment.center,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            Text("Active",
                                style: TextStyle(
                                  color: Colors.black,
                                )),
                            Text(
                              "2",
                              style: TextStyle(
                                color: Colors.black,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Tab(
                      child: Container(
                        width: tabWidth,
                        alignment: Alignment.center,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            Text(
                              "Inactive",
                              style: TextStyle(
                                color: Colors.black,
                              ),
                            ),
                            Text(
                              "1",
                              style: TextStyle(
                                color: Colors.black,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

[afonsocraposo]

Hey @HaniKhaledAli , I haven't coded in Flutter for almost 1 year. Can you verify if this problem also happens with TabBar class? https://api.flutter.dev/flutter/material/TabBar-class.html

[afonsocraposo]

Just tested this code using TabBar instead of ButtonsTabBar. The code didn't work as expected. I advise you to make it work with the default TabsBar class. The problem is that the height of each Tab is larger than the actual TabBar. I'm closing this, since this is not a problem with this package.