flutter_map_marker_popup 0.2.0

A plugin for flutter_map to show a customisable popup Widget when a marker is tapped. Also provides methods to show/hide popups.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_marker_popup/flutter_map_marker_popup.dart';
import 'package:latlong/latlong.dart';

import 'example_popup.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final GlobalKey<_MapPageState> _mapPageStateKey = GlobalKey<_MapPageState>();

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Marker Popup Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MapPage(_mapPageStateKey),
        builder: (context, navigator) {
          return Scaffold(
            appBar: AppBar(
              title: Text('Marker Popup Demo'),
            ),
            body: navigator,
            floatingActionButton: FloatingActionButton(
              onPressed: () {
                _mapPageStateKey.currentState.showPopupForFirstMarker();
              },
              child: Icon(Icons.mode_comment),
              backgroundColor: Colors.green,
            ),
          );
        });
  }
}

class MapPage extends StatefulWidget {
  MapPage(GlobalKey<_MapPageState> key) : super(key: key);

  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  static final List<LatLng> _points = [
    LatLng(44.421, 10.404),
    LatLng(45.683, 10.839),
    LatLng(45.246, 5.783),
  ];

  static const _markerSize = 40.0;
  List<Marker> _markers;

  // Used to trigger showing/hiding of popups.
  final PopupController _popupLayerController = PopupController();

  @override
  void initState() {
    super.initState();

    _markers = _points
        .map(
          (LatLng point) => Marker(
            point: point,
            width: _markerSize,
            height: _markerSize,
            builder: (_) => Icon(Icons.location_on, size: _markerSize),
            anchorPos: AnchorPos.align(AnchorAlign.top),
          ),
        )
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        zoom: 5.0,
        center: _points.first,
        plugins: [PopupMarkerPlugin()],
        onTap: (_) => _popupLayerController
            .hidePopup(), // Hide popup when the map is tapped.
      ),
      layers: [
        TileLayerOptions(
          urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c'],
        ),
        PopupMarkerLayerOptions(
          markers: _markers,
          popupSnap: PopupSnap.markerTop,
          popupController: _popupLayerController,
          popupBuilder: (BuildContext _, Marker marker) => ExamplePopup(marker),
        ),
      ],
    );
  }

  void showPopupForFirstMarker() {
    _popupLayerController.togglePopup(_markers.first);
  }
}