更改选项卡中标签的文本样式

Question

这看起来很简单。我正在尝试更改选项卡标签的文本样式。这是我的选项卡小部件

TabBar(

                unselectedLabelStyle:  TextStyle(fontSize: 22.0,color: Colors.red),
                labelStyle:  TextStyle(fontSize: 22.0,color: Colors.red),
                tabs: [
                  if (venue.availableService.supportsChat)Text('chat'),
                  if (venue.availableService.supportsTableService) Text('Table'),
                  if (venue.availableService.supportsCollection) Text('Collection'),
                  if (venue.availableService.supportsDelivery) Text('Delivery'),
                ],
                controller: tabController,
              ),

如何将标签连接到文本小部件？

编辑： 可能应该使用选项卡小部件：

Tab(text:chat)

但还是没有达到想要的效果。

Answer 1

简单：

final List<Widget> myTabs = [
    Tab(
      child: Text(
        'Top Rated',
        style: TextStyle(
          fontFamily: kFontFamily,
          fontSize: 14,
          fontWeight: FontWeight.w600,
          //color: Color(0xFF818181),
          //color: kPrimaryColor,
        ),
      ),
    ),
    Tab(
      child: Text(
        'Newest',
        style: TextStyle(
          fontSize: 14,
          fontFamily: kFontFamily,
          fontWeight: FontWeight.w600,
          //color: kPrimaryColor,
        ),
      ),
    )];

然后在

TabBar()

中获得更多样式：

TabBar(
     isScrollable: true,
     labelColor: Colors.white,
     unselectedLabelColor: Colors.black,
     controller: _controller,
     indicatorColor: kAccentColor,
     physics: BouncingScrollPhysics(),
     indicator: BoxDecoration(
       borderRadius: BorderRadius.circular(7),
       color: Color.fromRGBO(255, 87, 157, 1),
     ),
     tabs: myTabs,
),

Answer 2

现在变得更容易了： 使用

labelStyle

和

unselectedLabelStyle

突出显示活动选项卡：

TabBar(
              tabAlignment: TabAlignment.center,
              indicator: const BoxDecoration(),
              labelStyle: TextStyle(
                fontSize: 12,
                color: Colors.green,
              ),
              unselectedLabelStyle: TextStyle(
                fontSize: 12,
                color: Colors.grey,
              ),
              tabs: [
                Tab(
                  text: 'Tab 1',
                ),
                Tab(text: 'Tab 2'),
              ],
            )