How to refresh page after upload image on server. Flutter

Question

I'm trying to refresh my page after upload image on server.

The problem is that after updating the profile image, the old image is displayed. After restarting the application, a new profile image is appearing.

Any help is appreciated. Thanks!

// upload image on server..............
  upload() async {    
      var token = box.get('access_token');
      var stream = new http.ByteStream(Stream.castFrom(imgPath!.openRead()));
      var length = await imgPath!.length();
      var uri = Uri.parse(editProfileUrl);

      var request = new http.MultipartRequest("POST", uri);
      Map<String, String> headers = {
        "Authorization": "Bearer $token",
        "Accept": "application/json"
        
      };

      request.headers.addAll(headers);
      var multipartFile = new http.MultipartFile('profile_pic', stream, length,
          filename: ("image_1.jpg"),
          contentType: new MediaType('image', 'png')
          );
         

      request.files.add(multipartFile);
      var response = await request.send();
      print(response.statusCode);
       if(response.statusCode == 200){
  
            showDialog(

              context: context,
              builder: (BuildContext context) {
                return Center(
                  child: AlertDialog(
                    
                    content: new Text("Your proflie has been updated successfully."),
                    actions: <Widget>[
                      new ElevatedButton(
                        child: new Text("OK"),
                        onPressed: () {
                          setState(() {
                           // redirect on main page......
                           // here i want to refresh my page to see updated image 
                           Navigator.push(
                            context, MaterialPageRoute(
                            builder: (context) => MyMatrimony())); 
                        },
                      ),
                    ],
                  ),
                );
              },
            );

Answer 1

You should run only the upload logic inside your function and return it's response from it.

Your function should look like this

// upload image on server..............
 Future<int> upload() async {    
      var token = box.get('access_token');
      var stream = new http.ByteStream(Stream.castFrom(imgPath!.openRead()));
      var length = await imgPath!.length();
      var uri = Uri.parse(editProfileUrl);

      var request = new http.MultipartRequest("POST", uri);
      Map<String, String> headers = {
        "Authorization": "Bearer $token",
        "Accept": "application/json"
        
      };

      request.headers.addAll(headers);
      var multipartFile = new http.MultipartFile('profile_pic', stream, length,
          filename: ("image_1.jpg"),
          contentType: new MediaType('image', 'png')
          );
         

      request.files.add(multipartFile);
      var response = await request.send();
      print(response.statusCode);
    return response.statusCode;

And then, you can call the function from ui and take action after response

Your ui code should look like this

onTap: (){
upload().then((statusCode) {
 if(statusCode == 200){
                      setState(() {
                 
              )); 
            showDialog(

              context: context,
              builder: (BuildContext context) {
                return Center(
                  child: AlertDialog(
                    
                    content: new Text("Your proflie has been updated successfully."),
                    actions: <Widget>[
                      new ElevatedButton(
                        child: new Text("OK"),
                        onPressed: () {
    
                        },
                      ),
                    ],
                  ),
                );
              },
            );
},