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

[yutsuki3]

Is there an existing issue for this?

• 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

• 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:

   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:

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.
2. Initialize a navigation session using Flutter code.
3. Observe that the default maneuver panel overlays the center of the screen.
4. No API is available to customize or replace this layout.

Code Sample

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

[jokerttu]

Hi, and thank you for submitting this issue.

I've converted this into a feature request.

The google_navigation_flutter package is a wrapper around the native Google Maps Navigation SDKs for Android and iOS, and exposes the supported platform features of the native SDKs.

Regarding template support for Android Auto and CarPlay: the plugin do allow adding custom buttons as overlays on top of the navigation view. However, customizing or replacing the navigation UI elements themselves (such as maneuver panels or trip estimates) is currently not possible via public APIs.

To enable full customization of the navigation UI in Flutter, things get more complex:

• Flutter currently doesn't provide a built-in mechanism to split the widget hierarchy across multiple native views. There is ongoing discussion and planning around this limitation.
• One possible workaround is embedding a custom Flutter engine view and handling communication between it and the main view using platform channels. You can read more about this approach here:
  https://docs.flutter.dev/add-to-app/multiple-flutters This will need to be drawn over the navView, see next bullet.
• As an alternative to using BaseCarSceneDelegate, developers can fully override its behavior and avoid using the MapView as the direct UIViewController view. Instead, you can create a custom layout that incorporates the map view and your own overlay components.
  For example:

        self.customLayout = CustomLayout(self.navView) // Your own layout implementation with overlays over navView
        self.navViewController?.view = self.customLayout.view;

The CarPlay and Android Auto implementations are intentionally left open and flexible, as developers may have very different needs regarding what information to display. Implementing such customizations will require changes on the native code side.

To others visiting on this issue, the default view how CarPlay view looks on example app:

[yutsuki3]

Thank you very much for converting this into a feature request and for the detailed explanation.

I understand that currently there is no public API to fully replace or resize the built-in CarPlay UI elements like the maneuver panel or trip estimate. While the workaround of overriding the layout via UIViewController is helpful, we would ideally like to avoid custom native implementations and stay within the standard SDK usage as much as possible.

If there's any plan to expose additional configuration options (e.g., resizing or toggling more specific elements), it would be incredibly valuable for developers aiming to maintain design consistency while supporting CarPlay.

We’ll continue exploring what's possible for now using the existing APIs, but we appreciate your transparency and would be glad to follow any future updates on this topic. Thanks again!

[yutsuki3]

As a quick follow-up: while we understand that full replacement of the CarPlay UI is not currently supported via public APIs, we were wondering if there's any way to make partial adjustments using the existing SDK components.

For example:

• Is there any way to adjust the size or position of the trip estimate or maneuver card through custom layout constraints?
• Alternatively, can we choose to only show certain UI elements (e.g., hide the ETA but keep the maneuver info)?
• Are there any best practices for presenting custom information without fully replacing the CarPlay scene?

We're aiming to enhance the user experience while still staying as close as possible to the standard SDK. Any guidance or unofficial workarounds (even if experimental) would be highly appreciated.

Thanks.

[jokerttu]

I also tested whether changing the header font sizes would help reduce the header size, but it had no effect on the panel size.
We will consider in future updates whether we should expose the base class more and include a custom UI in the example app to demonstrate how this could be achieved.

If you're interested in experimenting with modifications to the package implementation to achieve this, feel free to submit a pull request to help improve the extensibility of the Android Auto / CarPlay view rendering.