mapbox / mapbox/mapbox-maps-flutter

Visual Flicker Persists When Popping Route Between Two Screens with MapWidgets

Open
#1,004 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Dart
Stars
380
Forks
204
PR merge metrics
No merged PRs in 30d

Description

**Bug Description**
When navigating between two screens that both contain a MapWidget, a noticeable visual flicker occurs. This happens specifically when using Navigator.pop() to return from the top screen to the one below it. The map from the screen being popped seems to briefly render over the destination screen before disappearing, creating a jarring user experience.

**Steps to Reproduce**

- Create a ScreenA that contains a MapWidget.

- Create a ScreenB that also contains a MapWidget.

- From ScreenA, push ScreenB onto the navigation stack

` (e.g., Navigator.push(context, MaterialPageRoute(builder: (_) => ScreenB()))).
`
- On ScreenB, have a button or back gesture that executes

`Navigator.pop(context).`

- Pop ScreenB to return to ScreenA.

Observe the visual flicker as ScreenA is revealed.

**Expected Behavior**
The navigation transition when popping the route should be smooth, without any visual artifacts or flickering from the map on the previous screen.

**Current Behavior**
A flicker occurs where the MapWidget from ScreenB is briefly visible during the transition back to ScreenA.

**Additional Context & Workarounds Tried**
I have attempted several workarounds, but none provide a complete and stable solution:

- Using popAndPush or replaceAll: These navigation methods successfully avoid the visual flicker. However, they are not viable solutions as they create memory leaks by creating new screen instances instead of returning to the original one, causing the navigation stack to grow indefinitely.

- This leads me to believe there is still an underlying race condition or an incomplete resource cleanup in the native PlatformView lifecycle when one map instance is destroyed while another is being revealed during a pop transition.

**Video**

https://github.com/user-attachments/assets/65896649-5d3a-492a-8633-e71ad72ea574

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with two screens containing a MapWidget, using Navigator.push and Navigator.pop as described, and compare the behavior with the linked video. Investigate the native PlatformView lifecycle during the pop transition, especially cleanup of the popped map while the destination map is revealed; done means returning to the first screen without flicker or a growing navigation stack.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.