Flutter深色模式下Tab文本为何显示黑色？能否自动适配？

无需为每个主题手动设置白色文本，通过正确配置主题或利用系统默认的主题颜色体系，就能实现Tab文本颜色自动适配浅色/深色模式。

问题原因 #

当前代码中的TabBar未关联主题的文本颜色配置，导致深色模式下无法自动切换到浅色文本，出现黑字配深灰背景的问题。

解决方案 #

以下是几种高效的实现方式，按推荐程度排序：

1. 利用ColorScheme自动适配（最简洁）

Flutter的ColorScheme会根据brightness自动生成一套适配当前模式的颜色体系，TabBar默认会使用colorScheme.onSurface作为文本颜色（浅色模式为黑色，深色模式为白色）。只需修改ThemeData的配置：

theme: ThemeData(
  colorScheme: ColorScheme.fromSwatch(
    primarySwatch: Colors.cyan,
    brightness: Brightness.light,
  ),
),
darkTheme: ThemeData(
  colorScheme: ColorScheme.fromSwatch(
    primarySwatch: Colors.cyan,
    brightness: Brightness.dark,
  ),
),

2. 全局配置TabBarTheme

如果需要自定义选中/未选中Tab的文本颜色，可以在ThemeData中单独配置tabBarTheme，让颜色跟随主题模式切换：

theme: ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.cyan,
  primarySwatch: Colors.cyan,
  tabBarTheme: const TabBarTheme(
    labelColor: Colors.black,       // 浅色模式选中Tab文本色
    unselectedLabelColor: Colors.grey, // 浅色模式未选中Tab文本色
  ),
),
darkTheme: ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.cyan,
  primarySwatch: Colors.cyan,
  tabBarTheme: const TabBarTheme(
    labelColor: Colors.white,       // 深色模式选中Tab文本色
    unselectedLabelColor: Colors.grey, // 深色模式未选中Tab文本色
  ),
),

3. 单个Tab使用主题文本样式

若不想全局配置，可直接在Tab的Text组件中使用当前主题的文本样式，实现颜色自动适配：

TabBar(
  isScrollable: true,
  tabs: [
    Tab(child: Text('Tab 0', style: Theme.of(context).textTheme.bodyLarge)),
    Tab(child: Text('Tab 1', style: Theme.of(context).textTheme.bodyLarge))
  ]
)

修改后的完整代码示例 #

import 'package:flutter/material.dart';

void main() {
    runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Demo',
            theme: ThemeData(
                colorScheme: ColorScheme.fromSwatch(
                    primarySwatch: Colors.cyan,
                    brightness: Brightness.light,
                ),
            ),
            darkTheme: ThemeData(
                colorScheme: ColorScheme.fromSwatch(
                    primarySwatch: Colors.cyan,
                    brightness: Brightness.dark,
                ),
            ),
            home: const MyHomePage(),
        );
    }
}

class MyHomePage extends StatefulWidget {
    const MyHomePage({ Key? key }) : super(key: key);

    @override
    State<MyHomePage> createState() => PageState();
}

class PageState extends State<MyHomePage> {
    int counter = 0;

    @override
    Widget build(BuildContext context) {
        return DefaultTabController(
            length: 2,
            child: Scaffold(
                appBar: AppBar(
                    title: const Text('Demo'),
                    centerTitle: true,
                    bottom: const TabBar(
                        isScrollable: true,
                        tabs: [
                            Tab(child: Text('Tab 0')),
                            Tab(child: Text('Tab 1'))
                        ]
                    )
                ),
                body: TabBarView(
                    children: [
                        Scaffold(
                            body: Center(
                                child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: <Widget> [
                                        const Text('You have pushed the button this many times:'),
                                        Text('${counter}', style: Theme.of(context).textTheme.headline4)
                                    ]
                                )
                            ),
                            floatingActionButton: FloatingActionButton(
                                onPressed: incrementCounter,
                                tooltip: 'Increment',
                                child: const Icon(Icons.add),
                            )
                        ),
                        Scaffold()
                    ]
                )
            )
        );
    }

    void incrementCounter() {
        setState(() {
            counter++;
        });
    }
}

内容的提问来源于stack exchange，提问作者e-info128