Flutter：将来自 http 调用的 Future 响应捕获为普通列表答案

【问题标题】：Flutter : Capture the Future response from a http call as a normal ListFlutter：将来自 http 调用的 Future 响应捕获为普通列表
【发布时间】：2019-09-06 08:38:27
【问题描述】：

我正在尝试通过调用后端服务器来使我以前的静态应用程序动态化。

这就是我的服务的样子

String _url = "http://localhost:19013/template/listAll";

Future<List<TemplateInfoModel>> fetchTemplates() async {
  final response =
  await http.get(_url);
  print(response.statusCode);

  if (response.statusCode == 200) {
    // If the call to the server was successful, parse the JSON
    Iterable l = json.decode(response.body);
    List<TemplateInfoModel> templates = l.map((i) => TemplateInfoModel.fromJson(i)).toList();
    return templates;
  } else {
  // If that call was not successful, throw an error.
  throw Exception('Failed to load post');
  }
}

我的模型看起来像这样：

class TemplateInfoModel {
  final String templateId;
  final String messageTag;
  final String message;
  final String messageType;


  TemplateInfoModel({this.templateId, this.messageTag, this.message,
    this.messageType});

  factory TemplateInfoModel.fromJson(Map<String, dynamic> json) {
    return TemplateInfoModel ( templateId: json['templateId'], messageTag : json['messsageTag'], message : json ['message'] , messageType : json['messageType']);
  }

}

我有一个 utils 方法，我在其中捕获 http 请求/响应数据；然后它将使用它来创建一个 DropDown 小部件（或在文本中显示它）

我之前的虚拟数据是一个列表；我想知道如何最好地将这个 Future> 转换为 List

class SMSTemplatingEngine {

    var _SMSTemplate; //TODO this becomes a Future<List<TemplateInfoModels>>
   // TemplateInfoService _templateInfoService;

    SMSTemplatingEngine(){
      _SMSTemplate=fetchTemplates();
    }

//  var _SMSTemplate = {
//    'Reminder':
//        'Reminder : We’re excited to launch a new feature on our platform that will revolutionize your Facebook marketing and triple your ROI. Visit url.com to learn more',
//    'New Message':
//        'New Message: We’re excited to launch a new feature on our platform that will revolutionize your Facebook marketing and triple your ROI. Visit url.com to learn more',
//    'Connecting Again':
//        'Connecting Again : We’re excited to launch a new feature on our platform that will revolutionize your Facebook marketing and triple your ROI. Visit url.com to learn more',
//  };

  List<String> getKeys(){
    List<String> smsKeys = new List();
    for ( var key in _SMSTemplate.keys)
      smsKeys.add(key);
    return smsKeys;
  }

  String getValuePerKey(String key){
    return _SMSTemplate['${key}'];
  }


}

附：我看过一些帖子，但因为我是 Flutter 新手，所以我完全被打倒了。

有没有更简单的方法可以做到这一点。

谢谢，

显示来自 http 调用的内容的小部件

   var templateMessagesDropDown = new DropdownButton<String>(
      onChanged: (String newValue) {
        setState(() {
          templateMsgKey = newValue;
          print("Selcted : ${templateMsgKey.toString()} ");
        });
      },
      // value: _defaultTemplateValue,
      style: textStyle,
      //elevation: 1,
      hint: Text("Please choose a template"),
      isExpanded: true,
      //
      items: smsEngine.getKeys().map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );

【问题讨论】：

使用构建ListView.builder的FutureBuilder - 类似于this
@pskink 我不想打电话给 FutureBuilder，我希望我能够创建一个 List 而不是 Future>
那你想用那个列表做什么？
@pskink 在创建表单的构建器方法中被调用；
正如我所说：在您的 build() 方法中使用 FutureBuilder

标签： dart flutter dart-webui

【解决方案1】：

我想知道如何最好地将这个 Future 转换为 List

Future<List<TemplateInfoModel>> fetchTemplates() 应该返回您期望的列表。您可能需要考虑使用 FutureBuilder 或 StreamBuilder 来更新屏幕上的 UI 元素。或者，如果您不喜欢使用其中任何一个，您可以调用 Future 并更新当前屏幕上的列表。

List<TemplateInfoModel> _listTemplateInfoModel = [];
...

fetchTemplates().then((value){
  setState((){
    _listTemplateInfoModel = value;
  });
});

【讨论】：