如何允许在Flutter中从FutureBuilder导航到另一个页面

时间:2020-05-25 09:11:21

标签: flutter dart flutter-layout flutter-navigation flutter-http

在下面的代码中,我正在创建一个登录屏幕,在其中执行API调用之后,因此在获取了要导航至下一个屏幕的数据之后,我正在从未来的构建器中进行导航,但是它不起作用。

所以,请帮忙。

    futureBuilder<Album>(
                        future: userFuture,
                        builder: (ctx, snapshot) {
                          if (snapshot.hasData) {
                            isApiCall = false;
                            print("hasDat");
                            if (snapshot.data.errorMsg == "") {
                              _showToast(snapshot.data.errorMsg);
                            } else {

// I added this part to navigate screen, but it did not works
                               Navigator.of(context).push(MaterialPageRoute(builder: (context) => Home()));
                              //_showToast(snapshot.data.errorMsg);
                              //return Home();
                              if(snapshot.connectionState == ConnectionState.waiting){
                                return CircularProgressIndicator();
                              }
                              else{

                                navigateToNextScreen=true;
                              }
                              Navigator.of(context).push(MaterialPageRoute(builder: (context) => Home()));
                              //return Text(snapshot.data.errorMsg);
                            }
                          } else if (snapshot.hasError) {

                          }

                          return CircularProgressIndicator();
                        },
                      )),

按钮中触发逻辑的逻辑,

onPressed: () {
                          setState(() {
                            isApiCall = true;

                            userFuture=_futureAlbum();
                            print(_futureAlbum);
                          });
                        },

下面是statefull小部件中的future对象,

Future<Album> userFuture;

       @override
      void initState() {

        super.initState();
        userFuture=_futureAlbum();
      }

    Future<Album>_futureAlbum()async{
        if (isApiCall){
        return await createAlbum("http://api/login01", {
                                      'userPhoneNumber':
                                          "91" + controller.text.toString(),
                                      'userPassword':
                                          _passwordController.text.toString()
                                    });}
        else{
          return null;
        }

      }

下面是上述函数正在调用的API的调用类和方法

class Album {
  final String errorMsg ;
  final Map success;

  Album({this.errorMsg, this.success});

  factory Album.fromJson(Map<String, dynamic> json) {
    if (json.containsKey("error")){
      print(json["error"]["errorMsg"]);
      print("sfsdfdsdfsfd");
      return Album(errorMsg:json["error"]["errorMsg"].toString());
    }

    else{return Album(success:json["success"]);}
  }
}
Future<Album> createAlbum(String url, Map reqBody) async {
      final Map success={};
      final Map errorMsg={};
      final Map res={};
      final http.Response response = await http.post(
        url,
        headers: <String, String>{
          'Content-Type': 'application/json',
        },
        body: jsonEncode(reqBody),
      );

      if (response.statusCode == 200) {
        print(response.body);
        Map<dynamic, dynamic>res = json.decode(response.body);
        return Album.fromJson(json.decode(response.body));
      } else {
        throw Exception('Failed to create album.');
      }
    }

1 个答案:

答案 0 :(得分:0)

在这里使用 Memoization 技术是一个不错的选择。 Memoization 常用于函数式编程和递归,可用于将函数返回的值保存在内存中,以便函数不必再次运行。除此之外,唯一的选择是不更改页面并将整个小部件嵌套在 Futurebuilder 本身中。