using Future .then(_) with "return" in Dart language

Question

I've a custom elements, in which a function is calling SQL statement from the server before returning the element. The issue is: executing the SQL take long time, so the function return NULL element, and later on finish the SQL.

The initial code is:

  Element launchElement(){
        getItems();
        return(innerDiv);
    }

But due ti this issue, I tried using Future as below to control it

  Element launchElement(){
     Future fonixFuture() => new Future.value(true);
     fonixFuture()
            .then((_)=> getItems())
            .then((_)=> return(innerDiv));
 }

but got long list of errors in the Dart Editor, as below:

Multiple markers at this line
- Expected to find 
 ';'
- Expected to find 
 ';'
- Expected to find 
 ';'
- Dead code
- Unexpected 
 token ')'
- Expected an 
 identifier
- Expected an 
 identifier
- Expected to find 
 ')'

The get item function is a simple call to the server to get the output from the SQL:

 getItems(){  
    request = new HttpRequest();
    request.onReadyStateChange.listen(onData_getItems);

    request.open('POST', host+'/getItems');
    request.send(' ');  
  }

  onData_getItems(_){
    if (request.readyState == HttpRequest.DONE && request.status == 200) {   

     for(Map item in JSON.decode(request.responseText)){
         LineItem..children.add(new OptionElement(value: item['Code'], data: item['Name']));
    }         
} 
else if (request.readyState == HttpRequest.DONE &&
  request.status == 0) { 
     fonixFooter.classes..add('serverERROR');
     fonixFooter.innerHtml= "could not connect to server, contact your admin";  
}
else
  { 
     fonixFooter.classes..add('serverERROR');
     fonixFooter.innerHtml= "Failed to fetch data from server, contact your admin";  
  }

}

the custom element itself is:

class purchaseLines extends HtmlElement {
    static final tag = 'purchase-lines';
    factory purchaseLines() => new Element.tag(tag);

    var innerDiv, LineItem;

    purchaseLines.created() : super.created() {      
        innerDiv = new cardFonix().launchElement();

        LineItem = new SelectElement()
              ..children.add(new OptionElement(value: '0', data:'Stock Code'));

         var LineQty = new InputElement()
                  ..type='number'
                   ..placeholder='Qty'  ;   

        LineQty.onKeyUp.listen((e){if(LineQty.checkValidity() == false)LineQty.value='0';});
        var Lineprice = new InputElement()
             ..type='number'
             ..placeholder='price';

          Lineprice.onKeyUp.listen((e){if(Lineprice.checkValidity() == false)Lineprice.value='0';});
          innerDiv.nodes..add(LineItem)..add(LineQty)..add(Lineprice); 
    }

any thoughts?

Answer 1

This isn't legal syntax:

.then((_) => return(innerDiv));

In Dart, return is not a function. I think perhaps you just want this:

.then((_) => innerDiv);

Your function call should look something like this:

Future<Element> launchElement(){
  return new Future.value(true)
        .then((_) => getItems())
        .then((_) => innerDiv);
}