flutter - 选择选项卡时的TabBar图标颜色

Question

选择标签时，我正在尝试更改标签图标的颜色。我知道如何更改图标的颜色，但是当我选择选项卡时，我不知道如何更改颜色。

我的代码:

child: AppBar(
    bottom: TabBar(
        tabs: <Tab>[
            Tab(
                child: new Row(
                    children: <Widget>[
                        new Text("Select", textAlign: TextAlign.start),
                        new SizedBox(
                            width: 24.0,
                        ),
                        new Icon(
                            Icons.arrow_drop_down,
                            color: Colors.blue.shade400,
                        ),
                    ],
                    ....
                )
            )
        ]
    )
)

Answer 1

要更改所选标签的颜色，只需将其添加到TabBar即可:

labelColor: Colors.
unselectedLabelColor: Colors.white,

完整代码:

DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            labelColor: Colors.deepOrange,
            unselectedLabelColor: Colors.white,
            tabs: <Tab>[
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: Colors.blue.shade400,
                    ),
                  ],
                ),
              ),
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: Colors.blue.shade400,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        body: Center(
          child: Container(
            child: Text("This is a page blahblah"),
          ),
        ),
      ),
    )

编辑:
如果您只想更改图标的颜色，则将颜色添加到“文本”，然后从“选项卡”中的“图标”中的“代码”中删除颜色:

DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            labelColor: Colors.deepOrange,
            unselectedLabelColor: Colors.white,
            tabs: <Tab>[
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start, style: TextStyle(color: Colors.white),),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                    ),
                  ],
                ),
              ),
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start, style: TextStyle(color: Colors.white),),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,

                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        body: Center(
          child: Container(
            child: Text("This is a page blahblah"),
          ),
        ),
      ),
    )

编辑＃2
现在，此代码更改了图标颜色，但将文本颜色更改保留为默认设置(您可以自定义文本颜色的更改，例如图标颜色)。码:

import 'package:flutter/material.dart';

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            onTap: (index){
              setState(() {
               _currentIndex = index; 
              });
            },

            tabs: <Tab>[
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start,),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: _currentIndex == 0 ? Colors.deepOrange : Colors.white54
                    ),
                  ],
                ),
              ),
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start,),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: _currentIndex == 1 ? Colors.deepOrange : Colors.white54,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        body: Center(
          child: Container(
            child: Text("This is a page blahblah"),
          ),
        ),
      ),
    );
  }
}