I am using the http
Dart package to send a GET
request to the MapQuest Static Maps API to obtain an image. However, the response to this request directly returns an image, and not a Uri
, or maybe I am doing something wrong.
Can you please help me display the received image?
Here's the request Code:
final http.Response response = await http.get(
'https://www.mapquestapi.com/geocoding/v1/address?key=[MYAPIKEY]&inFormat=kvp&outFormat=json&location=${address}&thumbMaps=false&maxResults=1');
final decodedResponse = json.decode(response.body);
setState(() {
_coords = decodedResponse['results'][0]['locations'][0]['latLng'];
});
final http.Response staticMapResponse = await http.get(
'https://www.mapquestapi.com/staticmap/v5/map?key=[MYAPIKEY]¢er=${coords['lat']},${coords['lng']}&zoom=13&type=hyb&locations=${coords['lat']},${coords['lng']}&size=500,300@2x');
The coordinates are received from the Geocoding API of MapQuest which is an async
request.
As suggested by Günter Zöchbauer I included the Request Url directly in my Image.network() widget and it worked.
Here's the Code:
void getStaticMapCoordinates(String address) async {
if (address.isEmpty) {
return;
}
final http.Response response = await http.get(
'https://www.mapquestapi.com/geocoding/v1/address?key=[APIKEY]&inFormat=kvp&outFormat=json&location=${address}&thumbMaps=false&maxResults=1');
final decodedResponse = json.decode(response.body);
setState(() {
_coords = decodedResponse['results'][0]['locations'][0]['latLng'];
});
}
Widget _buildStaticMapImage() {
if(_coords == null) {
return Image.asset('assets/product.jpg');
}
return FadeInImage(
image: NetworkImage(
'https://www.mapquestapi.com/staticmap/v5/map?key=[APIKEY]¢er=${_coords['lat']},${_coords['lng']}&zoom=13&type=hyb&locations=${_coords['lat']},${_coords['lng']}&size=500,300@2x'),
placeholder: AssetImage('assets/product.jpg'),
);
}
The getStaticMapCoordinates
function executes everytime the user changes the address field and as a result of setState
, the Image Widget re-renders.
If a image is the repose from your URL:
//...
child: new ClipRRect(
borderRadius: new BorderRadius.circular(30.0),
child: Image.network('https://www.mapquestapi.com/staticmap/v5/map?key=[MYAPIKEY]¢er=${coords['lat']},${coords['lng']}&zoom=13&type=hyb&locations=${coords['lat']},${coords['lng']}&size=500,300@2x',
fit: BoxFit.cover,
height: 60.0, width: 60.0))
//...
if you need to parse:
final response = await http
.get('https://www.mapquestapi.com/staticmap/v5/map?key=[MYAPIKEY]¢er=${coords['lat']},${coords['lng']}&zoom=13&type=hyb&locations=${coords['lat']},${coords['lng']}&size=500,300@2x');
if (response.statusCode == 200) {
// If the call to the server was successful, parse the JSON
return json.decode(response.body)["imageURL"]; // <------- DO THE PARSING HERE AND THEN PASS THE URL TO THE ABOVE EXAMPLE
} else {
// If that call was not successful, throw an error.
throw Exception('Failed to load post');
}
I used Image class to create an in-memory image object from the response body in a byte stream form.
var _profileImage = Image.memory(response.bodyBytes).image;
Now you can directly load this image in your component.
You can add the headers to the NetworkImage widget like : NetworkImage( "your endpoint URL ", headers: {header:value}) Below link has more information.
https://api.flutter.dev/flutter/widgets/Image/Image.network.html
Sometimes fetching image from URL with complex headers are cumbersome. So at that time, we can use the header map directly in the NetworkImage
widget and it works like a charm-
.
.
child: CircleAvatar(
backgroundImage:
NetworkImage("www.mypropic.com",headers:getTokenHeaders());)
.
.
static Map<String, String> getTokenHeaders() {
Map<String, String> headers = new Map();
headers['Authorization'] = _bearerToken!;
headers['content-type'] = 'application/json';
return headers;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.