Skip to content

added full world clock functionality#876

Open
inderjeet20 wants to merge 1 commit intoCCExtractor:mainfrom
inderjeet20:wclock
Open

added full world clock functionality#876
inderjeet20 wants to merge 1 commit intoCCExtractor:mainfrom
inderjeet20:wclock

Conversation

@inderjeet20
Copy link
Contributor

@inderjeet20 inderjeet20 commented Mar 11, 2026

World Clocks Feature Implementation

fixes #225

Description

Add a comprehensive World Clocks feature to the Ultimate Alarm Clock app, allowing users to track time across multiple global timezones. The feature integrates seamlessly with the existing design, state management, and localization systems.

Changes Overview

Features Added

  • 4th Navigation Tab — "World Clock" tab in the bottom navigation bar alongside Alarm, Stopwatch, and Timer
  • Permanent Local Timezone Card — Always-visible card showing the device's current timezone, time, date, and UTC offset with a distinctive border
  • World Clock Cards — Individual cards for each user-added timezone, displaying:
    • City/location name
    • Current time (respects 24-hour format setting)
    • Date (day, month)
    • UTC offset chip
    • Time difference from device timezone (e.g., "+5h from you")
  • Add Clock Dialog — Bottom sheet with searchable IANA timezone database using the timezone package
  • Swipe-to-Delete with Confirmation — Swipe left to remove a clock, with confirmation dialog to prevent accidental deletion
  • Real-time Updates — All clocks update every second with smooth per-second tick
  • Persistent Storage — Added world clocks saved to device via GetStorage, restored on app restart
  • Responsive Layout — Card layout adapts to screen width without text overflow; chips wrap on narrow screens
  • Theme Integration — Full dark/light theme support, respects app colors and text styles
  • Localization — Translations added to all 5 languages (English, German, French, Russian, Spanish)

Technical Improvements

  • No Overflow Issues — Time displayed on separate lines (HH:mm + AM/PM) preventing text crowding
  • Proper DST Handling — Uses industry-standard timezone package (0.9.4) with full IANA timezone database
  • GetX Architecture — Follows existing patterns with controller, binding, and view separation
  • Reactive Updates — Obx-based per-second UI rebuilds for live clock display

Files Modified

New Files (5)

  • lib/app/data/models/world_clock_model.dart — Data model with serialization
  • lib/app/modules/worldClock/bindings/world_clock_binding.dart — Dependency injection
  • lib/app/modules/worldClock/controllers/world_clock_controller.dart — Business logic (timer, time formatting, storage)
  • lib/app/modules/worldClock/views/world_clock_view.dart — Full UI with 4 internal widgets

Modified Files (10)

  • pubspec.yaml — Added timezone: ^0.9.4 dependency
  • lib/main.dart — Initialize timezone database on app startup
  • lib/app/data/providers/get_storage_provider.dart — Added readWorldClocks() / writeWorldClocks() methods
  • lib/app/routes/app_routes.dart — Added WORLD_CLOCK = '/world-clock' route
  • lib/app/routes/app_pages.dart — Registered GetPage for WorldClockView with binding
  • lib/app/modules/bottomNavigationBar/bindings/bottom_navigation_bar_binding.dart — Inject WorldClockController
  • lib/app/modules/bottomNavigationBar/controllers/bottom_navigation_bar_controller.dart — Added WorldClockView to pages list (index 3)
  • lib/app/modules/bottomNavigationBar/views/bottom_navigation_bar_view.dart — Added 4th nav item with globe icon
  • lib/app/utils/language.dart — Added translation keys (English)
  • lib/app/utils/languages/{german,french,russian,spanish}_translations.dart — Added translations for all 5 languages

New Translation Keys

All 5 language files updated with:

  • 'World Clock' — Tab label
  • 'Add a world clock' — Dialog title
  • 'Search timezones' — Search placeholder
  • 'My Location' — Local card label
  • 'Remove Clock' — Dialog title for deletion

How to Test

  1. Navigation — Tap the globe icon in bottom nav; verify the 4th tab loads without errors
  2. Local Card — Verify the permanent "My Location" card appears at the top with correct timezone abbreviation, time, date, and UTC offset
  3. Add Clock — Tap FAB, search for "New York", tap to add. Verify the card appears with correct time difference
  4. Multiple Clocks — Add 3+ clocks from different continents (e.g., Tokyo, London, Sydney) and verify times are accurate
  5. Swipe Delete — Swipe left on any user-added clock; verify confirmation dialog appears; tap Remove to delete
  6. Persistence — Kill the app and relaunch; verify added clocks are restored from storage
  7. 24-hour Format — Go to Settings, toggle "Enable 24 Hour Format"; verify times update immediately (clocks should show/hide AM/PM)
  8. Theme Toggle — Switch between light/dark themes; verify card colors and text colors adapt correctly
  9. Overflow — Verify text doesn't overflow on narrow screens; chips wrap if needed
  10. Responsiveness — Test on various screen sizes and orientations

Verification Checklist

  • ✅ Timezone package resolves with no dependency conflicts
  • ✅ All 5 new modules compile without errors
  • ✅ No breaking changes to existing features (Alarm, Timer, Stopwatch remain functional)
  • ✅ Proper GetX reactive patterns used throughout
  • ✅ Time calculations use timezone-aware IANA database
  • ✅ Storage persists across app restarts
  • ✅ Confirms before deletion
  • ✅ No text overflow on cards
  • ✅ Respects user's 24-hour format preference
  • ✅ Full theme integration (dark/light)
  • ✅ All 5 languages supported

Dependencies Added

  • timezone: ^0.9.4 — IANA timezone database and DST-aware time calculations

Notes

  • The "My Location" card uses DateTime.now() directly (system time); it's not swipe-deletable
  • User-added clocks can be deleted via swipe + confirmation
  • Card layout uses Row with Expanded on left (city details + chips) and fixed-width column on right (time), preventing overflow
  • Per-second updates via Timer.periodic in controller; tick reactive variable triggers Obx rebuilds
  • Search functionality is case-insensitive and matches both IANA ID and derived city name

Branch

  • Feature branch: wclock
  • Ready for: main or develop

UX

image

@inderjeet20
Copy link
Contributor Author

@MarkisDev can you please review it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature: Integrating World Clock in ultimate_alarm_clock

1 participant