A beautiful, responsive, and modern Flutter weather app that shows RealTimecurrent weather, hourly forecasts, and key additional information — all powered by the OpenWeatherMap API.
Built with a focus on clean UI, Material 3 design, and smooth user experience.
Get real-time temperature, sky condition (like Sunny, Clouds, Rain), and icon visuals for your city.
Horizontally scrollable forecast cards showing weather for the next 8 hours with temperature, time, and sky icon.
Detailed metrics like:
- 💧 Humidity
- 💨 Wind Speed
- 🎯 Atmospheric Pressure
Tap the refresh icon (🔄) in the AppBar to fetch the latest weather data instantly.
Responsive dark-themed design using Material 3 widgets, cards, and animations.
- Flutter SDK (>=3.8.1)
- An API key from OpenWeatherMap
git clone https://github.com/your-username/weather_app.git
cd weather_appflutter pub getCreate a .env file in the root directory:
open_Weather_API_Key=YOUR_OPENWEATHERMAP_API_KEYNote: The
.envfile is included in.gitignoreand should not be committed.
flutter runlib/
main.dart # App entry point
weather_screen.dart # Main UI and logic for weather display
hourly_focus_item.dart # Widget for hourly forecast cards
additional_info_item.dart# Widget for additional info (humidity, wind, pressure)
secrets.dart # Loads API key from .env
- flutter_dotenv - For environment variable management
- http - For making API requests
- intl - For date/time formatting
- cupertino_icons - iOS style icons
Basic widget test is included in test/widget_test.dart. Run tests with:
flutter test- Fork the repository
- Create your feature branch (
git checkout -b feature/YourFeature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin feature/YourFeature) - Open a Pull Request
- OpenWeatherMap for the weather API
- Flutter for the awesome framework