Dynamic Google Map Themes with Riverpod

This project demonstrates how to implement dynamic Google Map theming in a Flutter app using Riverpod for state management. Users can seamlessly switch between different map styles (e.g., light, dark, retro) based on app theme or user preference.

Click to download APK here!!

_{Built by Nkpozi Marcel Kelechi (X: @Captured-Heart)}

AN INTRO VIDEO OF THE APP

dynamic_map_themes_intro.mov

Demo (What to test)

- Tap the Floating action button on the bottom right, it expands
- On expanded, you can click on any of the styles. Voila 🥳

---

Getting Started

Read up on the full configuration of Google Maps and the apikey: https://medium.com/@nkpozimarcelkelechi/enhance-your-google-maps-with-dynamic-themes-using-riverpod-e3d509ca1e1a

After cloning,

FVM setup

it runs on flutter version:
flutter: ">=3.27.0"
dart: ">=3.7.0 <4.0.0"

Install fvm if not already installed.

dart pub global activate fvm

Install the local flutter version.

fvm install

---

Key Features

1. Themed Map:

   • Automatically applies custom Google Map styles based on the selected app theme (light/dark) or user preference, enhancing visual consistency throughout the app.

2. Dynamic Theme Switching

   • Users can switch between themes in real-time, with immediate reflection on the Google Map appearance.

3. Modular Design

   • Clean separation of concerns with reusable providers, making it easy to extend or integrate into existing Flutter projects.

UI Shots

Tools

• Shared_Preferences: Wraps platform-specific persistent storage for simple data (NSUserDefaults on iOS and macOS, SharedPreferences on Android, etc.)
• Flutter_Riverpod: A reactive caching and data-binding framework.
• Geolocator: A Flutter geolocation plugin which provides easy access to platform-specific location services.
• Google_Maps_Flutter: A Flutter plugin that provides a Google Maps widget.
• Flutter_expandable_fab: A speed dial FAB (Floating Action Button) that can animate the display and hiding of multiple action buttons.