Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'feature/post-process-tiles' of https://github.com/mat88…
…54/flutter_map into mat8854-feature/post-process-tiles
- Loading branch information
Showing
6 changed files
with
346 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:flutter_map/flutter_map.dart'; | ||
| import 'package:latlong/latlong.dart'; | ||
|
|
||
| import '../widgets/drawer.dart'; | ||
|
|
||
| class TileBuilderPage extends StatefulWidget { | ||
| static const String route = '/tile_builder_example'; | ||
|
|
||
| @override | ||
| _TileBuilderPageState createState() => _TileBuilderPageState(); | ||
| } | ||
|
|
||
| class _TileBuilderPageState extends State<TileBuilderPage> { | ||
| var darkMode = false; | ||
| var loadingTime = false; | ||
| var showCoords = false; | ||
| var grid = false; | ||
|
|
||
| // mix of [coordinateDebugTileBuilder] and [loadingTimeDebugTileBuilder] from tile_builder.dart | ||
| Widget tileBuilder(BuildContext context, Widget tileWidget, Tile tile) { | ||
| final coords = tile.coords; | ||
|
|
||
| return Container( | ||
| decoration: BoxDecoration( | ||
| border: grid ? Border.all() : null, | ||
| ), | ||
| child: Stack( | ||
| fit: StackFit.passthrough, | ||
| children: [ | ||
| tileWidget, | ||
| if (loadingTime || showCoords) | ||
| Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| if (showCoords) | ||
| Text( | ||
| '${coords.x.floor()} : ${coords.y.floor()} : ${coords.z.floor()}', | ||
| style: Theme.of(context).textTheme.headline5, | ||
| ), | ||
| if (loadingTime) | ||
| Text( | ||
| tile.loaded == null | ||
| ? 'Loading' | ||
| // sometimes result is negative which shouldn't happen, abs() corrects it | ||
| : '${(tile.loaded.millisecond - tile.loadStarted.millisecond).abs()} ms', | ||
| style: Theme.of(context).textTheme.headline5, | ||
| ), | ||
| ], | ||
| ), | ||
| ], | ||
| ), | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Scaffold( | ||
| appBar: AppBar(title: const Text('Tile builder')), | ||
| drawer: buildDrawer(context, TileBuilderPage.route), | ||
| floatingActionButton: Column( | ||
| mainAxisSize: MainAxisSize.min, | ||
| crossAxisAlignment: CrossAxisAlignment.end, | ||
| children: [ | ||
| FloatingActionButton.extended( | ||
| heroTag: 'grid', | ||
| label: Text( | ||
| grid ? 'Hide grid' : 'Show grid', | ||
| textAlign: TextAlign.center, | ||
| ), | ||
| icon: Icon(grid ? Icons.grid_off : Icons.grid_on), | ||
| onPressed: () => setState(() => grid = !grid), | ||
| ), | ||
| SizedBox(height: 8), | ||
| FloatingActionButton.extended( | ||
| heroTag: 'coords', | ||
| label: Text( | ||
| showCoords ? 'Hide coords' : 'Show coords', | ||
| textAlign: TextAlign.center, | ||
| ), | ||
| icon: Icon(showCoords ? Icons.unarchive : Icons.bug_report), | ||
| onPressed: () => setState(() => showCoords = !showCoords), | ||
| ), | ||
| SizedBox(height: 8), | ||
| FloatingActionButton.extended( | ||
| heroTag: 'ms', | ||
| label: Text( | ||
| loadingTime ? 'Hide loading time' : 'Show loading time', | ||
| textAlign: TextAlign.center, | ||
| ), | ||
| icon: Icon(loadingTime ? Icons.timer_off : Icons.timer), | ||
| onPressed: () => setState(() => loadingTime = !loadingTime), | ||
| ), | ||
| SizedBox(height: 8), | ||
| FloatingActionButton.extended( | ||
| heroTag: 'dark-light', | ||
| label: Text( | ||
| darkMode ? 'Light mode' : 'Dark mode', | ||
| textAlign: TextAlign.center, | ||
| ), | ||
| icon: Icon(darkMode ? Icons.brightness_high : Icons.brightness_2), | ||
| onPressed: () => setState(() => darkMode = !darkMode), | ||
| ), | ||
| ], | ||
| ), | ||
| body: Padding( | ||
| padding: EdgeInsets.all(8.0), | ||
| child: FlutterMap( | ||
| options: MapOptions( | ||
| center: LatLng(51.5, -0.09), | ||
| zoom: 5.0, | ||
| ), | ||
| layers: [ | ||
| TileLayerOptions( | ||
| urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', | ||
| subdomains: ['a', 'b', 'c'], | ||
| tileProvider: NonCachingNetworkTileProvider(), | ||
| tileBuilder: tileBuilder, | ||
| tilesContainerBuilder: | ||
| darkMode ? darkModeTilesContainerBuilder : null, | ||
| ), | ||
| MarkerLayerOptions( | ||
| markers: <Marker>[ | ||
| Marker( | ||
| width: 80.0, | ||
| height: 80.0, | ||
| point: LatLng(51.5, -0.09), | ||
| builder: (ctx) => Container( | ||
| child: FlutterLogo( | ||
| colors: Colors.blue, | ||
| key: ObjectKey(Colors.blue), | ||
| ), | ||
| ), | ||
| ), | ||
| ], | ||
| ) | ||
| ], | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:flutter_map/src/layer/tile_layer.dart'; | ||
|
|
||
| typedef TileBuilder = Widget Function( | ||
| BuildContext context, Widget tileWidget, Tile tile); | ||
|
|
||
| typedef TilesContainerBuilder = Widget Function( | ||
| BuildContext context, Widget tilesContainer, List<Tile> tiles); | ||
|
|
||
| /// Applies inversion color matrix on Tiles container which may simulate Dark mode. | ||
| final TilesContainerBuilder darkModeTilesContainerBuilder = | ||
| (BuildContext context, Widget tilesContainer, List<Tile> tiles) { | ||
| return ColorFiltered( | ||
| colorFilter: const ColorFilter.matrix(<double>[ | ||
| -1, | ||
| 0, | ||
| 0, | ||
| 0, | ||
| 255, | ||
| 0, | ||
| -1, | ||
| 0, | ||
| 0, | ||
| 255, | ||
| 0, | ||
| 0, | ||
| -1, | ||
| 0, | ||
| 255, | ||
| 0, | ||
| 0, | ||
| 0, | ||
| 1, | ||
| 0, | ||
| ]), | ||
| child: tilesContainer, | ||
| ); | ||
| }; | ||
|
|
||
| /// Applies inversion color matrix on Tiles which may simulate Dark mode. | ||
| /// [darkModeTilesContainerBuilder] is better at performance because it applies color matrix on the container instead of on every Tile | ||
| final TileBuilder darkModeTileBuilder = | ||
| (BuildContext context, Widget tileWidget, Tile tile) { | ||
| return ColorFiltered( | ||
| colorFilter: const ColorFilter.matrix(<double>[ | ||
| -1, | ||
| 0, | ||
| 0, | ||
| 0, | ||
| 255, | ||
| 0, | ||
| -1, | ||
| 0, | ||
| 0, | ||
| 255, | ||
| 0, | ||
| 0, | ||
| -1, | ||
| 0, | ||
| 255, | ||
| 0, | ||
| 0, | ||
| 0, | ||
| 1, | ||
| 0, | ||
| ]), | ||
| child: tileWidget, | ||
| ); | ||
| }; | ||
|
|
||
| /// Shows coordinates over Tiles | ||
| final TileBuilder coordinateDebugTileBuilder = | ||
| (BuildContext context, Widget tileWidget, Tile tile) { | ||
| final coords = tile.coords; | ||
| final readableKey = | ||
| '${coords.x.floor()} : ${coords.y.floor()} : ${coords.z.floor()}'; | ||
|
|
||
| return Container( | ||
| decoration: BoxDecoration( | ||
| border: Border.all(), | ||
| ), | ||
| child: Stack( | ||
| fit: StackFit.passthrough, | ||
| children: [ | ||
| tileWidget, | ||
| Center( | ||
| child: Text( | ||
| readableKey, | ||
| style: Theme.of(context).textTheme.headline5, | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| ); | ||
| }; | ||
|
|
||
| /// Shows the Tile loading time in ms | ||
| final TileBuilder loadingTimeDebugTileBuilder = | ||
| (BuildContext context, Widget tileWidget, Tile tile) { | ||
| var loadStarted = tile.loadStarted; | ||
| var loaded = tile.loaded; | ||
|
|
||
| final time = loaded == null | ||
| ? 'Loading' | ||
| : '${(loaded.millisecond - loadStarted.millisecond).abs()} ms'; | ||
|
|
||
| return Container( | ||
| decoration: BoxDecoration( | ||
| border: Border.all(), | ||
| ), | ||
| child: Stack( | ||
| fit: StackFit.passthrough, | ||
| children: [ | ||
| tileWidget, | ||
| Center( | ||
| child: Text( | ||
| time, | ||
| style: Theme.of(context).textTheme.headline5, | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| ); | ||
| }; |
Oops, something went wrong.