Flutter weather app 🌥️☔☀️

This is an example weather app made with Flutter using Riverpod as a state management solution. The app is using https://open-meteo.com as a weather API.

Setup

# Install flutter packages
flutter pub get

# Run code generation to generate all needed classes
flutter dart run build_runner watch -d

Features

The following technical features are implemented in the app:

1. Search with caching and debouncing
2. API request caching
3. State management with Riverpod
4. Flutter Material3 design system
5. Persistent state through SharedPreferences
6. Light and dark theme

Tech stack

• Flutter
• Riverpod with code generation for state management, DI and caching
• Freezed for the data models to generate essential methods like toString, ==, hashCode and to handle de/serialization of the data
• Dio as an HTTP client
• Flutter hooks for reusable widget logic
• Shared Preferences for persistent storage
• Flutter native splash to customize the splash screen

Architecture

The app follows a Model-View-ViewModel (MVVM) architectural pattern with a layer-first project structure.

The application is split into three separate layers:

1. Presentation layer: Flutter widgets and Riverpod providers (ViewModels)
2. Domain layer: Data models with business logic
3. Data layer: Repositories to access the data

Note

For more complex projects, an additional application/service layer can be introduced between the presentation and domain layers to handle the business logic separately, rather than embedding it within the models.

The Riverpod providers act as ViewModels to establish data bindings and update the UI as needed. The providers retrieve their data from repositories, making the repositories easily replaceable and ensuring a clear separation of concerns.

Project Structure

weather_app/
├── android/
├── ios/
├── lib/
│   ├── main.dart          # Entry point of the application
│   ├── ui
│   │   ├── pages/         # Main pages of the app
│   │   ├── views/         # View components that are included on the pages
│   │   └── widgets/       # Reusable widgets
│   ├── provider/          # Riverpod provider managing the state of the app
│   ├── models/            # Data models of the app
│   └── repositories/      # Data access through API calls
├── assets/
├── test/
├── pubspec.yaml
└── README.md

Screenshots