feat: add built-in caching & tile loading cancellation support

example/lib/main.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_map_example/pages/abort_obsolete_requests.dart';
 import 'package:flutter_map_example/pages/animated_map_controller.dart';
 import 'package:flutter_map_example/pages/bundled_offline_map.dart';
-import 'package:flutter_map_example/pages/cancellable_tile_provider.dart';
 import 'package:flutter_map_example/pages/circle.dart';
 import 'package:flutter_map_example/pages/debouncing_tile_update_transformer.dart';
 import 'package:flutter_map_example/pages/epsg3996_crs.dart';
@@ -52,8 +52,8 @@ class MyApp extends StatelessWidget {
       ),
       home: const HomePage(),
       routes: <String, WidgetBuilder>{
-        CancellableTileProviderPage.route: (context) =>
-            const CancellableTileProviderPage(),
+        AbortObsoleteRequestsPage.route: (context) =>
+            const AbortObsoleteRequestsPage(),
         PolylinePage.route: (context) => const PolylinePage(),
         SingleWorldPolysPage.route: (context) => const SingleWorldPolysPage(),
         PolylinePerfStressPage.route: (context) =>

example/lib/misc/tile_providers.dart

@@ -1,10 +1,11 @@
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
+import 'package:http/http.dart';
+import 'package:http/retry.dart';
+
+final httpClient = RetryClient(Client());
 
 TileLayer get openStreetMapTileLayer => TileLayer(
       urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
       userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-      // Use the recommended flutter_map_cancellable_tile_provider package to
-      // support the cancellation of loading tiles.
-      tileProvider: CancellableNetworkTileProvider(),
+      tileProvider: NetworkTileProvider(httpClient: httpClient),
     );

example/lib/pages/abort_obsolete_requests.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
+import 'package:flutter_map_example/widgets/notice_banner.dart';
+import 'package:latlong2/latlong.dart';
+
+class AbortObsoleteRequestsPage extends StatefulWidget {
+  static const String route = '/abort_obsolete_requests_page';
+
+  const AbortObsoleteRequestsPage({super.key});
+
+  @override
+  State<AbortObsoleteRequestsPage> createState() =>
+      _AbortUnnecessaryRequestsPage();
+}
+
+class _AbortUnnecessaryRequestsPage extends State<AbortObsoleteRequestsPage> {
+  bool _abortingEnabled = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Abort Obsolete Requests')),
+      drawer: const MenuDrawer(AbortObsoleteRequestsPage.route),
+      body: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8),
+            child: Center(
+              child: Switch.adaptive(
+                value: _abortingEnabled,
+                onChanged: (value) => setState(() => _abortingEnabled = value),
+              ),
+            ),
+          ),
+          const NoticeBanner.recommendation(
+            text: 'Since v8.2.0, in-flight HTTP requests for tiles which are '
+                'no longer displayed are aborted by default.',
+            url: 'https://docs.fleaflet.dev/layers/tile-layer/tile-providers',
+            sizeTransition: 870,
+          ),
+          Expanded(
+            child: FlutterMap(
+              options: MapOptions(
+                initialCenter: const LatLng(51.5, -0.09),
+                initialZoom: 5,
+                cameraConstraint: CameraConstraint.contain(
+                  bounds: LatLngBounds(
+                    const LatLng(-90, -180),
+                    const LatLng(90, 180),
+                  ),
+                ),
+              ),
+              children: [
+                TileLayer(
+                  key: ValueKey(_abortingEnabled),
+                  urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                  userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+                  tileProvider: NetworkTileProvider(
+                    abortObsoleteRequests: _abortingEnabled,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

example/lib/pages/animated_map_controller.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
 import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 import 'package:latlong2/latlong.dart';
 
@@ -182,7 +181,6 @@ class AnimatedMapControllerPageState extends State<AnimatedMapControllerPage>
                     urlTemplate:
                         'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                     userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                    tileProvider: CancellableNetworkTileProvider(),
                     tileUpdateTransformer: _animatedMoveTileUpdateTransformer,
                   ),
                   const MarkerLayer(markers: _markers),

example/lib/pages/fallback_url_page.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
 import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 import 'package:flutter_map_example/widgets/notice_banner.dart';
 import 'package:latlong2/latlong.dart';
@@ -44,7 +43,6 @@ class FallbackUrlPage extends StatelessWidget {
                       'https://not-a-real-provider-url.local/{z}/{x}/{y}.png',
                   fallbackUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                   userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  tileProvider: CancellableNetworkTileProvider(),
                 ),
               ],
             ),

example/lib/pages/reset_tile_layer.dart

@@ -2,7 +2,6 @@ import 'dart:async';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
 import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 import 'package:latlong2/latlong.dart';
 
@@ -63,7 +62,6 @@ class ResetTileLayerPageState extends State<ResetTileLayerPage> {
                   urlTemplate: layerToggle ? layer1 : layer2,
                   subdomains: layerToggle ? const [] : const ['a', 'b', 'c'],
                   userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  tileProvider: CancellableNetworkTileProvider(),
                 ),
                 const MarkerLayer(
                   markers: [

example/lib/pages/tile_builder.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
 import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 import 'package:latlong2/latlong.dart';
 
@@ -120,7 +119,6 @@ class TileBuilderPageState extends State<TileBuilderPage> {
                     urlTemplate:
                         'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                     userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                    tileProvider: CancellableNetworkTileProvider(),
                     tileBuilder: tileBuilder,
                   ),
                 ),

example/lib/pages/tile_loading_error_handle.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
 import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 import 'package:latlong2/latlong.dart';
 
@@ -67,7 +66,7 @@ class TileLoadingErrorHandleState extends State<TileLoadingErrorHandle> {
                     // or use the recommended tile provider
                     tileProvider: _simulateTileLoadErrors
                         ? _SimulateErrorsTileProvider()
-                        : CancellableNetworkTileProvider(),
+                        : NetworkTileProvider(),
                   ),
                 ],
               );

example/lib/widgets/drawer/menu_drawer.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_map_example/pages/abort_obsolete_requests.dart';
 import 'package:flutter_map_example/pages/animated_map_controller.dart';
 import 'package:flutter_map_example/pages/bundled_offline_map.dart';
-import 'package:flutter_map_example/pages/cancellable_tile_provider.dart';
 import 'package:flutter_map_example/pages/circle.dart';
 import 'package:flutter_map_example/pages/debouncing_tile_update_transformer.dart';
 import 'package:flutter_map_example/pages/epsg3996_crs.dart';
@@ -47,7 +47,13 @@ class MenuDrawer extends StatelessWidget {
     return Drawer(
       child: ListView(
         children: <Widget>[
-          DrawerHeader(
+          Container(
+            padding: const EdgeInsets.fromLTRB(16, 32, 16, 16)
+                .add(EdgeInsets.only(top: MediaQuery.paddingOf(context).top)),
+            margin: const EdgeInsets.only(bottom: 8),
+            decoration: BoxDecoration(
+              border: Border(bottom: Divider.createBorderSide(context)),
+            ),
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
@@ -65,11 +71,12 @@ class MenuDrawer extends StatelessWidget {
                   textAlign: TextAlign.center,
                   style: TextStyle(fontSize: 14),
                 ),
+                const SizedBox(height: 8),
                 if (kIsWeb)
-                  const Text(
+                  Text(
                     _isWASM ? 'Running with WASM' : 'Running without WASM',
                     textAlign: TextAlign.center,
-                    style: TextStyle(fontSize: 14),
+                    style: Theme.of(context).textTheme.bodySmall,
                   ),
               ],
             ),
@@ -155,8 +162,8 @@ class MenuDrawer extends StatelessWidget {
             currentRoute: currentRoute,
           ),
           MenuItemWidget(
-            caption: 'Cancellable Tile Provider',
-            routeName: CancellableTileProviderPage.route,
+            caption: 'Abort Obsolete Requests',
+            routeName: AbortObsoleteRequestsPage.route,
             currentRoute: currentRoute,
           ),
           MenuItemWidget(