Flutter实现点击切换Text颜色时报invalid constant value错误如何解决

报错原因 #

你遇到的invalid constant value错误是因为你给Row的children属性添加了const修饰符，但InkWell组件包含onTap回调函数，函数属于非常量值，无法被包含在常量集合中，直接触发编译错误。

另外你原有代码中onTap: () => Colors.blue的写法是无效的，onTap是无返回值的回调函数，返回色值不会对UI产生任何影响，动态修改组件样式需要通过状态更新触发UI重绘实现。

修复方案 #

1. 解决编译报错 #

直接删除Row的children前的const修饰符即可。

2. 实现点击切换颜色的交互 #

因为需要动态修改UI，你需要将当前组件改为StatefulWidget，新增变量记录当前选中的条目，点击时调用setState更新状态即可。

完整可运行示例代码：

import 'package:flutter/material.dart';

class ToggleTextDemo extends StatefulWidget {
  const ToggleTextDemo({super.key});

  @override
  State<ToggleTextDemo> createState() => _ToggleTextDemoState();
}

class _ToggleTextDemoState extends State<ToggleTextDemo> {
  // 初始值-1表示默认没有选中项，所有文本为灰色
  int currentSelectedIndex = -1;
  final List<String> textContents = ["Click 1", "Click 2", "Click 3"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          // 已删除const修饰符
          children: List.generate(textContents.length, (index) {
            return InkWell(
              onTap: () {
                setState(() {
                  currentSelectedIndex = index;
                });
              },
              child: Text(
                textContents[index],
                style: TextStyle(
                  // 选中项为蓝色，未选中为灰色
                  color: currentSelectedIndex == index ? Colors.blue : Colors.grey,
                  fontSize: 15.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            );
          }),
        ),
      ),
    );
  }
}

如果不想批量生成组件，单独编写三个InkWell也可以，分别给三个组件对应索引0、1、2，色值判断逻辑和上述代码一致即可。

内容的提问来源于stack exchange，提问作者Tinovimba Mawoyo