Home > Blockchain >  Image network did not change after uploading the image (flutter)
Image network did not change after uploading the image (flutter)

Time:08-05

So, i make a feature to change profile pic. uploading successfully, then i try to get the new pict, but the pict is null because when i print the pict it shows the older pict instead of a new one. seems like the image network didn't update automatically. anybody can explain why this happen and how to fix it?

code for uploading

Future upload(File imageFile) async {
    var stream = http.ByteStream(imageFile.openRead());
    stream.cast();
    var length = await imageFile.length();
    String uuid = await UserPreference().getUuid();
    var uri = Uri.parse("$baseUrl/customer/$uuid");
    var request = http.MultipartRequest("POST", uri);
    var multipartFile = http.MultipartFile('profile_picture', stream, length,
        filename: basename(imageFile.path));
    String getToken = await UserPreference().getToken();
    request.headers.addAll({
      'Content-Type': 'application/json',
      HttpHeaders.authorizationHeader: "Bearer $getToken"
    });
    request.files.add(multipartFile);
    var response = await request.send();
    print(getToken);
    if (response.statusCode == 200) {
      print('uploaded');
    } else {
      print('failed');
    }
    response.stream.transform(utf8.decoder).listen((value) {
      print(value);
    });
  }

the way i call the pic is

  CircleAvatar(
              radius: 50,
            child: Image.network(
                user.profile_picture!,
                fit: BoxFit.cover,
              ),
            ),

CodePudding user response:

Add setState once after response.

    void uploadImage() async {
      // Show loader
      // open a byteStream
      var stream = new
      http.ByteStream(DelegatingStream.typed(file.openRead()));
      // get file length
      var length = await file.length();
      Map<String, String> headers = {
        "Accept": "application/json",
        "Authorization": token
      }; // ignore this headers if there is no authentication
    
      // string to uri
      var uri = Uri.parse(Constants.BASE_URL);
    
      // create multipart request
      var request = new http.MultipartRequest("POST", uri);
    
      // if you need more parameters to parse, add those like this 
      // to the API request
      request.fields["orderId"] = orderID.toString();
    
      // multipart that takes file.. here this "file" is a key of the 
     // API request
      var multipartFile = new http.MultipartFile('file', stream,
          length,
          filename: basename(file.path));
    
      //add headers
      request.headers.addAll(headers);
    
      // add file to multipart
      request.files.add(multipartFile);
    
      // send request to upload image
      await request.send().then((response) async {
        // listen for response
        response.stream.transform(utf8.decoder).listen((value) {
          print(value);
          setState(() {
            if (response.statusCode == 200) {
              print('uploaded');
            } else {
              print('failed');
            }
          });
    
          // Hide loader
    
        });
      }).catchError((e) {
        print(e);
        // Hide loader
      });

This will refresh the UI.

  • Related