如何验证GestureDetector组件中的非表单字段？

你可以通过以下步骤实现未选择内容时的错误提示：

1. 添加错误状态变量
   在你的State类中新增布尔变量控制错误提示的显示：

bool showDayError = false;

2. 在验证时机触发检查
   比如在提交按钮的点击事件里，检查选中列表是否为空：

onPressed: () {
  if (selectedDay == null || selectedDay!.isEmpty) {
    setState(() {
      showDayError = true;
    });
  } else {
    // 执行你的提交逻辑
    setState(() {
      showDayError = false;
    });
  }
},

3. 在UI中插入错误提示
   在Wrap组件下方添加错误提示文本：

Column(
  children: [
    Wrap(
      alignment: WrapAlignment.center,
      children: dayList.map(
        (day) {
          bool isSelected = selectedDay?.contains(day) ?? false;
          return GestureDetector(
            onTap: () {
              setState(() {
                if (selectedDay?.contains(day) ?? false) {
                  selectedDay?.removeWhere((element) => element == day);
                } else {
                  if ((selectedDay?.length ?? 0) < 7) {
                    selectedDay?.add(day);
                  }
                }
                // 选择内容后自动隐藏错误提示
                if ((selectedDay?.length ?? 0) > 0) {
                  showDayError = false;
                }
              });
              print(selectedDay);
            },
            // 补全GestureDetector的子组件示例（根据你的UI需求调整）
            child: Container(
              margin: EdgeInsets.symmetric(horizontal: 4),
              padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
              decoration: BoxDecoration(
                color: isSelected ? Colors.blue : Colors.grey.shade200,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Text(day),
            ),
          );
        },
      ).toList(),
    ),
    // 错误提示文本
    if (showDayError)
      Text(
        "请至少选择一天",
        style: TextStyle(color: Colors.red, fontSize: 12),
      ),
  ],
)

4. 优化空安全处理（可选）
   建议将selectedDay初始化为空列表而非可空变量，减少空检查代码：

List<String> selectedDay = []; // 替换原有的可空声明

这样用户未选择任何选项时，点击提交会显示红色错误提示；一旦选择内容，错误提示会自动隐藏。

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