Flutter中如何将DateRangePicker选中的值传入TextFormField？

问题根因 #

你遇到的问题核心原因是两点：

1. 没有给TextFormField绑定TextEditingController，无法主动设置输入框的文本值
2. 选中日期范围后仅更新了dateRange变量和hintText，没有将拼接好的日期字符串赋值给输入框本身的value，导致validator校验时读取的输入框值为空，触发报错。

具体修改步骤 #

• 第一步：定义TextEditingController并做好生命周期管理
  在_LemburFormState类中新增控制器定义，并重写dispose方法销毁控制器避免内存泄漏：

class _LemburFormState extends State<LemburForm> {
  final _fromKey = GlobalKey<FormState>();
  String tanggal;
  DateTimeRange dateRange;
  // 新增控制器
  final TextEditingController _tanggalController = TextEditingController();

  final List<String> errors = [];

  // 重写dispose销毁控制器
  @override
  void dispose() {
    _tanggalController.dispose();
    super.dispose();
  }

  // 原有其他代码...
}

• 第二步：选中日期后更新输入框文本
  修改pickDateRange方法，拿到选中的日期范围后，同步给控制器赋值：

Future pickDateRange(BuildContext context) async {
  final initialDateRange = DateTimeRange(
    start: DateTime.now(),
    end: DateTime.now().add(Duration(hours: 24 * 3)),
  );
  final newDateRange = await showDateRangePicker(
    context: context,
    firstDate: DateTime(DateTime.now().year - 5),
    lastDate: DateTime(DateTime.now().year + 5),
    initialDateRange: dateRange ?? initialDateRange,
    builder: (BuildContext context, Widget child) {
      return Theme(
        data: ThemeData.light().copyWith(
          primaryColor: Colors.teal,
          accentColor: Colors.teal,
          colorScheme: ColorScheme.light(primary: Colors.teal),
          buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.primary),
        ),
        child: child,
      );
    },
  );

  if (newDateRange == null) return;
  setState(() => dateRange = newDateRange);
  // 新增：拼接日期字符串赋值给输入框
  final startStr = DateFormat('dd/MM/yyyy').format(newDateRange.start);
  final endStr = DateFormat('dd/MM/yyyy').format(newDateRange.end);
  _tanggalController.text = '$startStr - $endStr';
  // 触发onChanged回调，移除校验错误
  if (_tanggalController.text.isNotEmpty) {
    removeError(error: kDateNullError);
  }
}

• 第三步：给TextFormField绑定控制器
  修改buildDateFromField方法，给TextFormField加上controller属性：

TextFormField buildDateFromField() {
  return TextFormField(
    // 绑定控制器
    controller: _tanggalController,
    // 可选：设置只读，禁止用户手动输入不符合格式的内容
    readOnly: true,
    keyboardType: TextInputType.datetime,
    onSaved: (newValue) => tanggal = newValue,
    onChanged: (value) {
      if (value.isNotEmpty) {
        removeError(error: kDateNullError);
      }
    },
    validator: (value) {
      if (value.isEmpty) {
        addError(error: kDateNullError);
        return "";
      }
      return null;
    },
    onTap: () {
      pickDateRange(context);
      FocusScope.of(context).requestFocus(new FocusNode());
    },
    decoration: InputDecoration(
      labelText: "Tanggal Lembur",
      hintText: "${getFrom()} - ${getUntil()}",
      floatingLabelBehavior: FloatingLabelBehavior.always,
    ),
  );
}

内容的提问来源于stack exchange，提问作者16_Hafidz Fadhillah Febrianto