Rohmatul Laily
Rohmatul Laily

Reputation: 481

Indicator Tab Flutter

I have a tab that looks like this

enter image description here

but i want my tab look like this enter image description here

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

Answers (1)

Hemal Moradiya
Hemal Moradiya

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

Related Questions