googlemaps / googlemaps/flutter-navigation-sdk
[Feature Request]: Add support for custom CarPlay Navigation UI overlays
- Dominant language
- Dart
- Stars
- 75
- Forks
- 54
- Avg merge
- 4d 2h
- Merged PRs (30d)
- 5
Description
### Is there an existing issue for this?
- [x] I have searched the existing issues
### Description of the bug
### Description
When using the `BaseCarSceneDelegate` from the Flutter Navigation SDK, the built-in CarPlay navigation UI (e.g. maneuver instructions and travel estimates) overlays a large portion of the screen.
While it's possible to hide some UI elements using options like `setNavigationHeaderEnabled(false)` or `setNavigationFooterEnabled(false)`, there is currently **no public API to replace or fully redesign these overlays** — especially the maneuver view shown during navigation.
### Flutter version
3.27.4
### Package version
0.5.1
### Native SDK versions
- [x] I haven't changed the version of the native SDKs
### Flutter Doctor Output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.27.4, on macOS 15.3.2 24D81 darwin-arm64, locale
ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] VS Code (version 1.99.0)
[✓] Connected device (5 available)
! Error: Browsing on the local area network for iPhone SE dev. Ensure the device
is unlocked and attached with a cable or associated with the same local area
network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
! Error: Browsing on the local area network for iPhone 13. Ensure the device is
unlocked and attached with a cable or associated with the same local area
network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources
• No issues found!
### Steps to reproduce
1. On the iOS side, create a subclass of `BaseCarSceneDelegate` (e.g., `CarSceneDelegate.swift`).
2. Implement `getTemplate()` and return `super.getTemplate()` to use the default behavior:
```swift
class CarSceneDelegate: BaseCarSceneDelegate {
override func getTemplate() -> CPMapTemplate {
return super.getTemplate()
}
}
```
3. In your Info.plist, configure the CarPlay scene using CarSceneDelegate.
4. Enable CarPlay capability and entitlements in your Xcode project (com.apple.developer.carplay-maps).
5. On the Flutter side, initialize a navigation session and start guidance:
```dart
await GoogleMapsNavigator.initializeNavigationSession();
await GoogleMapsNavigator.setOrigin(...);
await GoogleMapsNavigator.setDestination(...);
await GoogleMapsNavigator.startGuidance();
```
6. Run the app using the CarPlay Simulator.
7. Observe that the default maneuver UI and trip estimate overlays occupy a large portion of the screen.
8. Attempting to reposition or style this overlay is not supported via any public API.
### Expected vs Actual Behavior
1. Use google_navigation_flutter with BaseCarSceneDelegate subclass.
1. Initialize a navigation session using Flutter code.
1. Observe that the default maneuver panel overlays the center of the screen.
1. No API is available to customize or replace this layout.
### Code Sample
```swift
class CarSceneDelegate: BaseCarSceneDelegate {
override func getTemplate() -> CPMapTemplate {
let template = super.getTemplate()
getNavView()?.setNavigationHeaderEnabled(true)
getNavView()?.setNavigationFooterEnabled(true)
getNavView()?.setSpeedometerEnabled(true)
return template
}
}
```
### Additional Context
### Screenshot
Contributor guide
Assessment
This issue has not been assessed yet.