Flutter实现选择开始日期后自动填充结束日期的技术需求

要实现选择开始日期后自动填充结束日期的功能，只需在确认选择开始日期后，计算目标结束日期并更新结束日期输入框的控制器即可。以下是修改后的完整代码：

Row( // 假设原代码置于Row组件中以实现并排布局
  children: [
    SizedBox(
      width: MediaQuery.of(context).size.width * 0.4,
      child: TextFormField(
        controller: startdatecntr,
        keyboardType: TextInputType.datetime,
        decoration: const InputDecoration(
          errorStyle: TextStyle(fontSize: 0.05),
          prefixIcon: Icon(Icons.calendar_month),
          border: OutlineInputBorder(),
          hintStyle: TextStyle(fontSize: 12),
          labelStyle: TextStyle(fontSize: 12),
          labelText: 'Start Date',
          hintText: 'yyyy-MM-dd',
        ),
        onTap: () async {
          DateTime? pickedDate = await showDatePicker(
            context: context,
            initialDate: DateTime.now(),
            firstDate: DateTime(1991),
            lastDate: DateTime(2101),
          );

          if (pickedDate != null) {
            String formattedDate = DateFormat('yyyy-MM-dd').format(pickedDate);
            
            setState(() {
              startdatecntr.text = formattedDate;
              
              // 自动填充结束日期：示例为开始日期加7天，可按需调整规则
              DateTime endDate = pickedDate.add(const Duration(days: 7));
              String formattedEndDate = DateFormat('yyyy-MM-dd').format(endDate);
              enddatecntr.text = formattedEndDate;
            });
          } else {
            print("Date is not selected");
          }
        },
        validator: MultiValidator([
          RequiredValidator(errorText: 'Required*')
        ]),
      ),
    ),
    const SizedBox(width: 13),
    SizedBox(
      width: MediaQuery.of(context).size.width * 0.5,
      child: TextFormField(
        autofocus: false,
        controller: enddatecntr,
        keyboardType: TextInputType.datetime,
        decoration: const InputDecoration(
          errorStyle: TextStyle(fontSize: 0.05),
          prefixIcon: Icon(Icons.calendar_month),
          counterText: "",
          border: OutlineInputBorder(),
          hintStyle: TextStyle(fontSize: 12),
          labelStyle: TextStyle(fontSize: 12),
          labelText: 'End Date',
          hintText: ' yyyy-MM-dd'),
        onTap: () async {
          DateTime? pickedDate = await showDatePicker(
            context: context,
            // 结束日期选择器初始值设为已填充的日期，无填充则用当前日期
            initialDate: enddatecntr.text.isNotEmpty 
                ? DateFormat('yyyy-MM-dd').parse(enddatecntr.text) 
                : DateTime.now(),
            // 限制结束日期不能早于已选择的开始日期
            firstDate: startdatecntr.text.isNotEmpty 
                ? DateFormat('yyyy-MM-dd').parse(startdatecntr.text) 
                : DateTime(1991),
            lastDate: DateTime(2101),
          );

          if (pickedDate != null) {
            String formattedDate = DateFormat('yyyy-MM-dd').format(pickedDate);
            
            setState(() {
              enddatecntr.text = formattedDate;
            });
          } else {
            print("Date is not selected");
          }
        },
      ),
    ),
  ],
)

关键修改说明： #

• 自动填充逻辑：在开始日期选择完成后的setState中，根据需求计算目标结束日期，格式化后直接赋值给enddatecntr.text
• 优化结束日期选择器：调整结束日期选择器的初始值和可选范围，确保用户无法选择早于开始日期的日期，提升交互合理性
• 代码简化：移除冗余的.then链式调用，改用async/await写法让代码更清晰易读

自定义调整： #

如果希望结束日期默认与开始日期相同，只需将计算结束日期的代码改为：

DateTime endDate = pickedDate;

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