Как отобразить изображения, полученные из ответа API в флаттер? - PullRequest
Новая
       21

Как отобразить изображения, полученные из ответа API в флаттер?

0 голосов
/ 31 октября 2018

Я использую пакет http Dart , чтобы отправить запрос GET в API статических карт MapQuest для получения изображения. Тем не менее, ответ на этот запрос напрямую возвращает изображение, а не Uri, или, возможно, я делаю что-то не так.

Не могли бы вы помочь мне отобразить полученное изображение?

Вот код запроса: 

 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]&center=${coords['lat']},${coords['lng']}&zoom=13&type=hyb&locations=${coords['lat']},${coords['lng']}&size=500,300@2x');

Координаты получены из API геокодирования MapQuest, являющегося запросом async.

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Как подсказал Гюнтер Цохбауэр Я включил URL-адрес запроса непосредственно в свой виджет Image.network (), и он работал.

Вот код: 

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]&center=${_coords['lat']},${_coords['lng']}&zoom=13&type=hyb&locations=${_coords['lat']},${_coords['lng']}&size=500,300@2x'),
      placeholder: AssetImage('assets/product.jpg'),
    );
  }

Функция getStaticMapCoordinates выполняется каждый раз, когда пользователь меняет поле адреса, и в результате setState виджет изображения перерисовывается.

0 голосов
/ 31 октября 2018

Если изображение соответствует вашему URL: 

//...
    child: new ClipRRect(
         borderRadius: new BorderRadius.circular(30.0),
         child: Image.network('https://www.mapquestapi.com/staticmap/v5/map?key=[MYAPIKEY]&center=${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))    
    //...

если вам нужно разобрать: 

  final response = await http
      .get('https://www.mapquestapi.com/staticmap/v5/map?key=[MYAPIKEY]&center=${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');
  }
...