How to change the colour of the container that wrapped inside tab in flutter

0

enter image description here

Hi, is there any ways to change the container colour when I switch tab inside a TabBar in flutter? The tabBar did not allow me to put a child inside the tab and return error, hence I wrap a container inside the Tab and used boxDecoration to make the shape. When I switch tab, I need to change the opacity of the container just like the text color. Here is my code:

 child: TabBar(
                  labelColor: Color(0xFF000000),
                  unselectedLabelColor: Color(0x4F000000),
                  labelStyle: TextStyle(fontSize: fontSizeXs),
                  unselectedLabelStyle: TextStyle(fontSize: fontSizeXs),
                  indicatorColor: Color(0xFFC32127),
                  tabs: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Tab(
                          text: '未结算注单',
                        ),
                        Container(
                          width: 28,
                          height: 15,
                          margin: const EdgeInsets.only(left: 10.0),
                          decoration: BoxDecoration(
                            borderRadius: new BorderRadius.all(Radius.elliptical(100, 80)),
                            color: Color(0xFFc32127),
                          ),
                          child: Center(
                            child: Text('0',
                              style: TextStyle(color: Color(0xFFFFFFFF), fontSize: fontSizeXss),),
                          ),
                        )
                      ],
                    ),
flutter
flutter-layout
asked on Stack Overflow May 21, 2020 by Liew Syet Chau

1 Answer

0

Add a TabController and then bind to tabController.addListener(yourmethod). The method will be triggered every time the user switches between pages.

 tabController.addListener(onIndexChanged);
 void onIndexChanged() {
    setState(() {
      activeTabIndex = tabController.index;
    });
  }
 TabBar(
    controller: tabController, ....
answered on Stack Overflow May 22, 2020 by VasilKanev

User contributions licensed under CC BY-SA 3.0