Popups auf einer Flatterkarte oder flutter_map_marker_popup / Sudo Null IT News

Einführung

Irgendwie brauchte ich eine Karte in einer Flatteranwendung. Ich wollte keine Google- und Yandex-Karten verwenden und es blieb nur die Verwendung von OSM. Das Erstellen einer Karte ist recht einfach, aber ich musste auch ein Popup-Fenster hinzufügen, wenn ich auf eine Positionsmarkierung auf der Karte klicke. Bevor ich etwas Eigenes schrieb, entschied ich mich, nach vorgefertigten Lösungen zu suchen und fand das flutter_map_marker_popup-Plugin.

Schauen Sie sich das Plugin an

Abhängigkeiten, die erforderlich sind:

Abhängigkeiten: flattern: sdk: flattern flutter_map: beliebig latlong2: beliebig flutter_map_marker_popup: beliebig

Zuerst fügen wir eine Flutter_map hinzu. Wichtig ist hier das urlTemplate, das auf den OSM-Server zeigt. Wir werden die Einstellungen in MapOptions von außen übergeben.

Klasse MapPage erweitert StatefulWidget { MapPage({super.key, required this.center, double? zoom}){ this.zoom = zoom ?? 9,0; } endgültiges LatLng-Zentrum; später finaler Doppelzoom; @override State createState() => _MapPageState(); } class _MapPageState erweitert State { final urlTemplate=” @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(“Map page”), ), body: FlutterMap( mapController: MapController() , Optionen: MapOptions( center: widget.center, zoom: widget.zoom, ), Kinder: [
TileLayer(
urlTemplate: urlTemplate,
),
], ), ); } }

Als nächstes erstellen wir zum Beispiel durch langes Drücken eine Markierung auf der Karte. Lassen Sie uns eine Funktion schreiben, die dem Array von Markierungen eine neue Markierung hinzufügt und diese onLongPress an MapOptions übergibt: addMarker.

final List _markers = []; addMarker(tapPosition, point){ _markers.add(Marker( point: point, builder: (c) => const Icon(Icons.location_on, size: 40), width: 40, height: 40,)); }

Jetzt können diese Markierungen standardmäßig über die Ebene MarkerLayer(markers: _markers) angezeigt werden, aber dann ist es nicht möglich, Klicks darauf zu verfolgen und etwas anzuzeigen. Für diese Aufgaben hat das flutter_map_marker_popup-Plugin ein PopupMarkerLayerWidget. Fügen Sie diese Ebene hinzu:

PopupMarkerLayerWidget( options: PopupMarkerLayerOptions( popupController: _popupLayerController, markers: _markers, markerRotateAlignment: PopupMarkerLayerOptions. rotationAlignmentFor(AnchorAlign.top), popupBuilder: (BuildContext context, Marker marker) => ExamplePopup(marker), ), ),

An diese Ebene werden Markierungen, ein Controller und eine Möglichkeit zum Erstellen eines Popups übergeben. ExamplePopup ist das Widget, das erscheint, wenn auf die Markierung geklickt wird. Es enthält die Regeln für die Anzeige des Popup-Fensters.

Klasse ExamplePopup erweitert StatefulWidget { final Marker marker; const ExamplePopup(this.marker, {Key? key}) : super(key: key); @override State createState() => _ExamplePopupState(); } class _ExamplePopupState erweitert State { int _currentIcon = 0; @override Widget build(BuildContext context) { return Card( child: InkWell( onTap: () => setState(() { _currentIcon = (_currentIcon + 1) % 4; }), child: Row( mainAxisSize: MainAxisSize.min, Kinder: [
Padding(
padding: const EdgeInsets.only(left: 20, right: 10),
child: Image.asset(‘assets/${_currentIcon+1}.png’, width: 40, height: 40,),
),
_cardDescription(context),
], ), ), ); } Widget _cardDescription(BuildContext context) { return Padding( padding: const EdgeInsets.all(10), child: Container( Constraints: const BoxConstraints(minWidth: 100, maxWidth: 200), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment : MainAxisAlignment.start, mainAxisSize: MainAxisSize.min, Kinder: [
const Text(
‘Popup for a marker!’,
overflow: TextOverflow.fade,
softWrap: false,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14.0,
),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 4.0)),
Text(
‘Position: ${widget.marker.point.latitude}, ${widget.marker.point.longitude}’,
style: const TextStyle(fontSize: 12.0),
),
Text(
‘Marker size: ${widget.marker.width}, ${widget.marker.height}’,
style: const TextStyle(fontSize: 12.0),
),
], ), ), ); } }

Beachten Sie, dass Sie zum Abrufen von Bildern aus dem Assets-Ordner eine Einstellung zu pubspec.yml hinzufügen müssen:

Flattern: Vermögen: – Vermögen/

Und jetzt, wenn Sie auf die Markierung klicken, erscheint ein Fenster mit Katzen.

Danke an alle! Bei Interesse dort Telegrammekomm setz dich).

Similar Posts

Leave a Reply

Your email address will not be published.