android – White Line appear at the bottom of the Tab Bar in Flutter Screen


I am facing an issue regarding the TabBar in flutter,I have used this TabBar as bottomNavigationBar property in my code.

The purpose of using a TabBar is that I have top indicator so to achieve that I have used it as bottomNavigationBar property.

Home Screen Image

Please help me resolve this looked for many solutions but not resolved :

class Home extends StatelessWidget {

  HomeTabController homeTabController = Get.put(HomeTabController());

  Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColors.appBarColor,
        body: const SafeArea(
          child: CommonAppBar(),
        ),
        bottomNavigationBar: createTabBar(context),
    );
  }

  Widget createTabBar(BuildContext context) {
    return Container(
      height: DesignConstants.tabHeight,
      width: Get.width,
      child: TabBar(
        indicator: TopIndicator(),
        controller: homeTabController.tabController,
        labelPadding: EdgeInsets.all(0),
        tabs: homeTabController.tabs,
      ),
    );
  }
}

Controller Class

class HomeTabController extends GetxController with GetSingleTickerProviderStateMixin{

  late TabController tabController;

  final List<Tab> tabs = <Tab>[];
  var tabpos = 0.obs;

  @override
  void onInit() {
    super.onInit();

    getTabs();
    tabController = TabController(length: tabs.length, vsync: this);
  }

  void getTabs() {
    tabs.clear();
    tabs.add(createTab('Home',"${ImagePaths.bottomMenuPath}/home_icon.svg",0));
    tabs.add(createTab('Matches',"${ImagePaths.bottomMenuPath}/home_icon.svg", 1));
  }

  Tab createTab(String text,String imagePath,int index) {
    return Tab(
        child: Obx(() => Center(
          child: Column(
            children: [
              SvgPicture.asset(
                imagePath,
                height: DesignConstants.bottomMenuIconSize,
                width: DesignConstants.bottomMenuIconSize,
              ),
              TextLanCommon(text.toUpperCase(),
                  style: (tabpos.value == index)
                      ? getnotificatontabselected()
                      : getnotificationtabunselected()),
            ],
          ),
        )));
  }

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

Top Indicator Class

class TopIndicator extends Decoration {
  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _TopIndicatorBox();
  }
}

class _TopIndicatorBox extends BoxPainter {
  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    Paint _paint = Paint()
      ..color = AppColors.indicatorColor
      ..strokeWidth = 3
      ..isAntiAlias = true;

    canvas.drawLine(offset, Offset(cfg.size!.width + offset.dx, 0), _paint);
  }
}

I tried using theme and background colours but issue with the TabBar itself what I did wrong.Please help me resolve this

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img