OPEN WEATHER API WITH FLUTTER APP

Integrate open weather API with flutter APP

GET weather API endpoint to call current weather data for one location.

OpenWeatherAPI, open the API docs to get the current weather data for one location.

API KEY, to fetch data you need a valid API key which will be used to authorize your request. You can check for the free API in the pricing section.

We can find our location using either city name, city ID, geographical coordinates or zip code. The variables will be added to the API endpoint URL in-order to fetch data.

For this example we will get the data based on geographical location. The endpoints will require the latitude and longitude parameters.

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}
This is how it will look on the code:
const apiKey='123456789';
https://api.openweathermap.org/data/2.5/weather?lat=$latitude&lon=$longitide&appid=$apiKey'

Fetch the our longitude and latitude for our location.

To get the coordinates, we will use the Geo-locator flutter package. This plugin provides easy access to platform specific location services. Add the dependency to pubspec.yaml.

///check the current version in the documentation
geolocator: ^7.2.0+1

class to get longitude and latitude coordinates in flutter.This class contains a function that returns longitude and latitude.

Geo-locator requires the location in the device being used. On Android you’ll need to add either the ACCESS_COARSE_LOCATION or the ACCESS_FINE_LOCATION permission to your Android Manifest. Check the documentation for IOS implementation. Add that outside the <Application/> and inside<manifest>

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

The NetworkData class is used to fetch API data from the API endpoint. Response.body will fetch all data in the API. JsonDecode interprets a given string as JSON

Add the coordinates to our weather API URL. This function will return the weather data of the current location based on the coordinates.

To display the weather details in the flutter widget class.

This are a sample of data retrieved from the weather API. You can design your weather app and get the values.

Weather APP

With the overview of fetching and displaying API response in widgets. Lets design a weather APP and learn how to transfer data between pages. In this example we will also be able to search by city name using our API endpoint.

service.dart will contain all our functions that will be required to create the weather app.

Display data in the UI

1. Loading screen, it displays a circular indicator when user waits for data to be fetched. This animation time depends on how fast your internet is, the faster the time the less time it takes.

In case you didn’t update all the required plugins in the example above. Below is all the plugins we will need. Check the latest version in the documentation.

/// add the spinkit plugin to pubspec.yaml
    flutter_spinkit: ^5.0.0
    geolocator: ^7.2.0+1
    http: ^0.13.3
    flutter_spinkit: ^5.0.0

This class displays loading indicator(spinkit), and gets location data from getLocationWeather() method. This will prompt the user device for permission to access location.

The weather location data will be stored in a variable and passed to the next page(Location page).

Display the data passed from the Weather page in Location Page.

NB:IMPROVE THE UI

///styles used in the app 
const kTempTextStyle = TextStyle(
 fontFamily: 'Spartan MB',
 fontSize: 60.0,
);
const kMessageTextStyle = TextStyle(
fontFamily: 'Spartan MB',
fontSize: 40.0,
);
const kButtonTextStyle =
 TextStyle(fontSize: 30.0, fontFamily: 'Spartan MB', color: white);
 const kConditionTextStyle = TextStyle(
 fontSize: 80.0,
);
const textFieldDecoration = InputDecoration(
 filled: true,
 fillColor: white,
 icon: Icon(
 Icons.local_activity,
 color: white,
),
 hintText: 'Enter City name',
 hintStyle: TextStyle(color: black),
 border: OutlineInputBorder(
 borderRadius: BorderRadius.all(Radius.circular(10.0)),
 borderSide: BorderSide.none,
));

final widget

my GitHub for reference.

Source: appberry.com