How can I navigate to another page after CircularProgressIndicator completed in Flutter?

Question

Hello I am new in Flutter and I am currently building a chat application.
I got a profile maker screen where the user can upload an image to set their avatar. I am using CircularProgressIndicator() to show an uploading screen. I want to know that how can I navigate to the next screen i.e my main homescreen automatically after uploading completed so that the user doesn't have to wait for any button to press.

Here is the code which I tried

progressString != '100% Completed' ? Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
                  CircularProgressIndicator(
                        backgroundColor: Colors.blue,
                  ),
                  SizedBox(
                      height: 20.0,
                  ),
                   Text("Uploading File : $progressString",
                        style: TextStyle(
                            color: Colors.white54,
                            fontSize: 20.0,
                            fontWeight: FontWeight.w900,
                           ),
                          ),
                         ],
                        ) : Navigator.pushReplacement(context,
                              MaterialPageRoute(builder: (context) {
                                 return LoginPage();
                              }),
                            ), 

Upload Code

FormData data = FormData.fromMap({
    "username": userName.toString(),
    "name": naMe.toString(),
    "birthday": birthDay.toString(),
    "about": aboutUser.toString(),
    "sender": sendUser.toString(),
    "mobile": userMobile.toString(),
    "avatar": _image != null
        ? await MultipartFile.fromFile(_image.path,
            filename: avatarName.toString())
        : Text('Invalid Avatar'),
  });

  if (_validateAndSave()) {
    final token = widget.token;

    try {
      Dio dio = Dio();
      dio.options.headers['Accept'] = "application/json";
      dio.options.headers['Authorization'] = "Bearer $token";
      dio.options.headers['Content-Type'] = "multipart/form-data";
      dio.options.followRedirects = false;

      var response = await dio.post(url,
          data: data, onSendProgress: (int rec, int total) {
        setState(() {
          uploading = true;
          progressString = ((rec / total * 100).toString());
        });
      });

      var responseCode = response.statusCode;
      print('Dio responseCode : $responseCode');

 } on DioError catch (err) {
      var responseCode = err.response.statusCode;
      print(responseCode);
    }

 setState(() {
      uploading = false;
      progressString = "100% Completed ";
      print(progressString);
    });
  }

Answer 1

you should set your navigator inside of your upload function after upload finished

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
         CircularProgressIndicator(
             backgroundColor: Colors.blue,
         ),
         SizedBox(
             height: 20.0,
         ),
         Text("Uploading File : $progressString",
              style: TextStyle(
                   color: Colors.white54,
                   fontSize: 20.0,
                   fontWeight: FontWeight.w900,
              ),
         ),
     ],
), 

 

FormData data = FormData.fromMap({
    "username": userName.toString(),
    "name": naMe.toString(),
    "birthday": birthDay.toString(),
    "about": aboutUser.toString(),
    "sender": sendUser.toString(),
    "mobile": userMobile.toString(),
    "avatar": _image != null
        ? await MultipartFile.fromFile(_image.path,
            filename: avatarName.toString())
        : Text('Invalid Avatar'),
  });

  if (_validateAndSave()) {
    final token = widget.token;

    try {
      Dio dio = Dio();
      dio.options.headers['Accept'] = "application/json";
      dio.options.headers['Authorization'] = "Bearer $token";
      dio.options.headers['Content-Type'] = "multipart/form-data";
      dio.options.followRedirects = false;

      var response = await dio.post(url,
          data: data, onSendProgress: (int rec, int total) {
        setState(() {
          uploading = true;
          progressString = ((rec / total * 100).toString());
        });
      });

      var responseCode = response.statusCode;
      print('Dio responseCode : $responseCode');

 } on DioError catch (err) {
      var responseCode = err.response.statusCode;
      print(responseCode);
    }

      Future.delaye(Duration(milliseconds: 100), (){
          Navigator.pushReplacement(this.context,
             MaterialPageRoute(builder: (context) {
                  return LoginPage();
             }),
          );
      });
  }