How to Develop a Weather App with Flutter using Location Kit and OpenWeatherMap API?
📖Introduction
In this post, I am going to show you how to develop a weather application with Flutter using HMS Location Kit and OpenWeatherMap API. It will be a very basic application with two screens, splash, and main page. We will retrieve the user’s location with Location Kit and get the weather based on it from OpenWeatherMap API. Finally, we will display temperature and some illustrations, icons according to weather information.
✨ What are the Location Kit and OpenWeatherMap API?
🌡️ OpenWeatherMap API is a simple and easy-to-use API with lots of basic and advanced features. It offers us both free and paid choices. Since we are developing a basic application, we will only ask for current weather data and it is free to use. We only need to register for it.
📍 Huawei Location Kit combines the GPS, Wi-Fi, and base station locations to help you quickly obtain precise user locations, build up global positioning capabilities, and reach a wide range of users around the globe. Currently, it provides the four main capabilities: fused location, location semantics, activity identification, and geofence.
🚧 Development Process
Let’s create a Flutter project and start integrating necessities. Since we will be using HMS we need to create a project on AGC and integrate HMS Core and Location Kit. You can use these guides to complete the integration of HMS Core.
Also, to use OpenWeatherMap we should complete our sign-up process and have at least one API key. For to do that you can look at this documentation.
We are one step away from completing our pre-coding process. Since we will be using different packages we need to add them to our “pubspec.yaml” file. You can check out my YAML file. Versions may be different. I will be using the http package for HTTP requests, flutter_spinkit package for loading animations, huawei_location package for user’s location, logger package to log errors or messages, and flutter_svg package to display SVG files. You can find all these packages in the pub.dev. Also, we need to add our assets’ location to our YAML file. My images will under the “images” folder so I simply put them in my file as “images/”.
After completing this, don’t forget to click “Pub get” and “Get dependencies”.
⌨️ Coding
Let’s start coding by creating our services. We basically need three services, network, position, and weather.
🔗 Networking
First, we will create our networking service. This service will handle our HTTP requests. We will call OpenWeatherMap API by this service class.
When API returns us a response with the response code 200, we will decode its body and return it. Otherwise, we will simply log it. Since this should be done asynchronously to prevent blocking the application. We will add async and await to our function also should return a future.
📍 Position
Like I mentioned in the beginning we will use the Huawei Location kit to get the user’s location. In our position service, we will check permissions first. If users gave their permission for us to get their location we will check if they have the last location. Otherwise, we will ask for their permission.
If the user has no last location we will simply listen for the current location update and try to get it. This process is also should be done asynchronously to prevent blocking the application. We will add async and await to our function.
☀️ Weather
For our last service, we will create a class to get information from OpenWeatherMap API using position and networking services.
After getting our weather data we will change our background colors, images, and city name according to it on our main page. We will check the condition value of weather data for changes. My control functions are elementary, but you can try to improve it yourself for a better codebase.
We will call these functions from our main page. Since our services are ready we can start our splash screen.
🚪 Splash Screen
In our splash, we will display and weather icon and a loading spinner. Also, we are going to call our getLocationWeather() method to get our weather data. When we retrieve our data we will navigate to our main page.
🏠 Main Page
When we are on the main page, we should check our weather data. If it is null we should say something like “There is something wrong.”. Otherwise, we should change the background, weather icon, and fill city name and degree.
After we set our weather data to our UI, we should have something like this. Now we only add refresh function for the near me icon. When clicked it should check the weather from OpenWeatherMap API with our location.
And we completed our development process. We have a simple weather application that can get our location and shows that location’s weather.
💡 Conclusion
As you can see Huawei provides us solutions to help our development even in Flutter. The location kit is a really easy to use and very useful tool. Also, OpenWeatherMap API is a good option for developers as you can see. This was a small step for humankind but at least everyone will know should they get an umbrella or not when they are going out 🌂. You can find this project's GitHub repository in references. I hope it will help you to understand the UI side as well.
