Flutter：点击FormBuilderChoiceChip更新FormBuilderDateTimePicker日期值

嘿，作为Flutter新手，这个需求其实很好实现，核心就是用状态管理跟踪选中的天数，然后动态计算并更新日期选择器的初始值。我给你整理了完整的实现方案：

实现步骤 #

• 把你的组件转为StatefulWidget，这样才能维护选中天数和日期的状态
• 定义变量存储选中的天数，以及动态计算的目标日期
• 给FormBuilderChoiceChip添加onChanged回调，更新选中状态并计算新日期
• 让FormBuilderDateTimePicker的initialValue绑定到动态计算的日期

完整代码示例 #

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:intl/intl.dart';

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

  @override
  State<DateUpdateDemo> createState() => _DateUpdateDemoState();
}

class _DateUpdateDemoState extends State<DateUpdateDemo> {
  // 存储选中的天数
  int? _selectedDays;
  // 动态计算的目标日期
  late DateTime _targetDate;

  @override
  void initState() {
    super.initState();
    // 初始化目标日期为当前日期
    _targetDate = DateTime.now();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        FormBuilderChoiceChip(
          attribute: "custom_days",
          spacing: 3.0,
          // 选中选项时触发的回调
          onChanged: (value) {
            setState(() {
              _selectedDays = value as int?;
              // 根据选中天数计算未来日期，未选中则回到当前日期
              if (_selectedDays != null) {
                _targetDate = DateTime.now().add(Duration(days: _selectedDays!));
              } else {
                _targetDate = DateTime.now();
              }
            });
          },
          options: const [
            FormBuilderFieldOption(
              child: Text("3 Days"),
              value: 3,
            ),
            FormBuilderFieldOption(
              child: Text("5 Days"),
              value: 5,
            ),
            FormBuilderFieldOption(
              child: Text("7 Days"),
              value: 7,
            ),
          ],
        ),
        FormBuilderDateTimePicker(
          attribute: "date",
          inputType: InputType.date,
          format: DateFormat("dd-MM-yyyy"),
          decoration: const InputDecoration(labelText: "Select Date"),
          // 绑定动态计算的目标日期作为初始值
          initialValue: _targetDate,
        ),
      ],
    );
  }
}

关键细节说明 #

• 状态更新：通过setState触发组件重建，确保日期选择器能实时响应选中天数的变化
• 日期计算：用DateTime.now().add(Duration(days: _selectedDays!))快速得到未来N天的日期
• 空值处理：判断_selectedDays是否为null，避免空指针异常，未选中时默认显示当前日期

这样你点击不同的选项芯片时，日期选择器的初始值就会自动更新为对应的未来日期啦！

内容的提问来源于stack exchange，提问作者Mohammed Safee Uddin