Building a weather app in Flutter using APIs.

1. Intro to Flutter
Anish Natekar
anish.natekar.20031@iitgoa.ac.in
GDSC IIT Goa chapter

2. Timeline
2012 2014 2016 2018 2020
February to
March
Intro to u er
and da
Api App
Self Practice
Assignment 2
Flu er app with
rebase
Self Practice Assignment
4
Self Practice
Assignment 1
Building an app
with u er
Intro to rebase
Self Practice Assignment
3
5 sessions

3. Intro to APIs

4. API
about
Application Programming Interface (API) is a
software interface that allows two applications to
interact with each other without any user intervention.
API is defined as a code that helps two different
software’s to communicate and exchange data with
each other.
What is API (Hindi) - https://youtu.be/E0Qqpn8ymko

5. There are many APIs that different applications use in the backend, for
example -
● Google Maps API is used in many other apps to provide location and
travel data
● Youtube API - search videos/channels/playlists etc.
● Twitter API used to build twitter bots
● Discord API to build discord bots
● Payment APIs eg. UPI have their own api for handling payments
● Flight tracking APIs record the arrival and departure of planes from
airports
● NASA API for images collected by various satellites and rovers.
● Reddit API
Some Examples of APIs

6. Open Weather Map
openweathermap.org
Open Weather Map has a set of open source
APIs and some of them are free to use like
the current weather data API which we will be
using to build our weather app.
It is also the 2nd most used API currently.

7. https://api.openweathermap.org/data/2.5/weather?q={city id}&appid={API key}
Eg =>
https://api.openweathermap.org/data/2.5/weather?id=1275339&appid=3e35479d7267e25f
c699f4316881eab7
City id can be found here => https://openweathermap.org/find
Default API key will be provided after registering on OpenWeatherMap.org website =>
https://openweathermap.org/

9. How do we get the API data from the link into flutter?
● We will use a library called “http” to generate and send http request from
our flutter app. (https://pub.dev/packages/http)
● This will allow us to get the contents from the link in JSON format.
● To further convert JSON to a dictionary object we will use another library
“dart.convert” that is available by default.
● After getting the data we will update the variables we are interested in in
a set state function.
● The API will be called independently when an event is triggered and to
implement such logic we will need to do some asynchronous
programming (async await) which will wait for the api responses (event)
and get the JSON.
OpenWeatherMap API sends a response approximately every minute
and the data is collected over 3 to 5 days a week.

10. Source:-
https://ayusch.com/how-to-m
ake-an-api-call-in-flutter-rest-
api/#:~:text=How%20to%20m
ake%20an%20API%20call%
20in%20Flutter,4%20Adding
%20a%20ListView.%20...%2
05%20Conclusion.%20
video about API calling in
Flutter:-
https://youtu.be/wlwVJ7E34T
c

11. We will be building the UI of our APP with the help of some of the
following widgets and Widget from the Font Awesome Library which has
many kinds of fonts and icons.
WARNING - font awesome library is not supported by dartpad so if you
are using dartpad ignore the font awesome icons.
● Container
● Column
● Text
● Scaffold
● Center
● Padding
● Expanded
● List View
● List Tile
● Material App

12. I have Uploaded The Template for today’s App on my github so start by copying the code
given in :-
● lib/main.dart
● Pubspec.yaml (you only need to add the two libraries http and font awesome)
(https://github.com/anish-natekar/-Flutter_Festival_Session_3_weatherApiApp/blob/master/li
b/main.dart)
I am not sure If the app will work on dartpad but I think if we exclude font awesome stuff it
should work.