How to display a png image from api response in flutter?-CodePudding

I'm getting a PNG image (NOT URI) as a response to my api request as shown bellow:

Future PostToGetPostImages(String pic_id,String pic_type) async {
    try {
      var parms = {
        'code': pic_type "_" pic_id,
      };

      Response response = await _dio.post(_get_post_image,
          data: parms,
          options: Options(contentType: Headers.formUrlEncodedContentType),
          onSendProgress: (int sent, int total) {
            print('sent : $sent // total : $total');
          }, onReceiveProgress: (v, s) {
            print('v : $v // s : $s');
          });

      print('***** Response body Download Profile Images: ${response.data} **********');
      
      return response.data;
    } catch (error, stacktrace) {
      _handleError(error);
      print("Exception occured A: $error stackTrace: $stacktrace");
    }
  }

This is what it print after execution:

I/flutter (12777): ***** Response body Download Profile Images: �PNG

I need to know how to display this response ( the png image ) in flutter, I'm using this code but it's not working:

FutureBuilder(
                    future: aptProvider().PostToGetProfileImages("1", "m"),
                    builder: (context, snapshot) {
                      return CircleAvatar(
                          radius: 65.0,
                          backgroundImage: backgroundImage: NetworkImage(snapshot.data
                            .toString()));
                    }),

Reponse in POSTMAN:

CodePudding user response：

Perhaps the png is like a dummy image like a 404 like the one in the image attached so you have to copy and try check it with Image.network if everything works fine you proceed with image.network

CodePudding user response：

The problem here that you is not using a URL image, confirm to use a URL end with (.png, jpg, ..etc.) and also confirm it by open it in your browser.

then

to display it in you widget use one of this ways

First

Image.network('URL') 
// ex: Image.network('https://picsum.photos/250?image=9')

Second

Container( height : 100 , width :100 , decoration : Box decoration ( 
  image : Decoration image ( Network image ('URL'), ), 
), ), ),

CodePudding user response：

If you are getting the image url from the response, then you can use the Image.network(imageUrl)

If you are getting the imageData in the form of Uint8List, then you can use the Image.memory(imageData)

CodePudding user response：

It seems like you get the image as a byte array, base64 string.

Here is how I solve that.

var base64 = response.split(';base64,')[1];
base64 = base64.replaceFirst('binary data/', '');
Uint8List bytes = base64Decode(base64);

// Image Widget which you can put in anywhere.
Image.memory(bytes, fit: BoxFit.contain)

CodePudding user response：

Please share a example of your json data after that I can help you more over you used a incorrect format of function. You need to use mvvm technique