更改选定的选项卡图标颜色

Question

I have TabBar with icon and text:

child: TabBar(
    labelColor: Colors.white,
    unselectedLabelColor: Colors.grey,
    labelStyle: TextStyle(fontSize: 13.0),
    indicator: BoxDecoration(
        borderRadius: BorderRadius.circular(50), // Creates border
        color: const Color(0xFF62A6E9)),
    tabs: [
        Tab(icon: SvgPicture.asset(
            'assets/trending.svg',
            color: const Color(0xFF71768D),
                width: 15,
                height: 15
        ), text: "Популярное"),
        Tab(icon: SvgPicture.asset(
            'assets/new.svg',
            color: const Color(0xFF71768D),
                width: 15,
                height: 15
        ), text: "Новые"),
        Tab(icon: SvgPicture.asset(
            'assets/comingsoon.svg',
            color: const Color(0xFF71768D),
                width: 15,
                height: 15
        ), text: "Ожидаемые"),
    ],
),

I need change selected tab icon color, SvgPicture have color attribute for fill icon

Answer 1

You need to provide a TabController for your selected tabs and on the basis of TabController's index, you can change the color.

 TabController _tabController;

 @override
 void initState() {
   super.initState();
  _tabController = new TabController(vsync: this, length: 3);
  _tabController.addListener(_handleTabSelection);
 }

 void _handleTabSelection() {
    setState(() {
     });
 }


TabBar(
 controller: _tabController,
 labelColor: Colors.white,
 unselectedLabelColor: Colors.grey,
 labelStyle: TextStyle(fontSize: 13.0),
 indicator: BoxDecoration(
     borderRadius: BorderRadius.circular(50), // Creates border
     color: const Color(0xFF62A6E9)),
 tabs: [
    Tab(icon: SvgPicture.asset(
        'assets/trending.svg',
        color: _tabController.index == 0
                      ? Colors.black
                      : Color(0xFF71768D),
            width: 15,
            height: 15
     ), text: "Популярное"),
     Tab(icon: SvgPicture.asset(
        'assets/new.svg',
        color: _tabController.index == 1
                      ? Colors.black
                      : Color(0xFF71768D),
            width: 15,
            height: 15
     ), text: "Новые"),
     Tab(icon: SvgPicture.asset(
        'assets/comingsoon.svg',
        color: _tabController.index == 2
                      ? Colors.black
                      : Color(0xFF71768D),
            width: 15,
            height: 15
     ), text: "Ожидаемые"),

EDIT:

Please dispose the TabController as well.

@override
void dispose() {
_tabController.dispose();
super.dispose();
}

Answer 2

first thing you write 'const' color which means the color attribute can't change because it is constant to solve this problem:

1. create Color variable ex:

   Color color1 = Color(0xFF71768D); // for first tab... and so on

2. on TabBar there is attribute call 'onTap' this will take function to change the color of tab when click.. ex:

   onTap: (){ setState((){ color1 = //new Color color2 = //new Color // and so on }) }

Answer 3

You can use selectedItemColor and unselectedItemColor properties, you will find them in this code =>

class TabsScreen extends StatefulWidget {
  @override
  _TabsScreenState createState() => _TabsScreenState();
}

class _TabsScreenState extends State<TabsScreen> {
  final BorderStyle borderStyle = BorderStyle.solid;
  final List<Map<String, Object>> _pages = [
   {'page': HomeView(), 'title': 'Doctors'},
   {'page': MyCoursesView(), 'title': 'My Courses'}
  ];
  int _selectedPageIndex = 0;

  void _selectPage(int index) {
    setState(() {
      _selectedPageIndex = index;
    });
  }

  Future<void> showExitDialogConfirmation(
     BuildContext context,) async {
       await DialogManager.showExitDialog(context);
  }

  @override
  Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            bottom: Radius.circular(20),
          ),
        ),
        title: Text(_pages[_selectedPageIndex]['title'],
          style: TextStyle(
            color: white,
            fontWeight: FontWeight.w700,
            fontFamily: "Roboto",
            fontStyle: FontStyle.normal,
            fontSize: 25)),
          centerTitle: true,
          actions: [
            FlatButton(
              onPressed: () async {
                   await showExitDialogConfirmation(context);
              },
              child: Icon(
                Icons.logout, color: white,),
            ),
         ],
       ),
       body: _pages[_selectedPageIndex]['page'],
       bottomNavigationBar: Container(
       decoration: BoxDecoration(
        //  color: Color(0xfff7f7f7),
         border: Border.all(
         color: mainGoldColor, 
         style: borderStyle,
         width: 3.0,
       ),
       borderRadius: BorderRadius.vertical(
         top: Radius.circular(15.0),
       ),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(15.0),
          topRight: Radius.circular(15.0),
        ),
        child: BottomNavigationBar(
        onTap: _selectPage,
        backgroundColor: white, 
        unselectedItemColor: Colors.grey,
        selectedItemColor: mainGreenColor, 
        currentIndex: _selectedPageIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.person,
              size: 25,
            ),
            title: Text('Doctors',
                style:
                    TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.article,
              size: 25,
            ),
            title: Text(
              'My Courses',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
              ),
            ),
          ],
        ),
      ),
     ),
   );
  }
 }

Answer 4

Working Solution

In your case you should use tabController for more customisations over TabBar. To get active tab you should use _tabController.indexIsChanging and get active index _tabController.index .

Output

Full code:

class CustomTabs extends StatefulWidget {
  final Function onItemPressed;

  CustomTabs({
    Key key,
    this.onItemPressed,
  }) : super(key: key);

  @override
  _CustomTabsState createState() => _CustomTabsState();
}

class _CustomTabsState extends State<CustomTabs>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  int _activeIndex = 0;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      vsync: this,
      length: 3,
    );
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _tabController.addListener(() {
      if (_tabController.indexIsChanging) {
        setState(() {
          _activeIndex = _tabController.index;
        });
      }
    });
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.only(top: 25),
        child: TabBar(
          controller: _tabController,
          labelColor: Color(0xFF62A6E9),
          unselectedLabelColor: Colors.black,
          labelStyle: TextStyle(fontSize: 13.0),
          // indicator: BoxDecoration(
          //     borderRadius: BorderRadius.circular(50), // Creates border
          //     color: const Color(0xFF62A6E9)),
          tabs: [
            Tab(
                icon: SvgPicture.asset('assets/trending.svg',
                    color: _activeIndex == 0 ? Color(0xFF62A6E9) : Colors.black,
                    width: 25,
                    height: 25),
                text: "Популярное"),
            Tab(
              icon: SvgPicture.asset('assets/new.svg',
                  color: _activeIndex == 1 ? Color(0xFF62A6E9) : Colors.black,
                  width: 25,
                  height: 25),
              text: "Новые",
            ),
            Tab(
                icon: SvgPicture.asset('assets/comingsoon.svg',
                    color: _activeIndex == 2 ? Color(0xFF62A6E9) : Colors.black,
                    width: 25,
                    height: 25),
                text: "Ожидаемые"),
          ],
        ),
      ),
    );
  }
}