A flutter weather application
SkyCast is a user-friendly application that provides real-time weather data and forecasts for any location worldwide. Built with Flutter, it leverages powerful APIs to deliver accurate and up-to-date weather information, ensuring users can plan their activities effectively, no matter the weather.
As the creator of SkyCast, my responsibilities included:
-
UI Design
- Create a visually appealing user interface for the weather app.
- Alternatively, utilize a provided Figma design link for UI elements.
-
Current Weather Conditions
- Display essential weather data: temperature, description, forecast, sunrise, sunset, uv temp etc.
-
Forecast Display
- Show a 3-day weather forecast with date, weather icons, and temperatures.
-
Weather Data Retrieval
- Choose a public weather API to fetch data.
- Implement location services to automatically get the user’s location (latitude and longitude).
-
Location Management
- Use the user's location to retrieve specific weather data.
- Provide an option for users to manually enter a location.
-
Unit Conversion
- Implement functionality to convert temperatures between Celsius and Fahrenheit.
-
Local Storage
- Use a local database (like Hive or Sqflite) to persist fetched weather data for offline access.
-
Code Structure
- Follow best practices for code structure, adhering to design patterns like MVC.
- Use a state management library (like Riverpod or BLoC) instead of setState.
-
Error Handling
- Gracefully manage exceptions and errors throughout the application.
While developing the Weather App using the Riverpod state management library, I encountered several challenges:
-
Learning Curve: Transitioning from GetX to Riverpod posed a learning curve, especially in understanding the various types of providers and their use cases.
-
API Calls: Implementing API calls using FutureProvider was initially confusing. It took some time to grasp how to manage loading and error states effectively.
-
State Management: Differentiating between single state management and multiple state management was challenging. I had to rethink how to structure my state and when to use StateNotifierProvider for more complex scenarios.
-
UI Integration: Integrating providers into the UI using Consumer and handling the different states (loading, data, error) required practice and experimentation.
To address these challenges, several strategies and solutions were implemented:
-
Study: I dedicated time to studying the Riverpod documentation, which provided a comprehensive understanding of the different providers and their use cases.
-
YouTube Tutorials and Blogs: I supplemented my learning by watching YouTube tutorials like dbesTech and reading various blogs focused on Riverpod. These resources offered practical examples and insights that enhanced my understanding of implementing state management effectively.
-
Learning from Errors: I embraced the errors I encountered as learning opportunities, analyzing what went wrong and adjusting my approach accordingly. This mindset helped me build resilience and adaptability.
Ensure Flutter is installed on your machine. For installation instructions, refer to the official Flutter website.
Follow these steps to run the News Read Application:
- Clone this repository to your local machine:
git clone https://github.com/hredhayxz/skycast.git- Navigate to the project folder:
cd skycast- Install dependencies:
flutter pub getConnect your device or emulator and run the app using the following command:
flutter runSkyCast integrates the following packages to enhance functionality:
http: ^1.2.2: The HTTP package provides a straightforward way to make HTTP requests in your Flutter app. It's essential for fetching data from APIs and working with web services.cached_network_image: ^3.4.1: For network image caching and showing.flutter_riverpod: ^2.5.1: Riverpod is a state management library for Flutter that simplifies the process of managing application state. It provides a clean and efficient way to handle state and dependencies in your app.flutter_screenutil: ^5.9.3: A flutter plugin for adapting screen and font size.Let your UI display a reasonable layout on different screen sizes!geolocator: ^13.0.1: A Flutter geolocation plugin which provides easy access to platform specific location services.flutter_launcher_icons: ^0.14.1: This package simplifies the process of generating and setting app icons for your Flutter application. It allows you to customize app icons with ease.intl: ^0.19.0: Provides internationalization and localization facilities, including message translation, plurals and genders, date/number formatting and parsing, and bidirectional text.hive: ^2.2.3 & hive_flutter: ^1.1.0: Hive is a lightweight and buzzing-fast key-value NoSQL database made for Flutter and Dart.
The SkyCast directory structure is organized as follows:
skycast/
├── assets/
│ └── images/
│ ├── app_logo.png
│ ├── bottom_bg.png
│ ├── sunrise_and_sunset.png
│ └── uv_index_image.png
└── lib/
├── controllers/
│ └── weather_controller.dart
├── models/
│ ├── helper/
│ │ └── pref.dart
│ └── weather_model.dart
├── providers/
│ └── weather_provider.dart
├── services/
│ ├── location_service.dart
│ └── weather_service.dart
├── utils/
│ ├── api_constants.dart
│ ├── dimens.dart
│ ├── image_utils.dart
│ └── theme_manager.dart
├── views/
│ ├── widgets/
│ │ ├── weather_details/
│ │ │ ├── day_button_widget.dart
│ │ │ ├── hourly_weather_card.dart
│ │ │ ├── hourly_weather_widget.dart
│ │ │ ├── live_forecast_data_widget.dart
│ │ │ ├── location_info_widget.dart
│ │ │ ├── searchfield_widget.dart
│ │ │ └── sunrise_sunset_view_widget.dart
│ │ └── weather_details.dart
│ └── home_screen.dart
├── app.dart
└── main.dart