Flutter中如何使用选中颜色变量的浅色调

你当前的代码尝试通过shade200获取容器颜色的浅色调文本，但存在两个明显问题：

• 带Accent后缀的Material颜色（如Colors.greenAccent）本身属于浅色调，它们的shade200会过浅，导致文本与容器对比度极低，难以阅读
• 部分亮色（如Colors.yellow）的shade200与容器颜色区分度不足

下面提供两种可靠的解决方案：

方案一：生成同色相的适配浅色调 #

通过HSL颜色模型动态调整亮度，确保文本与容器始终有合适的对比度，同时保持同色相的色调关联：

import 'dart:ui';

List<Color> colorlist=[
  Colors.red,
  Colors.orange,
  Colors.greenAccent,
  Colors.blue,
  Colors.yellow,
];

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

  // 生成适配的同色相浅色调文本颜色
  Color getLightTint(Color color) {
    final hsl = HSLColor.fromColor(color);
    // 深色容器用高亮浅色调，浅色容器用稍深的同色调
    final targetLightness = hsl.lightness < 0.5 ? 0.8 : 0.3;
    return hsl.withLightness(targetLightness).toColor();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: colorlist.length,
          itemBuilder: (context,index){
            final containerColor = colorlist[index];
            return Container(
              height: 100,
              width: double.infinity,
              color: containerColor,
              child: Center(
                child: Text('Sample',style: TextStyle(
                  color: getLightTint(containerColor),
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),),
              ),
            );
          }),
    );
  }
}

方案二：用黑白对比色保证可读性 #

如果不需要严格的同色相浅色调，直接根据容器颜色亮度选择黑色或白色文本，是最省心的高对比度方案：

List<Color> colorlist=[
  Colors.red,
  Colors.orange,
  Colors.greenAccent,
  Colors.blue,
  Colors.yellow,
];

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

  // 根据容器亮度选择黑白文本
  Color getContrastTextColor(Color color) {
    return color.computeLuminance() > 0.5 ? Colors.black : Colors.white;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: colorlist.length,
          itemBuilder: (context,index){
            final containerColor = colorlist[index];
            return Container(
              height: 100,
              width: double.infinity,
              color: containerColor,
              child: Center(
                child: Text('Sample',style: TextStyle(
                  color: getContrastTextColor(containerColor),
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),),
              ),
            );
          }),
    );
  }
}

内容的提问来源于stack exchange，提问作者Irfan Ganatra