[BUG] AssetTileProvider loading slowly after Flutter 3.7 & FM v3.1.0

[WorldpixelSoftware]

What is the bug?

After upgrading to latest stable version of Flutter (3.7.0) as of today 25.1.2023 I noticed a massive lag within the loading of offline-maps. It is literally so slow, you can even see it in the example app.

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.7.0, on Microsoft Windows [Version 10.0.19044.2486], locale de-DE)
[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)
[√] Android toolchain - develop for Android devices (Android SDK version 32.0.0-rc1)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.15)
[√] Android Studio (version 2021.2)
[√] Connected device (3 available)
[√] HTTP Host Availability

The Windows version error is a known error in the latest flutter stable, please disregard.

What is the expected behaviour?

Load offline image assets wihtin reasonable time.

How can we reproduce this issue?

Run the example on https://zapp.run/pub/flutter_map or your device of choice. Choose the offline example. Watch how slow it takes to update the map while zooming in and out or panning.

Do you have a potential solution?

Must have something to do with the AssetImage that gets created in AssetTileProvider. There seems to be a change on the Flutter side, that makes Asset Image teribly slow.

I constructed the following workaround class to use as a TileProvider that seems to improve performance, although I cannot find out how and why exactly, since Image.asset uses AssetImage under the hood aswell.
Also I'm using the path here directly, which is originally not intended but the easiest solution for my purpose here.

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';

class WorkaroundTileProvider extends TileProvider{
  @override
  ImageProvider getImage(Coords<num> coords, TileLayer options) {
    return Image.asset(
        "assets/offline_map/${coords.z.toInt()}/${coords.x.toInt()}/${coords.y.toInt()}.png",
      width: options.tileSize,
      height: options.tileSize,
    ).image;
  }
}

Can you provide any other information?

No response

Platforms Affected

Android, iOS, Web, Windows, MacOS

Severity

Obtrusive: Prevents normal functioning but causes no errors in the console

Frequency

Consistently: Always occurs at the same time and location

Requirements

• I agree to follow this project's Code of Conduct
• My Flutter/Dart installation is unaltered, and flutter doctor finds no relevant issues
• I am using the latest stable version of this package
• I have checked the FAQs section on the documentation website
• I have checked for similar issues which may be duplicates

[TesteurManiak]

I've tested the offline example with Flutter v3.7.5 and the tile provider seems to load the tiles correctly without lag. Could you confirm that this issue remains after upgrading Flutter to its latest version ?

flutter doctor -v

$>flutter doctor -v
[√] Flutter (Channel stable, 3.7.5, on Microsoft Windows [version 10.0.22621.1265], locale fr-FR)
    • Flutter version 3.7.5 on channel stable at C:\src\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c07f788888 (21 hours ago), 2023-02-22 17:52:33 -0600
    • Engine revision 0f359063c4
    • Dart version 2.19.2
    • DevTools version 2.20.1

[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Guillaume\AppData\Local\Android\sdk
    • Platform android-33, build-tools 30.0.3
    • Java binary at: D:\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[!] Visual Studio - develop for Windows (Visual Studio Build Tools 2017 15.9.35)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools
    • Visual Studio Build Tools 2017 version 15.9.28307.1500
    • Windows 10 SDK version 10.0.17763.0
    X Visual Studio 2019 or later is required.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 2021.3)
    • Android Studio at D:\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [version 10.0.22621.1265]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 110.0.5481.105
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 107.0.1418.52

[√] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 2 categories.

[WorldpixelSoftware]

@TesteurManiak Yes I can.
Still the same Issue after upgrading to v.3.7.5.

[michelesandroni]

I have the same exact issue here.
The workaround improves the performance drastically by an order of magnitude.

I'm using flutter_map: ^3.1.0

