Clima is a user-friendly weather app designed to provide you with almost accurate and up-to-date weather information in the simplest way possible. With Clima, you can easily check the current temperature in your location for today and the next six days, allowing you to plan your activities accordingly. The app also offers detailed hourly forecasts, providing you with weather updates every three hours throughout the day. Say goodbye to complicated interfaces and overwhelming data—Clima focuses on delivering essential weather information, making it the go-to choice for anyone seeking a straightforward and reliable weather app.
Before you start, you'll need to obtain API keys from the following services:
- Google Maps API Key:
- Visit the Google Cloud Console.
- Create a new project and enable the Google Maps API.
- Generate an API key and restrict its usage as needed.
- To integrate the map with your project, follow the Configuration
OpenWeather API Key:Go to the OpenWeather website.Sign up for a free account and generate an API key.
- Open-Meteo API
- Go to the Open-Meteo website.
- You don't need to sign up because this api don't have
api key
- Check whatever end point you need from the Documentation
- News API Key:
- Go to the NewsAPI website.
- Sign up for a free account and generate an API key.
Due to insufficient data, the
OpenWeather
API is unable to provide the required information. However, theOpen-Meteo
API offers a variety of options to choose from.
Let's start with setting up the APIs in your project. We can begin with Clima and then move on to other approaches.
To begin with, we need to define the API keys using this command.
flutter run --dart-define=YOUR_API_KEY=API_KEY_VALUE --dart-define=YOUR_API_KEY=API_KEY_VALUE
then we can get these values in your Dart code like this in a EnvHelper. And use this class as your Environment specific config all over the project.
abstract class EnvHelper {
static const GOOGLE_MAPS_API = String.fromEnvironment('GOOGLE_MAPS_API');
static const NEWS_API_KEY = String.fromEnvironment('NEWS_API_KEY');
}
Android configuration
To make the necessary changes, please navigate to your app module's Gradle file and add the provided code.
def dartEnv = [
GOOGLE_MAPS_API: '', // leave it like this
NEWS_API_KEY: '' // it have to be empty
];
if (project.hasProperty('dart-defines')) {
dartEnv = dartEnv + project.property('dart-defines')
.split(',')
.collectEntries { entry ->
def pair = new String(entry.decodeBase64(), 'UTF-8').split('=')
[(pair.first()): pair.last()]
}
}
iOS configuration
I didn't make it 🙂
Other Approaches
- Clone the repository to your local machine:
git clone https://github.com/your-username/your-project.git
cd your-project
- In the project directory, create a new file named
.env
to store your API keys:
# .env file
GOOGLE_MAPS_API_KEY=your-google-maps-api-key
NEWS_API_KEY=your-news-api-key
- Save the .env file in the root of your Flutter project directory.
OR
do what I did, create a dart class containes the keys and add it to .gitignore
like this :
class Api {
static const String key = "your-openweather-api-key";
static const String googleKey = "your-google-maps-api-key";
}
Now that you have set up your API keys, you can run the Flutter project on your local machine. Make sure you have Flutter installed. If not, you can follow the official Flutter installation guide.
- Install project dependencies:
flutter pub get
- Run the Flutter project:
flutter run
This will launch the Flutter app, allowing you to utilize Google Maps and OpenWeather services within your project.
Note Make sure to add the .env file to your
.gitignore
to keep your API keys private and not expose them in your version control system. This ensures the security of your API keys.
-
Current Weather: View the real-time weather conditions for your current location, including temperature, date, and weather description.
-
6-Day Forecast: Plan your week ahead with a 6-day weather forecast. Get insights into the upcoming weather trends, helping you make informed decisions.
-
Hourly Updates: Access detailed hourly forecasts, providing weather updates every 3 hours throughout the day. Stay prepared for changing weather conditions.
-
Google Maps Integration: Seamlessly integrate Google Maps functionality into the app. Visualize weather data on an interactive map, allowing users to explore different locations.
-
Notifications: Receive daily weather notifications to stay informed about significant weather changes. Customize notification preferences for specific weather conditions or time intervals.
-
User-Friendly Interface: Experience the simplicity of design. Clima features an intuitive and minimalistic interface, ensuring effortless navig