Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
interactive_maps_marker cover
Package detailsv0.0.10

interactive_maps_marker

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

pub.dev API documentation Source code
30-day downloads
55
Likes
57
Pub points
60

Install package

flutter pub add interactive_maps_marker

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Interactive Maps Marker is a Flutter package that provides animated map markers with interactive detail cards. Designed for simplicity, it enables developers to easily integrate location-based features such as store locators or point-of-interest displays. The marker animates on tap, revealing a customizable card with additional information. Ideal for apps requiring intuitive geolocation visualization and user engagement. It supports smooth transitions and responsive design, enhancing the user experience without complex setup.

Use cases

  • Store locator applications
  • Point-of-interest highlighting
  • Event venue finders
  • Tourism and travel guides
  • Real-time location tracking interfaces

Key features

  • Animated marker transitions
  • Customizable detail cards
  • Simple integration with Google Maps
  • Tap-to-reveal interaction
  • Responsive UI components
  • Lightweight and easy to configure

Suitable for

  • Developers building location-based apps
  • Startups needing quick map feature implementation
  • Apps focused on user-friendly navigation
  • Projects requiring minimal code for map interactions
  • Flutter beginners exploring geolocation

Considerations

  • Requires Google Maps API key for full functionality
  • Limited to Android and iOS (no web support mentioned)
  • Custom styling may require additional Dart knowledge
  • Depends on external map rendering libraries
  • Not optimized for high-density marker clusters

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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).

Meta

Atiq Samtia– @AtiqSamtia – me@atiqsamtia.com

Distributed under the MIT license.

https://github.com/atiqsamtia/interactive_maps_marker_flutter

Credits

Inspired by amazing work from Mohamed Douzane

Github Repo

Medium Post

Contributing

  1. Fork it (https://github.com/atiqsamtia/interactive_maps_marker_flutter/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

Categories

Geolocation & Maps

Dependencies

Dependency list 1 items

Source repository

Projects using this package

No data available yet.