Paketdetailsv0.0.10

interactive_maps_marker

Einfach zu verwendende animierte Kartensymbole mit Detailkarte. Verwenden Sie es für Geschäftsorte oder beliebige Ortslokalisierungen.

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 55
Likes: 57
Pub-Punkte: 60

Paket installieren

flutter pub add interactive_maps_marker

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Interactive Maps Marker ist ein Flutter-Paket, das animierte Kartenmarkierungen mit interaktiven Detailkarten bietet. Auf Einfachheit ausgelegt, ermöglicht es Entwicklern, standortbasierte Funktionen wie Geschäftssuche oder Punkte von Interesse einfach zu integrieren. Der Marker animiert beim Tippen und zeigt eine anpassbare Karte mit zusätzlichen Informationen an. Ideal für Apps, die intuitive Geolokalisationsvisualisierung und Benutzerengagement erfordern. Unterstützt reibungslose Übergänge und responsive Design, was die Benutzererfahrung verbessert, ohne komplizierte Einrichtung zu erfordern.

Anwendungsfälle

Geschäftslokator-Anwendungen
Hervorhebung von Sehenswürdigkeiten
Veranstaltungsort-Suchmaschinen
Tourismus und Reiseführer
Schnittstellen für Echtzeit-Standortverfolgung

Hauptmerkmale

Animierte Markierungstransitionen
Anpassbare Detailkarten
Einfache Integration mit Google Maps
Berührungswechsel-Interaktion
Reaktive UI-Komponenten
Leicht und einfach zu konfigurieren

Geeignet für

Entwickler, die ortsbasierte Apps entwickeln
Startups, die eine schnelle Implementierung von Kartenfunktionen benötigen
Apps, die sich auf eine benutzerfreundliche Navigation konzentrieren
Projekte, die minimale Code-Menge für Karteninteraktionen erfordern
Flutter-Anfänger erkunden die Geolocation

Hinweise

Benötigt einen Google Maps-API-Schlüssel für die vollständige Funktionalität
Beschränkt auf Android und iOS (kein Web-Unterstützung erwähnt)
Benutzerdefinierte Stile erfordern möglicherweise zusätzliche Dart-Kenntnisse
Abhängig von externen Kartenrendering-Bibliotheken
Nicht für dichte Markercluster optimiert

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

interactive_maps_marker for Flutter

Easy to use Animated Maps Markers with detail card. Use it for store or any place locator.

Demo

Usage

Add this package to your pubspec.yaml in dependencies: section

dependencies: 
  interactive_maps_marker: ^0.0.2

This package depends upon google_maps_flutter so first setup this by following This Guide

Update dependencies

flutter pub get

You can now add a InteractiveMapsMarker widget to your widget tree.

Simple Usage

In your widget import the package and use InteractiveMapsMarker Widget

Example

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:interactive_maps_marker/interactive_maps_marker.dart';

class ExplorePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return InteractiveMapsMarker(
      items: <MarkerItem>[
        MarkerItem(id: 1, latitude: 31.4673274, longitude: 74.2637687),
        MarkerItem(id: 2, latitude: 31.4718461, longitude: 74.3531591),
      ],
      center: LatLng(31.4906504, 74.319872),
      itemContent: (context, index) {
        return Text("Current Item $index");
      },
    );

  }
}

Advanced Usage

Coming Soon

Markers data from a remote server?

Use this widget inside a stateful widget and update the markers list state with new data. An example can be found in stateful_example.dart file in example project.

Customise with parameters

You can customise it by passing various parameter values. Details about all parameters is as follows.

Parameter	Type	Default Value	Description
items	`List<MarkerItem>`	none	List of Markers with type of MarkerItem. This parameter is required and cannot be null.
itemContent	`IndexedWidgetBuilder`	none	This is builder function which will receive `context` and `index`. You must return a Widget which will show on a pre designed container. This is exactly like you use ListView Builder. Not applicable when using `itemBuilder`
center	`LatLng`	`LatLng(0.0, 0.0)`	Center point for initial map display.
zoom	`double`	12.0	Default zoom value for initial map screen.
itemHeight	`double`	116.0	Height of your detail item. Not applicable when using `itemBuilder`
itemPadding	`EdgeInsetsGeometry`	`EdgeInsets.only(bottom: 80.0)`	Padding for item detail card. Mainly used for bottom padding.
itemPadding	`Alignment`	`Alignment.bottomCenter`	Alignment for content slider.
itemBuilder	`IndexedWidgetBuilder`	null	If you don't want default container and want to build the bottom widget yourself, you can use this builder instead of itemContent and have full control over UI. This is builder function which will receive `context` and `index`. You must return a Widget.
controller	`InteractiveMapsController`	null	A controller if you want to add the markers later and then call `rebuild()` or change the index of marker to animate with your action via `setCurrentIndex(int index)`.