Asynchronous 颤振FutureBuilder显示进度指示器

我有一个按钮，按下它可以在数据库中插入一些东西，并将用户重定向到另一个页面。我正在尝试实现FutureBuilder，它应该显示

循环压缩指示器

，直到一切都完成

这是我的职责：

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

---

它不工作，因为

FutureBuilder

未连接到小部件树。 一旦future未处于“完成”状态，它只会创建一个实例

仪表板

。您不应该在此处使用

FutureBuilder

，而是可以基于某个变量设置子小部件，当future完成时，在该变量上调用

setState

，以更新状态，从而用新的状态值重新构建小部件

像这样的

var isLoading=false；
void insertNumber（）{
var user=Provider.of（上下文）；
字符串completePhoneNumber=\u selectedDialogCountry.phoneCode+phoneNumberController.text；
设置状态（（）=>isLoading=true）；
user.insertPhoneNumber（completePhoneNumber）。然后（（结果）{
设置状态（（）=>isLoading=false）；
})
}
小部件构建（构建上下文）{
返回上升按钮(
颜色：颜色。来自RGBO（105,79,150,1），
已按下：（）{
var user=Provider.of（上下文）；
字符串completePhoneNumber=\u selectedDialogCountry.phoneCode+phoneNumberController.text；
未来建设者(
未来：user.insertPhoneNumber（completePhoneNumber），
生成器：（BuildContext上下文，异步快照）{
if（snapshot.connectionState！=connectionState.done）{
返回循环预测器(
背景颜色：颜色。蓝色）；
}否则{
返回仪表板（）；
}
},
);
},
textColor:Colors.white，
子项：isLoading？CircularProgressIndicator（）：文本（“保存”），
);
}

---

对于您的用例，您需要两种以上的状态才能实现所需的UI。例如，

默认值

，

加载

，

错误

，

成功

它不工作，因为

FutureBuilder

未连接到小部件树。 一旦future未处于“完成”状态，它只会创建一个实例

仪表板

。您不应该在此处使用

FutureBuilder

，而是可以基于某个变量设置子小部件，当future完成时，在该变量上调用

setState

，以更新状态，从而用新的状态值重新构建小部件

像这样的

var isLoading=false；
void insertNumber（）{
var user=Provider.of（上下文）；
字符串completePhoneNumber=\u selectedDialogCountry.phoneCode+phoneNumberController.text；
设置状态（（）=>isLoading=true）；
user.insertPhoneNumber（completePhoneNumber）。然后（（结果）{
设置状态（（）=>isLoading=false）；
})
}
小部件构建（构建上下文）{
返回上升按钮(
颜色：颜色。来自RGBO（105,79,150,1），
已按下：（）{
var user=Provider.of（上下文）；
字符串completePhoneNumber=\u selectedDialogCountry.phoneCode+phoneNumberController.text；
未来建设者(
未来：user.insertPhoneNumber（completePhoneNumber），
生成器：（BuildContext上下文，异步快照）{
if（snapshot.connectionState！=connectionState.done）{
返回循环预测器(
背景颜色：颜色。蓝色）；
}否则{
返回仪表板（）；
}
},
);
},
textColor:Colors.white，
子项：isLoading？CircularProgressIndicator（）：文本（“保存”），
);
}

---

对于您的用例，您将需要两种以上的状态来实现所需的UI。例如

默认值

，

加载

，

错误

，

成功

为什么他的代码没有附加到小部件树上。您无法从他的代码示例中看到RaisedButton是否在build（）方法中，可以吗？因为

FutureBuilder

是一个

小部件

，它应该是某个父

小部件

上的子部件，才能成为小部件树的一部分。这里您只是创建了

FutureBuilder

的一个实例，为什么他的代码没有附加到小部件树上。您无法从他的代码示例中看到RaisedButton是否在build（）方法中，可以吗？因为

FutureBuilder

是一个

小部件

，它应该是某个父

小部件

上的子部件，才能成为小部件树的一部分。在这里，您刚刚创建了

FutureBuilder的一个实例

，您能显示定义所提到的RaisedButton（）的完整类吗？您是否尝试在AsyncSnapshot上使用hasError（）来获取异步函数可能出现的问题？我已经编辑了我的问题并发布了完整的

build

方法。这是一个简单的类

PhoneNumber

和

build

在

PhoneNumberState

类中。您好。您找到了任何解决方案吗？我有类似的问题。您能展示一下您提到的RaisedButton（）定义的完整类吗？您是否尝试在AsyncSnapshot上使用hasError（）来获取异步函数可能出现的问题？我已经编辑了我的问题并发布了完整的

build

方法。这是一个简单的类

PhoneNumber

，而

build

在

PhoneNumberState

类中。您好。您找到解决方案了吗？我有类似的问题。

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"),
                )

@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"),
                ),
              )
            ],
          )),
    );
  }