如何使用FutureBuilder创建动态表单

Question

我想创建动态表单并在提交表单后获取数据。我有一个API，我从这个API得到问题。在应用程序中，用户将回答问题并将结果保存到API。如何创建动态表单并检索用户输入。请帮忙。

FutureBuilder<List<ConditionType>>(
        future: _api.getConditionTypes(job.sectorId),
        builder: (context, snapshot) {
//Create Form
}

Answer 1

尝试使用json_to_form，如果你可以分享响应的结构，我可以帮助调整我必须为我自己的项目做的插件。我应该提一下，使用这个实现DropDownButton往往会在显示值时出现问题，尽管它会保存它们。

Answer 2

我让Json转换成为对象的模型，然后发出请求：

class Model {
  String projectName;
  String datePlan;
  String activityName;
  String hours;

  TimeSheetModel({this.projectName, this.datePlan, this.activityName, this.hours});

  TimeSheetModel.fromJson(Map<String, dynamic> json){
    projectName = json["ProjectName"];
    datePlan = json["DatePlan"];
    activityName = json["ActivityName"];
    hours = json["Hours"];
  }

  Map toMap() {
    var map = new Map<String, dynamic>();
    map["ProjectName"] = projectName;
    map["DatePlan"] = datePlan;
    map["ActivityName"] = activityName;
    map["Hours"] = hours;
    return map;
  }

}

方法fromJson将Json数据转换为您的对象以获取GET请求，并将Map对象转换为Json以获取POST或PUT请求。

发出GET请求：

  getProjects() async {
    var url = 'url';
    var res = await http
        .get(Uri.encodeFull(url), headers: {"Accept": "application/json", 
        "charset": "UTF-8"});
    data = json.decode(res.body);
    setState(() {
      Model data = Model.fromJson(resBody);
    });
  }

发出POST请求：

  post() async {
    var url = 'url';
    http.post(url, body:
    data.toMap()).then((response) {
      print("Response status: ${response.statusCode}");
      print("Response body: ${response.body}");
    });
  }