更改所选标签的图标颜色 [英] Change tab icon color on selected

问题描述

我有带有图标和文字的TabBar:

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: "Ожидаемые"),
    ],
),

我需要更改所选标签图标的颜色，SvgPicture具有填充图标的颜色属性

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

推荐答案

您需要为所选选项卡提供一个TabController，并且可以在TabController的索引的基础上更改颜色.

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: "Ожидаемые"),

请也处理TabController.

Please dispose the TabController as well.

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

这篇关于更改所选标签的图标颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！