从FutureBuilder导航回到页面

时间:2019-04-23 16:04:41

标签: dart flutter future

我有一个用于我的应用程序的提交表单,其中有一些用户在表单中填写的数据。在此过程中,我需要从外部API进行GET,然后使用该数据在数据库中创建一个条目。一旦按下“提交”按钮,所有这些都会发生,然后,我希望能够返回到我的主页路线。

我不确定在不使用FutureBuilder的情况下如何从Future函数获取数据,即使我不需要构建小部件,我也只需要数据。

这是我目前拥有的:

_populateDB() {
    return new FutureBuilder(
      future: fetchPost(latitude, longitude),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          _createJson(snapshot.data);
          Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => HomeScreen()
            ),
          );
        } else if (snapshot.hasError) {
          return new Text("${snapshot.error}");
        }
        return new CircularProgressIndicator();
      },
    );
}

在屏幕上按下按钮时,将调用_populateDB()函数。我想做的是从fetchPost(纬度,经度)获取数据,在_createJson(snapshot.data)函数中使用该数据,最后返回HomeScreen()。

我还没有实现_createJson(snapshot.data),但是当前当我使用onPressed调用此方法时,它不会返回到HomeScreen(),并且我不确定为什么。

1 个答案:

答案 0 :(得分:0)

您可以以异步方式或同步方式从Future function获取数据。

1异步方式

很简单,您可以使用dart中的Native Future API。方法then是一个回调方法,当您的Future完成时将调用该方法。如果您的将来因某些错误而完成,则也可以使用catchError方法。

fetchPost(latitude, longitude).then(  
      (fetchPostResultsData) {
           if (fetchPostResultsData != null)
               print (fetchPostResultsData);
      }  ).catchError(  
               (errorFromFetchPostResults){
                   print(errorFromFetchPostResults);
               } 
       );

通过这种方法,您的UI不会被网络等待的结果阻止。

2同步方式

您可以使用Dart关键字asyncawait来保持通话同步。在您的情况下,您必须将_populateDB方法转换为async方法,并从await结果中转换fetchPost

_populateDB() async {
    var data = await fetchPost(latitude, longitude);
    // just execute next lines after fetchPost returns something.
    if (data !=null ){
        _createJson(snapshot.data);
        //... do your things
    } 
     else {
         //... your handle way
      }
 }

使用这种方法,您的_populateDB函数将等待fetchPost阻止UI Isolete的结果,并在获取结果后立即执行下一条指令。

关于导航,如果HomeScreen是堆栈中先前的先前小部件,则只需要Navigator.pop(context)调用,但是如果HomeScreen上方的Stack中还有其他小部件,则最好使用Navigator.pushReplacement调用。

This文章详细说明了Navigator方法的效果。希望对您有所帮助。