Flutter FutureBuilder 显示进度指示器

Question

Flutter FutureBuilder 显示进度指示器

4

我有一个按钮，按下它会将某些东西插入到数据库中并将用户重定向到另一个页面。我正试图实现 FutureBuilder，它应该在一切完成之前显示 CircularProgressIndicator。

这是我的函数：

Future<bool> insertPhoneNumber(String phoneNumber) async {
    String token = await getToken();

    if (token.isNotEmpty) {
      var body = jsonEncode({'token': token, 'userID': user.getUserID(), 'phoneNumber': phoneNumber});

      print(body.toString());

      var res = await http.post((baseUrl + "/insertPhoneNumber/" + user.getUserID()),
          body: body,
          headers: {
            "Accept": "application/json",
            "content-type": "application/json"
          });

      if (res.statusCode == 200) {
        print("Insert Phone Number is OK");
        notifyListeners();
        return true;
      } else {
        print("Insert Phone Number not OK");
        notifyListeners();
        return false;
      }
    } else {
      print("Insert Phone Number failed due to unexisting token");
    }
  }

这是一个触发数据库交互的按钮:

RaisedButton(
                  color: Color.fromRGBO(105, 79, 150, 1),
                  onPressed: () {
                    var user = Provider.of<UserRepository>(context);
                    String completePhoneNumber = _selectedDialogCountry.phoneCode + phoneNumberController.text;
                    FutureBuilder(
                      future: user.insertPhoneNumber(completePhoneNumber),
                      builder: (BuildContext context, AsyncSnapshot snapshot) {
                        if (snapshot.connectionState != ConnectionState.done) {
                          return CircularProgressIndicator(
                              backgroundColor: Colors.blue);
                        } else {
                          return Dashboard();
                        }
                      },
                    );
                  },
                  textColor: Colors.white,
                  child: Text("SAVE"),
                )

它更新了数据库，但没有其他任何反应。没有进度指示器，也没有重定向到Dashboard。

编辑

这是我的完整构建方法：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          padding: EdgeInsets.all(8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              AutoSizeText(
                'What is your phone number?',
                style: TextStyle(fontSize: 30),
                maxLines: 1,
              ),
              Row(
                children: <Widget>[
                  SizedBox(
                    width: 9.0,
                    child: Icon(Icons.arrow_downward),
                  ),
                  SizedBox(width: 8.0),
                  SizedBox(
                      width: 120.0,
                      height: 65.0,
                      child: Card(
                        child: ListTile(
                          onTap: _openCountryPickerDialog,
                          title: _buildDialogItem(_selectedDialogCountry),
                        ),
                      )),
                  Expanded(
                    child: TextField(
                        autofocus: true,
                        keyboardType: TextInputType.number,
                        decoration:
                            InputDecoration(border: OutlineInputBorder())),
                  ),
                ],
              ),
              SizedBox(
                width: 100,
                child: RaisedButton(
                  color: Color.fromRGBO(105, 79, 150, 1),
                  onPressed: () {
                    print("Test");
                  },
                  textColor: Colors.white,
                  child: Text("SAVE"),
                ),
              )
            ],
          )),
    );
  }

- harunB10

你能展示一下你提到的RaisedButton()所在的完整类吗？并且你尝试使用AsyncSnapshot上的hasError()来获取异步函数可能出现的问题了吗？ - Logemann

我已经编辑了我的问题并发布了完整的 build 方法。这是一个简单的 PhoneNumber 类和 build 在 PhoneNumberState 类内部。 - harunB10

你好，你找到任何解决方案了吗？我有类似的问题。 - mrapi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Farmaan Elahi · Accepted Answer

由于FutureBuilder未附加到Widget树上，所以它不起作用。一旦未来状态未完成，它只是创建一个实例Dashboard。您不应该在此处使用FutureBuilder，而是可以基于某些变量设置子部件，当未来完成时，在该变量上调用setState以更新状态，这将反过来使用新的状态值重建小部件。

类似于这样：

var isLoading = false;

void insertNumber(){
 var user = Provider.of<UserRepository>(context);
 String completePhoneNumber = _selectedDialogCountry.phoneCode + phoneNumberController.text;
 setState(() => isLoading=true);
 user.insertPhoneNumber(completePhoneNumber).then((result){
  setState(() => isLoading=false);
 })
}

Widget build(BuildContext context){
 return RaisedButton(
                  color: Color.fromRGBO(105, 79, 150, 1),
                  onPressed: () {
                    var user = Provider.of<UserRepository>(context);
                    String completePhoneNumber = _selectedDialogCountry.phoneCode + phoneNumberController.text;
                    FutureBuilder(
                      future: user.insertPhoneNumber(completePhoneNumber),
                      builder: (BuildContext context, AsyncSnapshot snapshot) {
                        if (snapshot.connectionState != ConnectionState.done) {
                          return CircularProgressIndicator(
                              backgroundColor: Colors.blue);
                        } else {
                          return Dashboard();
                        }
                      },
                    );
                  },
                  textColor: Colors.white,
                  child: isLoading? CircularProgressIndicator(): Text("Save"),
                );
}

针对您的使用情况，为实现您所需的UI，您需要多于两个状态。例如DEFAULT,LOADING,ERROR,SUCCESS。