How to remove tabbar bottom border?

[nikunjshaligram]

ScrollableListTabScroller( itemCount: controller.deliveriesfinalList.length, headerContainerBuilder: (_, child) => Container( height: 8.screenHeight, color: AppColors.statusBarColor, child: Container( height: 4.5.screenHeight, padding: EdgeInsets.symmetric( horizontal: 0.5.screenWidth, vertical: 0.7.screenHeight, ), decoration: BoxDecoration( borderRadius: BorderRadius.circular(50), color: AppColors.whiteColor, ), child: child, ).paddingOnly( bottom: 1.screenHeight, left: 6.screenWidth, right: 6.screenWidth, ), ), tabBuilder: (context, index, active) => Container( width: 41.5.screenWidth, alignment: Alignment.center, decoration: active ? BoxDecoration( gradient: AppBackground.getTabBarBackgroundGradient(), borderRadius: BorderRadius.circular(50), border: Border.all( color: AppColors.darkOrangeColor, ), ) : BoxDecoration( color: Colors .transparent, // Ensures there's no background color borderRadius: BorderRadius.circular(50), ), child: Text( controller.deliveriesfinalList[index].name!, style: !active ? AppStyle.mediumTextStyle( size: 11.sp, color: AppColors.lightTextColor, ) : AppStyle.semiBoldTextStyle( size: 11.sp, color: AppColors.primaryColor, ), ), ).paddingSymmetric(horizontal: 1.screenWidth), ),

I have a code snippet for a tab bar, but it's displaying a bottom border or divider in tabbar. How can I remove it?

[railson-ferreira]

It's possible to customize TabBar through Theme like in the following way:

Theme(
  data: Theme.of(context).copyWith(
    tabBarTheme: Theme.of(context).tabBarTheme.copyWith(dividerHeight: 0),
  ),
  child: ScrollableListTabScroller(

You can check an example of a similar issue: https://github.com/railson-ferreira/scrollable_list_tab_scroller/issues/7#issuecomment-1857086147

[nikunjshaligram]

It's Working. Thank you.