Search based Weather App using Flutter HMS Plugin and HMS Kits

Flutter + HMS Plugin + HMS Kits

This article will help the readers to understand the usage of HMS Account Kit and HMS Location Kit in a Flutter Weather App.

Introduction

In this article, we will be creating a Weather App using Flutter and HMS Kits. The HMS Kits that we will be using in this App are

1. HMS Account Kit: To enable login to the app using Huawei ID
2. HMS Location Kit: To get the user’s current location and to use other location-based services.

Apart from the HMS Kits, we will be using Weather API to get the current weather information for a particular city.

App Functionalities

It is a simple app with a single Main Screen. The App uses HMS Account Kit to login to the app as soon as the app is opened for the first time. The App uses the Silent Sign-In feature of the HMS Account Kit to login to the app. The App has the following functionalities

1. When the app starts the first time, upon successful login, it will detect the current location and use the Geocoding services of the HMS Location kit to get the location name from latitude and longitude and then query the Weather API to get the current weather.
2. The App also has a textbox to get the current weather information of a particular city. Once the city name is entered in the textbox, the Weather API must be called again and UI must be updated accordingly with the new weather data for the given city.
3. At the bottom of the screen, the app displays the Wind, Precipitation, and Humidity with a severity indication slider. This must also be updated whenever the user requests information for a new city.

Pre-Requirements

I assume that you have prior knowledge of Android Application development using Flutter and Dart Programming Language.

Project Preparation

• Register as a Huawei Developer
• Prepare the Development Environment
• Configure the App information in the AppGallery Connect
• Integrating the Flutter Account Kit Plugin
• Integrating the Flutter Location Kit Plugin

Important: While adding the app, the package name you enter should be the same as your Flutter project’s package name.

Note:

• Before you download agconnect-services.json file, make sure the required kits are enabled.
• Signup at https://www.weatherapi.com/ and get an API Key to call the weather API.

Permissions

In order to make your kits work perfectly, add the permissions given below in the AndroidManifest.xml file.

Dependencies

Add the required dependencies in pubspec.yaml file.

You can find all the plugins in pub.dev with the latest versions. After adding them, run flutter pub get command.

All the plugins are ready to use!

Flutter Application Development

This Application uses three services:

1. Networking
2. Position
3. Weather

Let’s start the coding for each service.

Step 1: Networking Service

This will handle out HTTP Requests for Weather API. We will use this to call Weather API.

Step 2: Positioning Service

The app uses Huawei Location Kit to fetch the user’s location. But before fetching the location, the app must login using the Silent-Sign In method. On successful login, the page must navigate to the main page, weather_app.dart.

Step 2.1: Check for location permissions

Step 2.2: Get the last known location by using getLastLocation(). If no last location is available, we will listen to the current location update and then fetch the location.

Step 2.3: Then retrieve the city name from the latitude and longitude using getFromLocation() of the Geocoding Service of the Huawei Location Kit.

Step 3: Weather Service

Step 3.1: We will get the Weather information from Weather API using the position services and Network services.

Step 3.2: After getting the Weather information, we need to alter the background image, the weather icon, Day/Night text, city name, Time, Humidity, Wind, and precipitation from the acquired data.

Complete the Flutter coding with appropriate UI and navigation.

The application is ready!!. We shall execute the application and see the output.

Output

Tips and Tricks

• Always use the latest version of the HMS Flutter Plugin.
• Make sure you have properly enabled all required services in AppGallery Connect.
• Makes sure that agconnect-services.json file is added.
• Make sure dependencies are added in pubspec.yaml files.
• Make sure proper permissions are provided in AndroidManifest.xml

Conclusion

This article helps you to develop Weather App using Flutter and HMS Kits. The Huawei Flutter plugins for different kits are very easy to integrate and use.

Thank you for reading and if you have enjoyed this article, I would suggest you implement this and provide your experience and feedback.

References

huawei_location | Flutter Package

huawei_account | Flutter Package

Flutter Plugins