mapbox / mapbox/mapbox-maps-flutter
Normalize ornament positioning relative to safe areas on iOS and Android
@maios is already working on this.
Since Jul 15, 2026.
- Dominant language
- Dart
- Stars
- 380
- Forks
- 204
- PR merge metrics
- No merged PRs in 30d
Description
Mapbox ornaments such as the logo, attribution button, compass, and scale bar are positioned differently on iOS and Android when the map extends behind system UI.
On iOS, the native Maps SDK treats ornament margins as relative to the `MapView` safe area. https://docs.mapbox.com/ios/maps/api/10.5.1/Structs/OrnamentOptions.html
On Android, ornament margins are applied relative to the edges of the native map view. System insets are not handled in the same way.
This results in inconsistent ornament positioning between platforms.
There is also a visual alignment difference between the attribution ornament on iOS and Android. On iOS, the attribution is rendered inside a button with additional internal padding, while Android aligns it more closely to the configured ornament margin. As a result, using the same marginLeft for the attribution and logo does not necessarily align their visible content on iOS, even when their ornament frames share the same position.
## Current Behavior safe area
The same ornament settings produce different visual positions on iOS and Android.
For example:
```dart
await mapboxMap.logo.updateSettings(
LogoSettings(
position: OrnamentPosition.BOTTOM_LEFT,
marginLeft: 8,
marginBottom: 8,
),
);
```
The expected interpretation is:
```text
8 logical pixels from the bottom-left safe-area boundary
```
The effective behavior is closer to:
```text
iOS: safe-area inset + 8
Android: map-view edge + 8
```
A typical workaround looks like this:
```dart
final safeArea = MediaQuery.paddingOf(context);
final bottomMargin = Platform.isAndroid
? safeArea.bottom + 8
: 8;
```
This workaround must be repeated for every affected ornament and every relevant edge. It also couples application code to a native platform difference that is not represented by the Flutter API.
## Current Behavior attribution
For example, an additional iOS-specific offset may be required to visually align the attribution with the logo:
```
const iOSAttributionContentInset = 8.0;
final attributionLeftMargin = Platform.isIOS
? (logoLeftMargin - iOSAttributionContentInset).clamp(0.0, double.infinity)
: logoLeftMargin;
await mapboxMap.attribution.updateSettings(
AttributionSettings(
position: OrnamentPosition.BOTTOM_LEFT,
marginLeft: attributionLeftMargin,
marginBottom: 36,
),
);
```
Without this adjustment, the attribution button can appear visually indented compared with the logo on iOS, even when both use the same configured left margin.
## Expected Behavior
The Flutter SDK should expose a platform-consistent ornament positioning model.
When safe-area-aware positioning is enabled, ornament margins should be measured from the Flutter view's unobstructed safe-area boundary on both iOS and Android.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.