Skip to content

Commit

Permalink
Reworked markers (#1659)
Browse files Browse the repository at this point in the history 
- No more `builder`s: now we use `Marker.child` for extra efficiency
- `Marker`'s constructor is now `const`ant, along with `MarkerLayer`
- `rotateOrigin` and `rotateAlignment` have been removed, as not sure of their valid use-case
- `Anchor`, `AnchorPos`, and all anchor terminology have been removed, to simplify
- Only relative `Alignment`s now supported, but now also non pre-provided ones
- Resolved confusion around meaning of anchors/position/alignment/relativity

Co-authored-by: JaffaKetchup <[email protected]>
  • Loading branch information
@ignatz @JaffaKetchup
ignatz and JaffaKetchup authored Oct 6, 2023
1 parent 5fb54f7 commit 2ea3110
Show file tree
Hide file tree
Showing 14 changed files with 262 additions and 424 deletions.
83 changes: 34 additions & 49 deletions example/lib/pages/animated_map_controller.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,30 @@ class AnimatedMapControllerPageState extends State<AnimatedMapControllerPage>
static const _inProgressId = 'AnimatedMapController#MoveInProgress';
static const _finishedId = 'AnimatedMapController#MoveFinished';

static const london = LatLng(51.5, -0.09);
static const paris = LatLng(48.8566, 2.3522);
static const dublin = LatLng(53.3498, -6.2603);
static const _london = LatLng(51.5, -0.09);
static const _paris = LatLng(48.8566, 2.3522);
static const _dublin = LatLng(53.3498, -6.2603);

static const _markers = [
Marker(
width: 80,
height: 80,
point: _london,
child: FlutterLogo(key: ValueKey('blue')),
),
Marker(
width: 80,
height: 80,
point: _dublin,
child: FlutterLogo(key: ValueKey('green')),
),
Marker(
width: 80,
height: 80,
point: _paris,
child: FlutterLogo(key: ValueKey('purple')),
),
];

late final MapController mapController;

Expand Down Expand Up @@ -88,36 +109,6 @@ class AnimatedMapControllerPageState extends State<AnimatedMapControllerPage>

@override
Widget build(BuildContext context) {
final markers = <Marker>[
Marker(
width: 80,
height: 80,
point: london,
builder: (ctx) => Container(
key: const Key('blue'),
child: const FlutterLogo(),
),
),
Marker(
width: 80,
height: 80,
point: dublin,
builder: (ctx) => const FlutterLogo(
key: Key('green'),
textColor: Colors.green,
),
),
Marker(
width: 80,
height: 80,
point: paris,
builder: (ctx) => Container(
key: const Key('purple'),
child: const FlutterLogo(textColor: Colors.purple),
),
),
];

return Scaffold(
appBar: AppBar(title: const Text('Animated MapController')),
drawer: buildDrawer(context, AnimatedMapControllerPage.route),
Expand All @@ -130,21 +121,15 @@ class AnimatedMapControllerPageState extends State<AnimatedMapControllerPage>
child: Row(
children: <Widget>[
MaterialButton(
onPressed: () {
_animatedMapMove(london, 10);
},
onPressed: () => _animatedMapMove(_london, 10),
child: const Text('London'),
),
MaterialButton(
onPressed: () {
_animatedMapMove(paris, 5);
},
onPressed: () => _animatedMapMove(_paris, 5),
child: const Text('Paris'),
),
MaterialButton(
onPressed: () {
_animatedMapMove(dublin, 5);
},
onPressed: () => _animatedMapMove(_dublin, 5),
child: const Text('Dublin'),
),
],
Expand All @@ -157,9 +142,9 @@ class AnimatedMapControllerPageState extends State<AnimatedMapControllerPage>
MaterialButton(
onPressed: () {
final bounds = LatLngBounds.fromPoints([
dublin,
paris,
london,
_dublin,
_paris,
_london,
]);

mapController.fitCamera(
Expand All @@ -174,9 +159,9 @@ class AnimatedMapControllerPageState extends State<AnimatedMapControllerPage>
MaterialButton(
onPressed: () {
final bounds = LatLngBounds.fromPoints([
dublin,
paris,
london,
_dublin,
_paris,
_london,
]);

final constrained = CameraFit.bounds(
Expand Down Expand Up @@ -204,7 +189,7 @@ class AnimatedMapControllerPageState extends State<AnimatedMapControllerPage>
userAgentPackageName: 'dev.fleaflet.flutter_map.example',
tileUpdateTransformer: _animatedMoveTileUpdateTransformer,
),
MarkerLayer(markers: markers),
const MarkerLayer(markers: _markers),
],
),
),
Expand Down
14 changes: 7 additions & 7 deletions example/lib/pages/home.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,31 +145,31 @@ class _HomePageState extends State<HomePage> {
'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
userAgentPackageName: 'dev.fleaflet.flutter_map.example',
),
MarkerLayer(
const MarkerLayer(
markers: [
Marker(
width: 80,
height: 80,
point: const LatLng(51.5, -0.09),
builder: (ctx) => const FlutterLogo(
point: LatLng(51.5, -0.09),
child: FlutterLogo(
textColor: Colors.blue,
key: ObjectKey(Colors.blue),
),
),
Marker(
width: 80,
height: 80,
point: const LatLng(53.3498, -6.2603),
builder: (ctx) => const FlutterLogo(
point: LatLng(53.3498, -6.2603),
child: FlutterLogo(
textColor: Colors.green,
key: ObjectKey(Colors.green),
),
),
Marker(
width: 80,
height: 80,
point: const LatLng(48.8566, 2.3522),
builder: (ctx) => const FlutterLogo(
point: LatLng(48.8566, 2.3522),
child: FlutterLogo(
textColor: Colors.purple,
key: ObjectKey(Colors.purple),
),
Expand Down
16 changes: 8 additions & 8 deletions example/lib/pages/many_markers.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_example/widgets/drawer.dart';
import 'package:latlong2/latlong.dart';

const maxMarkersCount = 5000;
const maxMarkersCount = 10000;

/// On this page, [maxMarkersCount] markers are randomly generated
/// across europe, and then you can limit them with a slider
Expand Down Expand Up @@ -35,11 +35,8 @@ class _ManyMarkersPageState extends State<ManyMarkersPage> {
for (var x = 0; x < maxMarkersCount; x++) {
allMarkers.add(
Marker(
point: LatLng(
doubleInRange(r, 37, 55),
doubleInRange(r, -9, 30),
),
builder: (context) => const Icon(
point: LatLng(doubleInRange(r, 37, 55), doubleInRange(r, -9, 30)),
child: const Icon(
Icons.circle,
color: Colors.red,
size: 12,
Expand Down Expand Up @@ -85,8 +82,11 @@ class _ManyMarkersPageState extends State<ManyMarkersPage> {
userAgentPackageName: 'dev.fleaflet.flutter_map.example',
),
MarkerLayer(
markers: allMarkers.sublist(
0, min(allMarkers.length, _sliderVal))),
markers: allMarkers.sublist(
0,
min(allMarkers.length, _sliderVal),
),
),
],
),
),
Expand Down
79 changes: 32 additions & 47 deletions example/lib/pages/map_controller.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,35 @@ class MapControllerPage extends StatefulWidget {
}
}

const LatLng london = LatLng(51.5, -0.09);
const LatLng paris = LatLng(48.8566, 2.3522);
const LatLng dublin = LatLng(53.3498, -6.2603);

class MapControllerPageState extends State<MapControllerPage> {
late final MapController _mapController;
double _rotation = 0;

static const _london = LatLng(51.5, -0.09);
static const _paris = LatLng(48.8566, 2.3522);
static const _dublin = LatLng(53.3498, -6.2603);

static const _markers = [
Marker(
width: 80,
height: 80,
point: _london,
child: FlutterLogo(key: ValueKey('blue')),
),
Marker(
width: 80,
height: 80,
point: _dublin,
child: FlutterLogo(key: ValueKey('green')),
),
Marker(
width: 80,
height: 80,
point: _paris,
child: FlutterLogo(key: ValueKey('purple')),
),
];

@override
void initState() {
super.initState();
Expand All @@ -30,36 +51,6 @@ class MapControllerPageState extends State<MapControllerPage> {

@override
Widget build(BuildContext context) {
final markers = <Marker>[
Marker(
width: 80,
height: 80,
point: london,
builder: (ctx) => Container(
key: const Key('blue'),
child: const FlutterLogo(),
),
),
Marker(
width: 80,
height: 80,
point: dublin,
builder: (ctx) => const FlutterLogo(
key: Key('green'),
textColor: Colors.green,
),
),
Marker(
width: 80,
height: 80,
point: paris,
builder: (ctx) => Container(
key: const Key('purple'),
child: const FlutterLogo(textColor: Colors.purple),
),
),
];

return Scaffold(
appBar: AppBar(title: const Text('MapController')),
drawer: buildDrawer(context, MapControllerPage.route),
Expand All @@ -72,21 +63,15 @@ class MapControllerPageState extends State<MapControllerPage> {
child: Row(
children: <Widget>[
MaterialButton(
onPressed: () {
_mapController.move(london, 18);
},
onPressed: () => _mapController.move(_london, 18),
child: const Text('London'),
),
MaterialButton(
onPressed: () {
_mapController.move(paris, 5);
},
onPressed: () => _mapController.move(_paris, 5),
child: const Text('Paris'),
),
MaterialButton(
onPressed: () {
_mapController.move(dublin, 5);
},
onPressed: () => _mapController.move(_dublin, 5),
child: const Text('Dublin'),
),
],
Expand All @@ -99,9 +84,9 @@ class MapControllerPageState extends State<MapControllerPage> {
MaterialButton(
onPressed: () {
final bounds = LatLngBounds.fromPoints([
dublin,
paris,
london,
_dublin,
_paris,
_london,
]);

_mapController.fitCamera(
Expand Down Expand Up @@ -163,7 +148,7 @@ class MapControllerPageState extends State<MapControllerPage> {
'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
userAgentPackageName: 'dev.fleaflet.flutter_map.example',
),
MarkerLayer(markers: markers),
const MarkerLayer(markers: _markers),
],
),
),
Expand Down
Loading

0 comments on commit 2ea3110

Please sign in to comment.