Flutter：从 http 调用中捕获 Future 响应作为普通列表

Question

I am trying to make my previously static app, dynamic by making calls to the backend server.

This is what my service looks like

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');
  }
}

And my model looks like this :

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']);
  }

}

I have a utils method within which I am capturing the http request/response data; which would then use that to create a DropDown Widget ( or display it within a text)

My earlier dummy data was a list; I am wondering how best I can convert this Future> to 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}'];
  }


}

PS I have looked at some posts but I was completely bowled over since I am a Flutter Newbie.

Is there an easier way for this to happen.

Thanks,

The widget which would display the content from the http call

   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(),
    );

Answer 1

I am wondering how best I can convert this Future to List

Future<List<TemplateInfoModel>> fetchTemplates() should return a List that you're expecting. You may want to consider either using FutureBuilder or StreamBuilder to update the UI elements on your screen. Or if you're not keen on using either of those, you can just call the Future and update the List on your current screen.

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

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