[Bug]: Map Padding Behavior

[SabirHalil]

Is there an existing issue for this?

• I have searched the existing issues

Description of the bug

Currently, when I call setPadding on the map controller, the map view itself correctly adjusts. However, the turn-by-turn navigation UI elements (such as the remaining time, destination panel, or navigation instructions) are not affected by the padding.

This causes those elements to overlap with other parts of the UI, especially when I want to add custom widgets on top of the map.

👉 My question: How can I adjust the padding so that navigation UI elements (time, destination, instructions, etc.) also respect the defined padding?

Flutter version

3.32.5

Package version

0.6.4

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.32.5, on macOS 15.3.2 24D81 darwin-arm64, locale en-TR)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2025.1)
[✓] VS Code (version 1.104.0)
[✓] Connected device (5 available)
[✓] Network resources

• No issues found!

Steps to reproduce

Just run the provided code.

Expected vs Actual Behavior

After calling setPadding, the map camera and navigation UI elements should adjust to avoid overlapping with other UI or custom widgets, but currently, while the map camera respects the padding, the navigation UI elements remain fixed to the screen edge and overlap with overlays and the map's inset region.

Code Sample

  Future<void> onViewCreated(GoogleNavigationViewController controller) async {
    navigationViewController = controller;
    await controller.setMyLocationEnabled(true);
    if (userLocation.value == null) {
      final loc = await controller.getMyLocation();
      if (loc != null) userLocation.value = loc;
    }
    await navigationViewController?.setSpeedLimitIconEnabled(true);
    await navigationViewController?.setReportIncidentButtonEnabled(false);
    await navigationViewController?.setSpeedometerEnabled(true);
    await navigationViewController?.setPadding(EdgeInsets.only(top: 100, bottom: 150));
    if (Platform.isAndroid) {
      await navigationViewController?.settings.setZoomControlsEnabled(true);
    }
  }


  Future<void> startNavigation() async {
    if (!validRoute.value) return;
    await navigationViewController?.setNavigationUIEnabled(true);
    await GoogleMapsNavigator.startGuidance();
    await navigationViewController?.setPadding(EdgeInsets.only(top: 100, bottom: 150));
    await navigationViewController?.followMyLocation(CameraPerspective.tilted);
    guidanceRunning.value = true;
  }

Additional Context

No response

[jokerttu]

Hi @SabirHalil,
This package is a wrapper around the Navigation SDKs for Android and iOS.
The map padding feature controls the padding for map elements such as routes and buttons.
Currently, the header and footer location/padding cannot be changed.
One option is to hide the header and footer and create custom overlays using data from turn-by-turn events (navInfo).

[lazar89nis]

Is there any way to move the top navigation widget so it's not under the status bar on Android?

[SabirHalil]

Is there any way to move the top navigation widget so it's not under the status bar on Android?

I have solved this issue by wrapping with SafeArea as shown in code sample:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Obx(() {
      if (Platform.isAndroid) {
        SystemChrome.setSystemUIOverlayStyle(
          SystemUiOverlayStyle(
            statusBarColor: Colors.transparent,
            statusBarIconBrightness: Brightness.dark,
            statusBarBrightness: Brightness.light,
            systemNavigationBarColor: controller.isNavigationActive.value
                ? Colors.black.withOpacity(0.1)
                : Colors.transparent,
            systemNavigationBarIconBrightness: Brightness.dark,
          ),
        );
      }

      if (controller.isInitializing.value) {
        return _buildInitializationOverlay();
      }

      return SafeArea(
        top: Platform.isAndroid,
        bottom: false,
        child: Stack(
          children: [
            GoogleMapsNavigationView(
              onViewCreated: controller.onViewCreated,
              onCameraIdle: controller.onCameraIdle,
              initialCameraPosition: CameraPosition(
                target: LatLng(
                  latitude: controller.currentLocation.value?.latitude ??
                      InitialPositionHelper.getInitialPosition().latitude,
                  longitude: controller.currentLocation.value?.longitude ??
                      InitialPositionHelper.getInitialPosition().longitude,
                ),
                zoom: 15,
              ),
              initialNavigationUIEnabledPreference:
                  controller.isNavigationActive.value
                      ? NavigationUIEnabledPreference.automatic
                      : NavigationUIEnabledPreference.disabled,
              onNavigationUIEnabledChanged: (_) {},
              onRecenterButtonClicked: (_) {},
              initialMapToolbarEnabled: false,
            ),
            _buildMenuButton(),
            _buildZoomControls(),
            _buildLoadingIndicator(),
            _buildCameraWarning(context),
            _buildLocationPermissionBanner(),
            const VolumeWarningBanner(),
            _footerSection(),
          ],
        ),
      );
    }),
  );
}

The result screenshot:

[lazar89nis]

This works, but you are moving the whole page, not just the banners, so you don't get the map under the status bar. But thx for the solution

[lazar89nis]

I think i found one bug or problem with set padding. setPadding on Android requires devicePixelRatio multiplier.

I have a custom bottom bar, and on iOS if I set the padding to the size of my widget Google logo and navigation arrow are on the right position. On Android if I do the same google logo and navigation arrow are under my widget. If I then on Android multiply my widget height by devicePixelRatio logo and navigation icon get in the same position as on iOS. @jokerttu can you please check this?

[jokerttu]

@lazar89nis
Yes, you are right. The current implementation maps directly to the native SDK API, which by default does not take into account the device's pixel ratio.
We will either adjust the API (breaking change) or update the documentation (and examples) to make this clear for developers.

Thank you for reporting this!