Loading image from http request

I'm developing a profile card that has to get different value's. I'm getting all the value's but i also want to load a network image. I'm using a filemaker server and i had noticed that i needed coockies to load this. When i make a request copy paste the image url into my browser it just loads. But whenever i'm loading it into my application i get the 401 statusCode with my image.

I have tried just a valid network image that's working, i have readed something about coockies but i'm not sure if i need to use them and how. I also find it weird that whenever i load the image in my browser it works but not on my application.

Future makeRequest() async { var url4 = "https://fms.xxxxxx.nl/fmi/data/v1/databases/Roscom Management Systeem/layouts/medewerker pa api/_find"; var body = json.encode({ "query": [ {"Emailadres(1)": "xxxx@xxx.nl"} ], });

Map<String, String> headers = {
  'Content-type': 'application/json',
  'Accept': 'application/json',
  "Authorization":
      'Bearer xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
};

var response = await http.post(url4, body: body, headers: headers);
setState(() {
  var responseJson = json.decode(response.body);
  data = responseJson['response']['data'][0];
  profielfoto = data['fieldData']['iMedewerker Foto'];

  print(profielfoto);
});

Value i get in the terminal

I expect that i can load the image in a networkimage with just the var $profielfoto. I don't know what to do with the coockies or maybe there's a much easier way to do it. I hope someone can help me please let me know if i need to provide more information about the server or anything else. ;)

Solution

A few things. Please do not put any type of heavy processing in setState

https://docs.flutter.io/flutter/widgets/State/setState.html

Generally it is recommended that the setState method only be used to wrap the actual changes to the state, not any computation that might be associated with the change. For example, here a value used by the build function is incremented, and then the change is written to disk, but only the increment is wrapped in the setState:

setState tells the widget when it needs to be redrawn

https://flutter.dev/docs/cookbook/images/network-image

String _profilePhoto = "";
//Change await into an async operation
http.post(url4, body: body, headers: headers).then( (response) {
   var responseJson = json.decode(response.body);


   print(data['fieldData']['iMedewerker Foto']);
   setState(() {

      _data = responseJson['response']['data'][0];
     _profilePhoto = data['fieldData']['iMedewerker Foto'];
   });
})

Widget build(BuildContext context){
      //Check if string is empty
     if ( _profilePhoto == "" ){
          return CircularProgressIndicator();
     }else {
           return Image.network( _profilePhoto );
     }
}

https://flutter.dev/docs/cookbook/images/network-image

https://pub.dartlang.org/packages/cached_network_image

You have two choices to grab images from the network. I believe I presented one way.