Flutter async method slowdown app performance

Question

I'm a newbie in flutter and I can't understand what I might be doing wrong. In my App there is an option for the user to change their avatar's image. He can choose an image from the gallery or take a photo. The new avatar image is saved in the _avatarImage field, and within the setState method the _newImage field is set to true, like this:

Future getNewAvatarImage() async {
   Image _image = .... // Take a photo or a image from Gallery
   // ...
   _avatarImage = _image;
   setState(
     () => _newImage = true;
   );
 }

In one part of the code I have the compressAndUpload method which when called compresses an image and sends it to the remote server. This method is asynchronous and is called within the build method whenever the _newImage field is true. Like this

@override
Widget build(BuildContext context) {
    if (_newImage) {
       _newImage = false;
       compressAndUpload(_avatarImage);
    }
    return Container(
       //...
       child: _avatarImage,
       //
    );

The problem is that the new avatar image will take a long time to appear if the compressAndUpload method is called. If this method is commented out the new avatar image comes up quickly.

    if (_newImage) {
       _newImage = false;
       // New image show quickly
       // compressAndUpload(_avatarImage);
    }

    ***********

    if (_newImage) {
       _newImage = false;
       // Image takes too long to appear
       compressAndUpload(_avatarImage);
    }

Where is the problem? The compressAndUpload method is asynchronous and so should not cause delay for the new image to be displayed:

 Future<void> compressAndUpload(var image) async {
    // Compress image
    // upload image
 }

UPDATE:

For further clarification I show the complete code of the compressAndUpload method:

 Future<void> compressAndUpload(var image) async {

  var imageBytes = imagem.readAsBytesSync();

  saveImageToPreferences(base64String(imageBytes));

  var tempDir = await getTemporaryDirectory();
  var path = tempDir.path;

  // Reduce size
  img.Image image = img.decodeImage(imageBytes);
  img.Image smallerImage = img.copyResize(image, width: 1000);

  File compressedFileImage =  

  File('$path\${Explika.getAluno().id}.jpg')
   ..writeAsBytesSync(img.encodeJpg(smallerImage, quality: 50));

  String _urlsegment =  Explika.producaoFlag ? 
  'https://www.remoteserver.pt' : 'http://10.0.2.2';

  var stream = http.ByteStream(DelegatingStream.typed(
               compressedFileImage.openRead()));
  var length = await compressedFileImage.length();
  var uri = Uri.parse('$_urlsegment/explika/api/upload');

  var request = http.MultipartRequest("POST", uri);

  var multipartFile = http.MultipartFile('fotoaluno', stream, length,
      filename: '${Explika.getAluno().id}.jpg');

  request.files.add(multipartFile);

  var response;
  try {
    response = await request.send();
  } catch (e) {
    // mostrar falha de rede
    //_uploadingImagem = false;
    print(e);
    return;
  }

  //Get the response from the server
  var responseData = await response.stream.toBytes();
  var responseString = String.fromCharCodes(responseData);
  print(responseString);

}

Answer 1

Thanks so much for all the comments.

The problem was solved when I found that in the pickImage method it was possible to set the maximum width and the maximum height of the image being selected. Thus, the compression step of the selected image was not required.