title: FLUTTER: How can I show the weather Icon from Open Weather Map?
body: <p>I Would like to show open weather icons on my app but I'm not sure how I can do so. A sample of the data I'm getting from <code>openweather</code> map is below, and I've also included an example of how I'm getting the other data.</p>
  
  <p><strong>My Code:</strong></p>
  
  <pre><code>import 'dart:ui';
  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:intl/intl.dart';
  import 'GetLocation.dart';
  import 'package:http/http.dart' as http;
  import 'dart:convert';
  import 'package:font_awesome_flutter/font_awesome_flutter.dart';
  
  void main() {
    runApp(AuraWeather());
  }
  
  class AuraWeather extends StatefulWidget {
    @override
    _AuraWeatherState createState() =&gt; _AuraWeatherState();
  }
  
  class _AuraWeatherState extends State&lt;AuraWeather&gt; {
  
    var apiKey = '5f10958d807d5c7e333ec2e54c4a5b16';
    var weatherIcon;
    var description;
    var maxTemp;
    var minTemp;
    var format_sunRise;
    var sunRise;
    var format_sunSet;
    var format_sunRiseEnd;
    var format_sunSetEnd;
    var sunSet;
    var temp;
    var city;
  
    @override
    Widget build(BuildContext context) {
      setState(() {
        getLocation();
      });
  
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage(displayBackground()),
            ),
          ),
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaY: 2, sigmaX: 2),
            child: Container(
              color: Colors.black.withOpacity(0.5),
              child: Scaffold(
                backgroundColor: Colors.transparent,
                body: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: &lt;Widget&gt;[
                    Column(
                      children: &lt;Widget&gt;[
                        Container(
                          child: Center(
                            child: Text(
                              '$city',
                              style: TextStyle(
                                fontSize: 25,
                                color: Colors.white,
                                fontFamily: 'Roboto',
                              ),
                            ),
                          ),
                        ),
                        Container(
                          child: Icon(
                            FontAwesomeIcons.locationArrow,
                            color: Colors.white,
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 80),
                          child: Text(
                            '$temp' + '°',
                            style: TextStyle(
                                fontSize: 50,
                                color: Colors.white,
                                fontWeight: FontWeight.w600),
                          ),
                        ),
                      ],
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 30),
                      child: Icon(
                        Icons.wb_sunny,
                        color: Colors.white,
                        size: 120,
                      ),
                    ),
                    Container(
                      child: Center(
                        child: Text(
                          '$maxTemp ° | $minTemp °',
                          style: TextStyle(fontSize: 20, color: Colors.white),
                        ),
                      ),
                    ),
                    Container(
                      child: Text(
                        '$description',
                        style: TextStyle(fontSize: 20,
                            color: Colors.white,
                          fontFamily: 'Roboto mono',),
                      ),
                    ),
                    Container(
                      child: FlatButton(
                        child: Icon(
                          Icons.refresh,
                          color: Colors.white,
                          size: 40,
                        ),
                        color: Colors.transparent,
                        onPressed: () {
                          setState(
                                () {
                              getLocation();
                            },
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      );
    }
  
    // display background images based on current time
    displayBackground() {
      var now = DateTime.now();
      //var currentTime = DateFormat.jm().format(now);
  
      print('Sunrise time $format_sunRise');
      print('Sunset time $format_sunSet');
      print('Current time $now');
  
      if ((now.isAfter(format_sunRise)) &amp;&amp; (now.isBefore(format_sunRiseEnd))){
        print('Morning');
       return'images/Moon.png';
      }else if((now.isAfter(format_sunRiseEnd)) &amp;&amp; (now.isBefore(format_sunSet))){
        return 'images/Sun.png';
      }else if ((now.isAfter(format_sunSet)) &amp;&amp; (now.isBefore(format_sunSetEnd))){
        print('Evening');
        return 'images/Moon.png';
      }else if((now.isAfter(format_sunSetEnd)) &amp;&amp; (now.isBefore(format_sunRise))){
        return 'images/Blood.png';
      }
    }
  
    //getLocation
    void getLocation() async {
      Getlocation getlocation = Getlocation();
      await getlocation.getCurrentLocation();
  
      print(getlocation.latitude);
      print(getlocation.longitude);
      print(getlocation.city);
      city = getlocation.city;
      getTemp(getlocation.latitude, getlocation.longitude);
    }
  
    //Get current temp
    Future&lt;void&gt; getTemp(double lat, double lon) async {
      var now = DateTime.now();
      DateFormat dateFormat = new DateFormat.Hm();
  
      http.Response response = await http.get(
          'https://api.openweathermap.org/data/2.5/weather?lat=$lat&amp;lon=$lon&amp;appid=$apiKey&amp;units=metric');
      //print(response.body);
  
      var dataDecoded = jsonDecode(response.body);
  
      description = dataDecoded['weather'][0]['description'];
  
      temp = dataDecoded['main']['temp'];
      temp = temp.toInt();
  
      maxTemp = dataDecoded['main']['temp_max'];
      maxTemp = maxTemp.toInt();
  
      minTemp = dataDecoded['main']['temp_min'];
      minTemp = minTemp.toInt();
  
      sunRise = dataDecoded['sys']['sunrise'];
      format_sunRise = DateTime.fromMillisecondsSinceEpoch(sunRise*1000);
      format_sunRiseEnd = format_sunRise.add(Duration(hours: 1));
  
      sunSet = dataDecoded['sys']['sunset'];
      format_sunSet = DateTime.fromMillisecondsSinceEpoch(sunSet*1000);
      format_sunSetEnd = format_sunSet.add(Duration(hours: 1));
  
      print('Current temp $temp');
      print('Max temp $maxTemp');
      print('Min temp $minTemp');
  
    }
  }
  </code></pre>
  
  <p><strong>SAMPLE DATA:</strong></p>
  
  <pre><code>{
      coord: {
          lon: 139.01,
          lat: 35.02
      },
      weather: [
       {
          id: 800,
          main: "Clear",
          description: "clear sky",
          icon: "01n"
       }
      ],
      base: "stations",
      main: {
          temp: 285.514,
          pressure: 1013.75,
          humidity: 100,
          temp_min: 285.514,
          temp_max: 285.514,
          sea_level: 1023.22,
          grnd_level: 1013.75
      },
      wind: {
          speed: 5.52,
          deg: 311
      },
      clouds: {
          all: 0
      },
      dt: 1485792967,
      sys: {
          message: 0.0025,
          country: "JP",
          sunrise: 1485726240,
          sunset: 1485763863
      },
      id: 1907296,
      name: "Tawarano",
      cod: 200
  }
  </code></pre>
  
  <p>From the data above, I'm able to get: <code>temp</code>, <code>temp_max</code>, <code>temp_min</code> and description. This is how I've done it.</p>
  
  <p><strong>CODE:</strong></p>
  
  <pre><code>http.Response response = await http.get(
          'https://api.openweathermap.org/data/2.5/weather?lat=$lat&amp;lon=$lon&amp;appid=$apiKey&amp;units=metric');
      //print(response.body);
  
      var dataDecoded = jsonDecode(response.body);
  
      description = dataDecoded['weather'][0]['description'];
  
      temp = dataDecoded['main']['temp'];
      temp = temp.toInt();
  
      maxTemp = dataDecoded['main']['temp_max'];
      maxTemp = maxTemp.toInt();
  
      minTemp = dataDecoded['main']['temp_min'];
      minTemp = minTemp.toInt();
  </code></pre>
  
  <p><strong><em>How can I get to show the ICON from url?</em></strong>  Icon will be shown inside container number 5 in Scaffold widgget.</p>