Weather App

A Flutter-based Weather App that provides real-time weather information and a 5-day forecast based on the user's location or a specified city. This app is built using the Provider state management solution, ensuring smooth and efficient updates across the UI.

Features

• Real-Time Weather Data: Displays current temperature, weather condition, and additional weather details like humidity, wind speed, and atmospheric pressure.
• 5-Day Forecast: Detailed 5-day weather forecast, including min/max temperatures and weather conditions.
• Dynamic Units Toggle: Switch between metric and imperial units for temperature and wind speed.
• Responsive Design: Adapts seamlessly across various screen sizes, from mobile devices to large desktop screens, with dynamic margins and paddings.
• Error Handling: User-friendly error message with animation when weather data fails to load.
• Loading State: Loading indicator displayed while fetching weather data.

Screenshots

Mobile Screenshots

Web Screenshots

Technologies Used

• Flutter: Framework for building the UI.
• Provider: State management for managing and updating the app's state.
• Lottie: For engaging animations in error and loading states.
• REST API Integration: Retrieves weather data from a third-party weather service API.

Getting Started

Prerequisites

• Flutter SDK installed on your local machine.

Installation

1. Clone the repository:

   git clone https://github.com/trishna456/weather-app.git

2. Navigate to the project directory:

   cd weather-app

3. Install dependencies:

   flutter pub get

Running the App

On Mobile:

flutter run

On Web

flutter run -d chrome

Project Structure

lib/
├── models/       # Contains data models for the weather data
├── services/     # Contains services for fetching weather data from APIs
├── state/        # Contains the WeatherState class for managing app state with Provider
├── widgets/      # Contains reusable UI components like input fields, weather info displays, and forecast lists
└── pages/        # Contains the main page of the app

Code References

This project draws on a select number of key resources, incorporating techniques and ideas from a few trusted sources, including contributions from the community on Stack Overflow, official Flutter documentation, official Flutter YouTube channel, and free resources from LottieFiles. Below are the primary references:

1. Weather App Design

• References:
  • Dribbble Weather App Designs (Dribbble)
  • Inspiration from Apple's iOS inbuilt weather app
• Usage: The design ideas for the weather app were inspired by exploring multiple designs on Dribbble and drawing inspiration from Apple's iOS weather app.

2. Class Constructors

• References:
  • Dart Constructors (Dart Documentation)
  • Constructor vs Initializer List in Dart (Stack Overflow)
• Usage: These references were used to understand and implement class constructors in Dart.

3. State Management with Provider

• Reference: Simple App State Management (Flutter Documentation)
• Usage: Helpful in implementing state management using the Provider package.

4. Date Utility Functions

• Reference: How do I format a date with Dart? (Stack Overflow)
• Usage: This thread provided a clear and concise method for formatting dates in Dart using DateFormat.

5. Error Resolution

• References:
  • Flutter Common Errors (Flutter Documentation)
  • Flutter Expanded vs. Flexible (Stack Overflow)
  • Flutter error with Expanded (Stack Overflow)
  • Flutter Column Doesn’t Expand (Stack Overflow)
• Usage: Helpful in addressing errors related to layout widgets like Column, Expanded, and Flexible.

6. Lottie Animations

• Creators:

  • jochang, Anahita Salimi on LottieFiles

• Animations Used:

  • Weather Animation 1 (LottieFiles)
  • Weather Animation 2 (LottieFiles)
  • Weather Animation 3 (LottieFiles)
  • Weather Animation 4 (LottieFiles)
  • Error Cat Animation (LottieFiles)

• Usage: Animations were used to enhance the user experience by adding dynamic visual feedback.

7. Flutter Tutorials

• Flutter YouTube Channel: Flutter Dev on YouTube (Flutter YouTube Channel)
• Usage: Guided the development process, particularly in understanding the Flutter's UI components and best practices.

Contributions

Contributions are welcome! If you have ideas for improvements or bug fixes, feel free to submit a pull request or open an issue.