Flutter：如何更改幻灯片上的选项卡图标颜色，而不仅仅是点击？答案

【问题标题】：Flutter: How to change Tab's icon's color on SLIDE, not just on tap?Flutter：如何更改幻灯片上的选项卡图标颜色，而不仅仅是点击？
【发布时间】：2020-05-10 07:44:21
【问题描述】：

所以，我设置了一个 TabBarView，它的选项卡每个都包含一个图标和文本。当您通过滑动在选项卡之间切换时，文本似乎会线性改变颜色。你如何为图标实现同样的效果？我设法让它在点击时切换颜色，但滑动时它不遵守相同的规则。

我已尝试使用tabController.index == 0 等。仍然无法正常工作。

【问题讨论】：

标签： flutter tabs tabbar

【解决方案1】：

使用 Tap 或 Sliding 两者：

child: new TabBar(
                  indicatorColor: Colors.white,
                  unselectedLabelColor: Colors.grey, // for unselected
                  labelColor: Colors.white, // for selected
                  indicatorWeight: 5.0,
                  tabs: [
                    new Tab(
                      text: 'Unpaid'.toUpperCase(),
                    ),
                    new Tab(
                      text: 'Draft'.toUpperCase(),
                    ),
                    new Tab(
                      text: 'All'.toUpperCase(),
                    ),
                  ],
                ),
              ),
            ),
            body: new TabBarView(
              children: [
                new first.UnpaidInvoicePage(),
                new second.PaidInvoicePage(),
                new third.AllInvoicePage(),
              ],
            ),

【讨论】：

【解决方案2】：

请尝试以下代码：

labelColor: Colors.black, // 选中的标签颜色(icon,text)
unselectedLabelColor: Colors.amber, // 未选择的标签颜色(icon,text)

================================================ ==========================

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              unselectedLabelColor: Colors.amber, // UnSelected Tab Color
              labelColor: Colors.black, // Selected Tab Color
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：