Цвет значка вкладки при выборе вкладки

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 Теперь этот код изменяет значокcolor, но оставляет цвет текста измененным по умолчанию (Вы можете настроить цвет текста, например, цвет значка). Код:

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"),
          ),
        ),
      ),
    );
  }
}

Answer 2

TabBar имеет свойства labelColor и unselectedLabelColor, чтобы установить выбранный / невыбранный цвет для любого значка и текста в Tabs.

Если вы хотите иметь фиксированный цвет для значков или текстов в Tabs, вам просто нужно указать этот цвет в Icon или Text в Tab, чтобы переопределить определенный цветв свойствах labelColor и unselectedLabelColor из TabBar.

Итак, в вашем случае, если вы хотите иметь выбранный / невыбранный цвет для значков и фиксированный цвет для текста, вы должны установить labelColor и unselectedLabelColor в TabBar сцвета для значков и установите определенный цвет текста внутри Tabs.

Answer 3

1. Создайте пользовательский контроллер вкладок, как показано нажмите здесь

2. Сделайте что-то вроде _tabController.index, чтобы получить индекс текущей вкладки.

3. Для каждой вкладки проверьте, соответствует ли ее позиция (начиная с 0) индексу TabController, и отобразите соответствующий значок