Flutter FutureBuilder show Индикатор прогресса

Question

У меня есть кнопка, которая нажимает, вставляет что-то в БД и перенаправляет пользователя на другую страницу. Я пытаюсь реализовать 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"),
                ),
              )
            ],
          )),
    );
  }

Answer 1

Это не работает, потому что FutureBuilder не привязан к дереву виджетов. Когда будущее не находится в состоянии готовности, оно просто создает экземпляр Dashboard. Вам не следует использовать FutureBuilder, вместо этого вы можете установить дочерний виджет на основе некоторой переменной, а когда будущее завершится, вы вызываете * 1004. * в этой переменной для обновления состояния, которое, в свою очередь, перестроит виджет с новым значением состояния

Примерно так:

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

Для вашего случая использования вам понадобится больше, чемДва состояния для достижения интерфейса, который вы ищете. Пример DEFAULT, LOADING, ERROR, SUCCESS