Weather App (Flutter)

Overview

This project is part of Mobile Module 03 (42 Berlin Mobile Piscine) and focuses on enhancing an existing weather application by improving its design, usability, and visual experience using Flutter.

The application allows users to:

• Search for cities
• View current weather conditions
• Explore detailed daily and weekly forecasts

The main objective is to create a clean, intuitive, and visually appealing UI, where users can understand the displayed information in under 3 seconds.

Screenshots

Start	Now	Search	Today	Week

Tech Stack

• Flutter
• Dart
• REST API (Weather data by Open-Meteo.com)
• Charts (fl_chart)
• Location (geolocator)
• Geocoding (geocoding)

Features

Search Bar

• Clear and user-friendly input field
• Displays maximum 5 suggestions
• City names are easy to read
• Includes a geolocation button to fetch the user's current location

Background

• Full-screen background image
• Weather-themed and non-intrusive
• Fixed across all tabs
• Implemented once at the root of the app (no duplication)

Current Weather Tab

Displays real-time weather information:

• Location (City, Region, Country)
• Temperature
• Weather description
• Weather icon
• Wind speed

The layout ensures users can instantly understand the weather at a glance.

Today’s Weather Tab

Shows hourly weather details:

• Location (City, Region, Country)
• Temperature chart (hourly curve)
• Scrollable list with:
  • Time
  • Temperature
  • Weather condition (icon/text)
  • Wind speed

Weekly Weather Tab

Displays a 7-day forecast:

• Location (City, Region, Country)
• Chart with:
  • Minimum temperature curve
  • Maximum temperature curve
• Scrollable list with:
  • Day of the week
  • Min temperature
  • Max temperature
  • Weather condition

Design Principles

• Minimal and clean UI
• Consistent color palette
• High contrast for readability
• Fixed background across navigation
• Smooth tab transitions
• Information hierarchy for quick scanning

Project Structure

weather/
├── lib/
│   ├── extensions/
│   ├── models/
│   ├── services/
│   ├── state/
│   ├── widgets/
│   └── main.dart
├── assets/
└── pubspec.yaml

Getting Started

Clone the repository:

git clone https://github.com/mike-k-git/weather

Navigate into the project:

cd weather

Install dependencies:

flutter pub get

Run the app:

flutter run