flutter_form_builder的FormBuilderDateTimePicker无法弹出日历故障求助

问题原因 #

你代码中顶层FormBuilder组件配置了enabled: false属性，该属性会全局禁用其内部嵌套的所有表单子组件，FormBuilderDateTimePicker也会被连带设置为不可编辑状态，无法响应点击事件，自然不会弹出日历选择界面。

解决办法 #

根据你的业务需求选择对应方案即可：

• 若需要整个表单都可编辑，直接删除FormBuilder的enabled: false配置，或者将属性值改为true，参考代码：

FormBuilder(
  key: _fbKey,
  autovalidateMode: AutovalidateMode.always,
  initialValue: {
    'movie_rating': 5,
  },
  enabled: true, // 开启表单全局可编辑权限
  child: Column(
    children: <Widget>[
      FormBuilderDateTimePicker(
        onChanged: (val) => onEditing(val),
        autofocus: true,
        locale: Locale(_myLocale),
        name: "choose_date_range",
        firstDate: DateTime(2017),
        lastDate: DateTime(DateTime.now().year+1),
        format: DateFormat("yyyy-MM-dd"),
        // 其余原有配置
      ),
      // 其余表单组件
    ],
  ),
)

• 若确实需要禁用表单内其他控件，仅保留日期选择器的编辑权限，保留FormBuilder的enabled: false配置，单独给FormBuilderDateTimePicker添加enabled: true属性即可，子组件的配置优先级高于父组件的全局配置，参考代码：

FormBuilderDateTimePicker(
  enabled: true, // 单独覆盖全局禁用配置，开启当前组件编辑权限
  onChanged: (val) => onEditing(val),
  autofocus: true,
  locale: Locale(_myLocale),
  name: "choose_date_range",
  firstDate: DateTime(2017),
  lastDate: DateTime(DateTime.now().year+1),
  format: DateFormat("yyyy-MM-dd"),
  // 其余原有配置
),

• 若以上操作后问题仍存在，可排查两个常见异常场景：
  • 检查近期是否升级了flutter_form_builder依赖版本，大版本迭代可能存在API兼容性问题，可以回退到之前稳定运行的版本验证
  • 检查DateFormat格式配置与当前locale是否匹配，格式不兼容会导致组件初始化失败，无法正常弹出选择面板

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