Home > Mobile >  how to change indicator color in flutter
how to change indicator color in flutter

Time:01-02

as shown in the picture blow i have first tab colored with green

tab title is colored put underline is not

tab title is colored put underline is not

is it possible to color the line under the title with the same color green ?

child: TabBar(
                  onTap: (index) {
                    setState(() {
                      selectedIndex = index;
                    });
                  },
                  isScrollable: false,
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  controller: _tabController,
                  labelColor: getIndicatorAndLabelColor(selectedIndex),
                  unselectedLabelColor: Colors.black,
                  indicatorWeight: 4,
                  indicatorColor: getIndicatorAndLabelColor(selectedIndex),
                 indicatorPadding:
                      const EdgeInsets.only(left: 15, right: 15, bottom: 10),
                  indicator: const ShapeDecoration(
                      shape: UnderlineInputBorder(
                          borderSide: BorderSide(
                              color: myAccentColor,
                              width: 3,
                              style: BorderStyle.solid))),
                  tabs: const [
                    Tab(
                      text: 'APPROVED',
                    ),
                    Tab(
                      text: 'DENIED',
                    ),
                    Tab(
                      text: 'PENDING',
                    ),
                  ],
                ),

CodePudding user response:

You can use indicatorColor to set it green.

TabBar(
  indicatorColor: Colors.green, //this one , you can remove `getIndicatorAndLabelColor`
  indicatorWeight: 4,
  indicatorPadding:
      const EdgeInsets.only(left: 15, right: 15, bottom: 10),
  tabs: <Widget>[

CodePudding user response:

thanks @Yeasin Sheikh , finally i found the solution

        indicator: ShapeDecoration(
              shape: UnderlineInputBorder(
                borderSide: BorderSide(
                    color: Colors.green,
                    width: 3,
                    style: BorderStyle.solid),
              ),
            ),
  • Related