Question 78361 in Flutter Question posted in
The official Flutter documentation can be found here.

how to change indicator color in flutter

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',
                    ),
                  ],
                ),
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    thanks @Yeasin Sheikh , finally i found the solution

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

  2. 0

    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>[
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search