googlemaps / googlemaps/flutter-navigation-sdk

[Feature Request]: Add support for custom CarPlay Navigation UI overlays

Open
#358 4 comments 0 reactions 1 assignee Claimed by @jokerttu View on GitHub
feature request priority: p3
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.