简体   繁体   中英

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

选项卡标题是彩色的,下划线不是

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

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>[

thanks @Yeasin Sheikh, finally i found the solution

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM