Reputation: 481
I have a tab that looks like this
but i want my tab look like this
I use TabBar, I want the green line to be in the middle like the image I want, please help
TabBar(
indicatorColor: HexColor(ColorSetup().colorPrimary),
indicatorWeight: 8,
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: EdgeInsets.only(left : 5.w, right : 5.w, top : 4.h),
labelColor: HexColor(ColorSetup().colorBlack),
labelStyle: TextStyle(
fontSize: 14.sp,
fontFamily: StringSetup().dinFont,
fontWeight: FontWeight.w700,
color: HexColor(ColorSetup().colorBlack)),
unselectedLabelStyle: TextStyle(
fontSize: 14.sp,
fontFamily: StringSetup().dinFont,
fontWeight: FontWeight.w400,
color: HexColor(ColorSetup().colorBlack)),
tabs: <Widget>[
Tab(
text: 'ALL REWARDS',
),
Tab(
text: 'MY REWARDS',
),
],
)
Upvotes: 1
Views: 152
Reputation: 2077
You can use this parameter
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 3.0, color: Color(0XFF7E7E7E)),
insets: EdgeInsets.only(right: 25, bottom: 0, left: 2),
),
indicatorSize: TabBarIndicatorSize.label,
Upvotes: 1