Flicker grid between map tiles on zoom

[tobias-ullerich-init]

I have recently experienced a flicker grid between the map tiles when zooming on a map with rotation disabled. This bug seems to be depended on the Flutter SDK version and present since Flutter SDK 2.8.x. I tested this with the 0.14.0 version of the library, as well as the master branch. Running the application on Flutter 2.5.x will not lead to this bug. The bug will only appear with disabled map rotation interaction.
The attached video shows the graphical bug more precise. There is a line from north to south near London and a line from east to west at the height of the Label "United Kingdom".

RPReplay_Final1644324774.mp4

To reproduce the bug, simply use this code and run the application with the Flutter SDK 2.8.x or 2.10.x:

FlutterMap(
  options: MapOptions(
    center: LatLng(51.5, -0.09),
    zoom: 5.0,
    interactiveFlags: InteractiveFlag.drag |
        InteractiveFlag.flingAnimation |
        InteractiveFlag.pinchMove |
        InteractiveFlag.pinchZoom |
        InteractiveFlag.doubleTapZoom,
  ),
  layers: [
    TileLayerOptions(
      urlTemplate:
          'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      subdomains: ['a', 'b', 'c'],
      // For example purposes. It is recommended to use
      // TileProvider with a caching and retry strategy, like
      // NetworkTileProvider or CachedNetworkTileProvider
      tileProvider: NonCachingNetworkTileProvider(),
    ),
    MarkerLayerOptions(markers: markers)
  ],
)

[ibrierley]

This sounds similar to another problem, where you get a hairline between times sometimes. They found that if they removed the Opacity widget the hairlines were fixed.

I'm wondering if there's a change in Flutter where there's a rounding error or something on the Opacity widget (iirc there were some changes to Opacity in the latest flutter ver). It would be interesting if you get time to test removing it (apologies, I'll be away for over a week, so won't have time to do any debugging).

[JaffaKetchup]

Related to #1126 perhaps?

[tobias-ullerich-init]

This sounds similar to another problem, where you get a hairline between times sometimes. They found that if they removed the Opacity widget the hairlines were fixed.

I removed the Opacity widget in the _AnimatedTileState and it worked, the hairlines are gone.

Related to #1126 perhaps?

It seems to be the same issue I have.

[ibrierley]

Yes. I think this needs an issue raising on the Flutter Git project, as I suspect its not related to Flutter_map and it's related to an Opacity widget bug. I'm away for a week, so if anyone fancies raising it and posting the 2 related issues go for it, otherwise I'll do it in a week or so.

I'm not sure how essential the Opacity widget is to Flutter_map in the meantime and if it could be removed anyway. I suspect some require its need.

[ibrierley]

@tobias-ullerich-init I'm guessing you've just added your own solution you mentioned, but interested if you or anyone else has tried the PR mentioned #1169 as I think this issue is quite important.

[tranice]

I met the same issue.

[ibrierley]

Can you try a possible fix I added, #1169 see if it helps

[tobias-ullerich-init]

Hi, I was the last days on holidays but now I'm back at work and had some time to test your PR. You are right, as described above, I just removed the Opacity widget as a quick fix. But that wasn't a good solution for everyone. Now I tested your PR and the current released version. You PR looks good. I couldn't reproduce the issue anymore.

Thanks for helping and fixing this issue :)

[ibrierley]

Thanks for the feedback, thats really useful. Would be very interested for anyone else who specifically uses Opacity on their layer to try this.

[jiazeh]

@ibrierley Thanks for your support, I use the following code and it works fine. No more flickering grids.

FlutterMap(
  options: MapOptions(
    center: LatLng(51.5, -0.09),
    zoom: 5.0,
    interactiveFlags: InteractiveFlag.drag |
        InteractiveFlag.flingAnimation |
        InteractiveFlag.pinchMove |
        InteractiveFlag.pinchZoom |
        InteractiveFlag.doubleTapZoom,
  ),
  children: [
    TileLayerWidget(
      options: TileLayerOptions(
        urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c'],
        maxZoom: 19,
      ),
    ),
    TileLayerWidget(
      options: TileLayerOptions(
        urlTemplate: 'https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c'],
        maxZoom: 19,
        backgroundColor: Colors.transparent // The transparent background also works fine
      ),
    ),
  ],
)

flutter --version

Flutter 2.10.4
Dart 2.16.2
OS is Debian