refactor!: migrate tile rendering from widgets to CustomPainter [replaced by #1908]

lib/src/layer/tile_layer/tile.dart

@@ -4,6 +4,7 @@ import 'package:flutter/widgets.dart';
 import 'package:flutter_map/flutter_map.dart';
 
 /// The widget for a single tile used for the [TileLayer].
+/// If proceed with the implementation of the CustomPainter and the TileModel this Widget should be removed.
 @immutable
 class Tile extends StatefulWidget {
   /// [TileImage] is the model class that contains meta data for the Tile image.

lib/src/layer/tile_layer/tile_layer.dart

@@ -5,10 +5,11 @@ import 'package:collection/collection.dart' show MapEquality;
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map/src/layer/tile_layer/tile.dart';
 import 'package:flutter_map/src/layer/tile_layer/tile_bounds/tile_bounds.dart';
 import 'package:flutter_map/src/layer/tile_layer/tile_bounds/tile_bounds_at_zoom.dart';
 import 'package:flutter_map/src/layer/tile_layer/tile_image_manager.dart';
+import 'package:flutter_map/src/layer/tile_layer/tile_model.dart';
+import 'package:flutter_map/src/layer/tile_layer/tile_painter.dart';
 import 'package:flutter_map/src/layer/tile_layer/tile_range.dart';
 import 'package:flutter_map/src/layer/tile_layer/tile_range_calculator.dart';
 import 'package:flutter_map/src/layer/tile_layer/tile_scale_calculator.dart';
@@ -227,6 +228,39 @@ class TileLayer extends StatefulWidget {
   /// disabled and the tile layer will update as soon as possible.
   final Duration loadingDelay;
 
+  ///Allows to set different paint parameters that are used in CustomPainter to draw tiles.
+  ///If provided, it is recommended to set filterQuality to high. Setting isAntiAlias to true is not recommended as it may introduce ghost lines between tiles.
+  ///
+  ///Example: Setting a color filter to draw tiles in grayscale.
+  ///```dart
+  /// paint: Paint()..colorFilter = const ColorFilter.mode(Colors.grey, BlendMode.saturation)..filterQuality = FilterQuality.high,
+  /// ```
+  ///
+  /// Example: Inverting the colors of the tiles.
+  /// ```dart
+  /// paint: Paint()..invertColors = true ..filterQuality = FilterQuality.high,
+  /// ```
+  ///
+  /// It is possible to change map colors in various ways using the ColorFilter.matrix.
+  ///
+  /// Example: Toning map with sepia color.
+  /// ```dart
+  /// paint: Paint()..colorFilter = const ColorFilter.matrix([
+  ///          0.393, 0.769, 0.189, 0, 0,
+  ///          0.349, 0.686, 0.168, 0, 0,
+  ///          0.272, 0.534, 0.131, 0, 0,
+  ///          0,     0,     0,     1, 0,
+  ///    ])..filterQuality = FilterQuality.high,
+  /// ```
+  ///
+  /// If not specified, the default paint parameters are:
+  /// ```dart
+  /// Paint()
+  ///  ..isAntiAlias = false
+  ///  ..filterQuality = FilterQuality.high;
+  /// ```
+  final Paint? paint;
+
   /// Create a new [TileLayer] for the [FlutterMap] widget.
   TileLayer({
     super.key,
@@ -259,6 +293,7 @@ class TileLayer extends StatefulWidget {
     this.reset,
     this.tileBounds,
     this.loadingDelay = Duration.zero,
+    this.paint,
     TileUpdateTransformer? tileUpdateTransformer,
     String userAgentPackageName = 'unknown',
   })  : assert(
@@ -543,26 +578,25 @@ class _TileLayerState extends State<TileLayer> with TickerProviderStateMixin {
     // cycles saved later on in the render pipeline.
     final tiles = _tileImageManager
         .getTilesToRender(visibleRange: visibleTileRange)
-        .map((tileImage) => Tile(
-              // Must be an ObjectKey, not a ValueKey using the coordinates, in
-              // case we remove and replace the TileImage with a different one.
-              key: ObjectKey(tileImage),
-              scaledTileSize: _tileScaleCalculator.scaledTileSize(
-                map.zoom,
-                tileImage.coordinates.z,
-              ),
-              currentPixelOrigin: map.pixelOrigin,
-              tileImage: tileImage,
-              tileBuilder: widget.tileBuilder,
-            ))
+        .map(
+          (tileImage) => TileModel(
+            scaledTileSize: _tileScaleCalculator.scaledTileSize(
+              map.zoom,
+              tileImage.coordinates.z,
+            ),
+            currentPixelOrigin: map.pixelOrigin,
+            tileImage: tileImage,
+            tileBuilder: widget.tileBuilder,
+          ),
+        )
         .toList();
 
     // Sort in render order. In reverse:
     //   1. Tiles at the current zoom.
     //   2. Tiles at the current zoom +/- 1.
     //   3. Tiles at the current zoom +/- 2.
     //   4. ...etc
-    int renderOrder(Tile a, Tile b) {
+    int renderOrder(TileModel a, TileModel b) {
       final (za, zb) = (a.tileImage.coordinates.z, b.tileImage.coordinates.z);
       final cmp = (zb - tileZoom).abs().compareTo((za - tileZoom).abs());
       if (cmp == 0) {
@@ -573,7 +607,12 @@ class _TileLayerState extends State<TileLayer> with TickerProviderStateMixin {
     }
 
     return MobileLayerTransformer(
-      child: Stack(children: tiles..sort(renderOrder)),
+      child: CustomPaint(
+        size: Size.infinite,
+        willChange: true,
+        painter: TilePainter(
+            tiles: tiles..sort(renderOrder), tilePaint: widget.paint),
+      ),
     );
   }
 
@@ -595,18 +634,28 @@ class _TileLayerState extends State<TileLayer> with TickerProviderStateMixin {
             widget,
           );
 
-    return TileImage(
+    final TileImage tileImage = TileImage(
       vsync: this,
       coordinates: coordinates,
       imageProvider: imageProvider,
       onLoadError: _onTileLoadError,
       onLoadComplete: (coordinates) {
         if (pruneAfterLoad) _pruneIfAllTilesLoaded(coordinates);
+        setState(() {
+          // Refresh the widget to display the loaded tile.
+        });
       },
       tileDisplay: widget.tileDisplay,
       errorImage: widget.errorImage,
       cancelLoading: cancelLoading,
     );
+
+    tileImage.animation?.addListener(() {
+      setState(() {
+        //Update with fade in animation if TileDisplay.fadeIn() is used.
+      });
+    });
+    return tileImage;
   }
 
   /// Load and/or prune tiles according to the visible bounds of the [event]

lib/src/layer/tile_layer/tile_model.dart

@@ -0,0 +1,49 @@
+import 'dart:math';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map/src/layer/tile_layer/tile_painter.dart';
+
+/// Model for tiles displayed by [TileLayer] and [TilePainter]
+class TileModel {
+  /// [TileImage] is the model class that contains meta data for the Tile image.
+  final TileImage tileImage;
+
+  /// The [TileBuilder] is a reference to the [TileLayer]'s
+  /// [TileLayer.tileBuilder].
+  final TileBuilder? tileBuilder;
+
+  /// The tile size for the given scale of the map.
+  final double scaledTileSize;
+
+  /// Reference to the offset of the top-left corner of the bounding rectangle
+  /// of the [MapCamera]. The origin will not equal the offset of the top-left
+  /// visible pixel when the map is rotated.
+  final Point<double> currentPixelOrigin;
+
+  /// Creates a new instance of TileModel.
+  const TileModel({
+    required this.scaledTileSize,
+    required this.currentPixelOrigin,
+    required this.tileImage,
+    required this.tileBuilder,
+  });
+
+  ///Equality operator for TileModel
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is! TileModel) return false;
+    final TileModel otherTile = other;
+    return tileImage == otherTile.tileImage &&
+        tileBuilder == otherTile.tileBuilder &&
+        scaledTileSize == otherTile.scaledTileSize &&
+        currentPixelOrigin == otherTile.currentPixelOrigin;
+  }
+
+  ///HashCode for TileModel
+  @override
+  int get hashCode =>
+      tileImage.hashCode ^
+      tileBuilder.hashCode ^
+      scaledTileSize.hashCode ^
+      currentPixelOrigin.hashCode;
+}

lib/src/layer/tile_layer/tile_painter.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter_map/src/layer/tile_layer/tile_model.dart';
+
+/// Draws [TileModel]s onto a canvas at the correct position
+class TilePainter extends CustomPainter {
+  /// List of [TileModel]s to draw to the canvas
+  List<TileModel> tiles;
+
+  /// Paint to use when drawing each tile
+  ///
+  /// Defaults to [defaultTilePaint].
+  final Paint? tilePaint;
+
+  /// Default [tilePaint]er
+  static Paint get defaultTilePaint => Paint()
+    ..isAntiAlias = false
+    ..filterQuality = FilterQuality.high;
+
+  /// Create a painter with the specified [TileModel]s and paint
+  ///
+  /// [tilePaint] indirectly defaults to [defaultTilePaint].
+  TilePainter({
+    required this.tiles,
+    this.tilePaint,
+  });
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    for (final tile in tiles) {
+      // Draw tiles if they have an image
+      if (tile.tileImage.imageInfo != null) {
+        // Simplify tile positions and sizes
+        final left = tile.tileImage.coordinates.x * tile.scaledTileSize -
+            tile.currentPixelOrigin.x;
+        final top = tile.tileImage.coordinates.y * tile.scaledTileSize -
+            tile.currentPixelOrigin.y;
+        final width = tile.scaledTileSize;
+        final height = tile.scaledTileSize;
+        final image = tile.tileImage.imageInfo!.image;
+
+        canvas.drawImageRect(
+          image,
+          // Source rectangle
+          Rect.fromLTWH(
+            0,
+            0,
+            image.width.toDouble(),
+            image.height.toDouble(),
+          ),
+          Rect.fromLTWH(left, top, width, height), // Destination rectangle
+          (tilePaint ?? defaultTilePaint)
+            ..color = (tilePaint ?? defaultTilePaint)
+                .color
+                .withOpacity(tile.tileImage.opacity),
+        );
+      }
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant TilePainter oldDelegate) {
+    return oldDelegate.tiles != tiles;
+  }
+}

test/flutter_map_test.dart

@@ -25,7 +25,6 @@ void main() {
     await tester.pumpWidget(TestApp(markers: markers));
     expect(find.byType(FlutterMap), findsOneWidget);
     expect(find.byType(TileLayer), findsOneWidget);
-    expect(find.byType(RawImage), findsWidgets);
     expect(find.byType(MarkerLayer), findsWidgets);
     expect(find.byType(FlutterLogo), findsOneWidget);
   });