如何使用 Flutter Form Builder 从数据库查询中创建和使用单选字段选项

Question

我在我的项目中使用 flutter_form_builder，并希望在加载表单时创建并加载 formbuilderfieldoptions。我的策略是查询数据库并在上一页中的浮动按钮的按钮按下方法上创建选项。将选项传递到表单并在单选组中使用它们的最佳方式是什么。

我有使用静态无线电组的代码，但不知道如何使用预定义的小部件加载它们。我可以在上一页的按钮按下事件中创建它们并使用提供程序加载它们吗？

FormBuilderRadioGroup(
  name: "various_options",
  decoration: InputDecoration(
    contentPadding: EdgeInsets.all(12.0),
    labelText: "Select an Option",
    labelStyle: TextStyle(
      fontSize: _user.fontsize, fontWeight: FontWeight.normal)),
    options: const [
      FormBuilderFieldOption(value: 100, child: Text('Option 1')),
      FormBuilderFieldOption(value: 1121, child: Text('Option 2')),
      FormBuilderFieldOption(value: 211, child: Text('Option 3')),
      FormBuilderFieldOption(value: 32, child: Text('Option 4')),
      FormBuilderFieldOption(value: 44, child: Text('Option 5')),
    ],
    orientation: OptionsOrientation.vertical,
    activeColor: Colors.teal,
    initialValue: person.role,
),

Answer 1

将表单创建为单独的有状态页面小部件。然后，您可以将选项列表 (List<MyData>) 作为参数传递给小部件，例如：

class MyData {
  final int key;
  final String value;
  ...
}

...
final List<MyData> options;
const FormPageWidget({Key? key, required this.options}) : super(key: key);

然后在你的 FormBuilderRadioGroup 构造函数中：

...
options: List<FormBuilderFieldOption>.generate(
  widget.options.length,
  (index) {
    return FormBuilderFieldOption(
      value: widget.options[index].key,
      child: Text(widget.options[index].value)
    );
  },
  growable: false,
);
...

如何使用 Flutter Form Builder 从数据库查询中创建和使用单选字段选项

How to create and use radio field options from a database query using Flutter Form Builder

flutter

flutter-form-builder