Flutter中start date与end date的空值校验及日期展示实现方法

直接按以下步骤修改即可，覆盖实时状态展示、提交校验两个场景：

1. 调整日期文本格式化方法 #

在原有方法基础上增加错误状态判断，空值时返回对应错误提示，非空时保持原有已选日期格式化逻辑：

String _displayText(String begin, DateTime? date, {bool showError = false}) {
  if (date != null) {
    return '$begin Date: ${date.toString().split(' ')[0]}';
  } else {
    // 触发校验时空值返回错误提示，未触发校验时展示初始引导文案
    return showError ? '* 请选择起始日期' : '请选择日期';
  }
}

2. 增加错误状态变量，动态调整组件样式 #

在对应State类中新增状态变量，控制错误提示是否展示，同时修改Text组件的样式逻辑，错误状态下文字标红提示：

// 放在State类的属性定义区
bool _showStartDateError = false;

// 修改后的日期展示组件
Text(
  _displayText('Start', startdate, showError: _showStartDateError),
  style: TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 15,
    color: _showStartDateError ? Colors.red : Colors.black,
  ),
),

3. 提交动作触发校验 #

在提交/确认按钮的点击回调中加入校验逻辑，起始日期为空时更新错误状态、展示提示，非空时走正常业务流程：

void _handleSubmit() {
  setState(() {
    _showStartDateError = startdate == null;
  });

  // 校验通过后执行业务逻辑
  if (!_showStartDateError) {
    // 此处写日期确认后的后续逻辑，比如接口请求、页面跳转等
  }
}

可选：基于Form组件的简化实现 #

如果日期选择模块在表单内，可以直接用Flutter内置的Form校验能力，不需要手动维护错误状态：

// 表单Key，放在State类属性区
final _formKey = GlobalKey<FormState>();

// 表单内的日期选择组件
Form(
  key: _formKey,
  child: Column(
    children: [
      GestureDetector(
        onTap: () async {
          // 原有弹出日期选择器的逻辑
          final selectedDate = await showDatePicker(
            context: context,
            initialDate: DateTime.now(),
            firstDate: DateTime(2020),
            lastDate: DateTime(2030),
          );
          if (selectedDate != null) {
            setState(() {
              startdate = selectedDate;
            });
          }
        },
        child: InputDecorator(
          decoration: InputDecoration(
            errorText: startdate == null ? '请选择起始日期' : null,
            border: InputBorder.none,
          ),
          child: Text(
            startdate != null 
                ? 'Start Date: ${startdate.toString().split(' ')[0]}' 
                : '请选择日期',
            style: const TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 15,
              color: Colors.black,
            ),
          ),
        ),
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // 校验通过后的业务逻辑
          }
        },
        child: const Text('确认提交'),
      )
    ],
  ),
)

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