Flutter (Channel stable, 3.7.5, on macOS 13.2.1 22D68 darwin-arm64, locale en-DE)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Android Studio (version 2022.1)
[✓] VS Code (version 1.76.2)
[✓] Connected device (1 available)
[✓] HTTP Host Availability

                  // slow, unusable
                  TileLayer(
                    tileProvider: AssetTileProvider(),
                    maxZoom: maxZoom,
                    urlTemplate:
                        'assets/data/maps/style-01/map/{z}/{x}/{y}.png',
                  ),
                  // OK
                  TileLayer(
                    tileProvider: CustomTileProvider(
                        path: "assets/data/maps/style-01/map/"),
                    maxZoom: maxZoom,
                    urlTemplate: '{z}/{x}/{y}.png',
                  ),

[michelesandroni]

Minor improvement: this version still works fast and also supports the 'tms' option and probably other functionality.
I'm testing in iOS Simulator with a whole world map I've built in TileMill with zooms from 0 to 8.

A minor issue which might is probably unrelated:

• Fast zoom in poses apparently no problems.
• Fast zoom out and fast panning can show some redrawing / flickering, as if the tile provider was loading the required tiles on the fly.
  Is there any workaround for this other than reducing the zoom / pan speed?

// ...
                  TileLayer(
                    tileProvider: CustomTileProvider(),
                    maxZoom: maxZoom,
                    tms: true,
                    urlTemplate:
                        'assets/data/maps/style-01/map/{z}/{x}/{y}.png',
                  ),

class CustomTileProvider extends TileProvider {
  @override
  ImageProvider getImage(Coords<num> coords, TileLayer options) {
    return Image.asset(
      getTileUrl(coords, options),
      width: options.tileSize,
      height: options.tileSize,
    ).image;
  }
}

[JaffaKetchup]

Hey there, apologies for the long delay.

Just having a look at the code and timeline, this may be because of changes we made to add fallback URL support to asset providers - we implemented a custom CachingAssetBundle in a56b2b3/#1348 for #1203.

flutter_map/lib/src/layer/tile_layer/tile_provider/asset_tile_provider.dart

Lines 22 to 48 in a56b2b3

	class _FlutterMapAssetBundle extends CachingAssetBundle {
	final String? fallbackKey;
	_FlutterMapAssetBundle({required this.fallbackKey});
	Future<ByteData?> _loadAsset(String key) async {
	final Uint8List encoded =
	utf8.encoder.convert(Uri(path: Uri.encodeFull(key)).path);
	final ByteData? asset = await ServicesBinding
	.instance.defaultBinaryMessenger
	.send('flutter/assets', encoded.buffer.asByteData());
	return asset;
	}
	@override
	Future<ByteData> load(String key) async {
	final asset = await _loadAsset(key);
	if (asset != null && asset.lengthInBytes > 0) return asset;
	if (fallbackKey != null) {
	final fallbackAsset = await _loadAsset(fallbackKey!);
	if (fallbackAsset != null) return fallbackAsset;
	}
	throw FlutterError('_FlutterMapAssetBundle - Unable to load asset: $key');
	}
	}

@TesteurManiak Do you think this could be a potential reason for this?

If @WorldpixelSoftware or @mchlsndrn are still interested, can you try updating to the 'master' branch with Flutter 3.10 and Dart 3 support? Things may have changed in the meantime.

Again, apologies for the extreme delay, this one just didn't jump out at me when scrolling the issue tracker.

[TesteurManiak]

@TesteurManiak Do you think this could be a potential reason for this?

It might be, I'll have to do some benchmark to confirm this 🤔

[TesteurManiak]

I've done some first benchmarks and the _FlutterMapAssetBundle was in average ~23% slower than a basic PlatformAssetBundle even when no fallbackUrl is used (test made on a web browser).
An improvement could be to dynamically use the "fallback asset bundle" when the fallbackUrl property is used and otherwise the basic asset provider (and mention in the documentation that using a fallback url will make the loading slower)

[JaffaKetchup]

@TesteurManiak Thanks, that's interesting. I think that solution is acceptable, and I'll implement it into #1532.

[JaffaKetchup]

Will be resolved in v5 by #1532.