Anzeigen von Bildern, die Sie von einer API Antwort in flattern?

Ich bin mit der http Dart-Paket zu senden GET Anfrage an die MapQuest-Static Maps-API erhalten Sie ein Bild. Jedoch, die Antwort auf diese Anfrage liefert ein Bild, und nicht ein Uri oder vielleicht bin ich etwas falsch.

Können Sie mir bitte helfen Darstellung der empfangenen Bild?

Hier ist der Code anfordern:

 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,[email protected]');

Die Koordinaten sind, von der Geocoding-API von MapQuest ist ein async Anfrage.

  • Für die Anzeige von Bilddaten von einer api: flattern.io/Kochbuch/images/Netzwerk-Bild
  • Ich habe versucht mit Bild.- Netzwerk(), der Punkt ist, dass es nimmt einen String-Wert für die url des Bildes, die ich nicht empfangen, aus der GET-Anfrage.
  • Geben Sie einfach die Zeichenfolge, die Sie passieren, um in der GET-Anfrage zu NetworkImage und NetworkImage wird die GET-Anforderung für Sie. Ansonsten verwenden Sie docs.flutter.io/flutter/widgets/Image/Image.memory.html
  • Vielen Dank!! Direkt vorbei in die Anfrage-Url in das Bild.Netzwerk() gearbeitet.
InformationsquelleAutor Ayush Shekhar | 2018-10-31



2 Replies
  1. 1

    Vorgeschlagen von Günter Zöchbauer ich enthalten die Request-Url direkt in mein Bild.Netzwerk() widget und es hat funktioniert.

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

    Den getStaticMapCoordinates – Funktion ausgeführt, die jedesmal, wenn der Benutzer ändert das Adressfeld ein und als Ergebnis setState, das Bild-Widget neu gerendert.

  2. 0

    Wenn ein Bild der Ruhe von Ihrem 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,[email protected]', 
                                  fit: BoxFit.cover, 
                                  height: 60.0, width: 60.0))    
        //...

    wenn Sie brauchen, um zu analysieren:

      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,[email protected]');
    
      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');
      }

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.