flutter_map inside a showDialog(): markers are not updated on tap, they do on reopen

[hadjiprocopis]

Hi there,
I am not sure it is OK to use a FlutterMap widget inside a showDialog(), so I am asking for comments in this thread instead of filing an "issue".

The problem is that when a FlutterMap widget is displayed via a showDialog() and I tap on the map, the new markers, where I tapped, are not showing. But they are saved it seems because when I close the dialog and then reopen it (not reloading the app). All the previous markers show exactly as they should. I have noticed that MarkerLayer's build() is not being called when I tap-on-map. But I can verify a new marker is added to the markers: array, via setState(). Just build() is not called...

The functionality I want to achieve is to open a map for selecting a location when I click on a button in the UI. I found showDialog() an easy way to do that, perhaps it is not the right way?

Here is a short piece of code which demonstrates my issue.

I appreciate your help and comments on this. I am open to using a different approach to achieve selecting a location on the map.

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_cache/flutter_map_cache.dart';
import 'package:latlong2/latlong.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:http_cache_hive_store/http_cache_hive_store.dart';

List<Marker> myMarkers = [];

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Maps2',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: MyHomePage(title: 'Flutter Maps'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Scaffold(
        body: Container(
          alignment: Alignment.center,
          child: IconButton(
            // get current position gps button
            iconSize: 34,
            padding: const EdgeInsets.all(0.0),
            icon: const Icon(Icons.map_sharp),
            onPressed: () {
              showDialog(
                barrierDismissible: true,
                // if you click outside it is dismissed
                barrierColor: Colors.white.withValues(alpha: 0.0),
                context: context,
                builder: (BuildContext context) {
                  return Expanded(
                    child: FlutterMap(
                      options: MapOptions(
                        initialCenter: LatLng(42.757465, -1.703924),
                        initialZoom: 13,
                        onTap: (tapPosition, point) {
                          setState(() {
                            myMarkers.add(
                              Marker(
                                //key: UniqueKey(),
                                point: LatLng(point.latitude, point.longitude),
                                width: 45,
                                height: 45,
                                // if you have a pin-marker then you want the pin (bottom-center) to be at mark, else not:
                                alignment: Alignment.topCenter,
                                // when we have icon.location_pin with a pin
                                // the icon size below, see also https://github.com/fleaflet/flutter_map/discussions/2156
                                child: Container(
                                  child: IconButton(
                                    onPressed: () {
                                      print("marker clicked");
                                    },
                                    padding: EdgeInsets.zero,
                                    icon: Icon(Icons.location_pin),
                                    iconSize: 45.0,
                                    color: Color(0xff9045f7),
                                  ),
                                ),
                              ),
                            );
                            print("Marker added: " + point.toString());
                          });
                        }, // setState
                      ),
                      children: [
                        RichAttributionWidget(
                          attributions: [
                            // Suggested attribution for the OpenStreetMap public tile server
                            TextSourceAttribution(
                              'OpenStreetMap contributors',
                              onTap:
                                  () => {
                                    launchUrl(
                                      Uri.parse(
                                        'https://openstreetmap.org/copyright',
                                      ),
                                    ),
                                  },
                            ),
                          ],
                        ),
                        TileLayer(
                          urlTemplate:
                              'http://tile.openstreetmap.org/{z}/{x}/{y}.png',
                          userAgentPackageName:
                              'ShopperApp/0.1 (+https://bingoshopper.org; contact: [email protected])',
                          tileProvider: AHPFlutterMapCaching().provider,
                        ),
                        MarkerLayer(markers: myMarkers),
                      ],
                    ),
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

class AHPFlutterMapCaching {
  static final myHiveCacheStore = HiveCacheStore(
    '/data/user/0/com.example.shopper/app_flutter/map',
    hiveBoxName: 'MapsStore',
  );
  static AHPFlutterMapCaching? _instance;
  final CachedTileProvider myCachedTileProvider = CachedTileProvider(
    // maxStale keeps the tile cached for the given Duration and
    // tries to revalidate the next time it gets requested
    maxStale: const Duration(days: 300),
    // This example uses Hive as storage backend
    store: myHiveCacheStore,
  );
  get provider => myCachedTileProvider;
  factory AHPFlutterMapCaching() {
    _instance ??= AHPFlutterMapCaching._internal();
    return _instance!; // !!!
  }
  AHPFlutterMapCaching._internal();
}

[JaffaKetchup]

Hey 👋

Try extracting all the contents of the builder into a custom widget. This is usually good practise anyway as it means you can change what's shown inside the dialog during debugging with hot reload rather than having to close and reopen the dialog, and it improves code clarity. If a stateless widget doesn't do the trick, try a stateful one.

// In showDialog
builder: (context) => DialogWidget(),

// New widget
class DialogWidget extends StatelessWidget {
 // Etc.
}

[hadjiprocopis]

Perfect! Thank you @JaffaKetchup

FWIW, here is what you suggested using a StatefulWidget, markers are now updated as they are being tapped:

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_cache/flutter_map_cache.dart';
import 'package:latlong2/latlong.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:http_cache_hive_store/http_cache_hive_store.dart';

List<Marker> myMarkers = [];

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Maps2',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: MyHomePage(title: 'Flutter Maps'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme
            .of(context)
            .colorScheme
            .inversePrimary,
        title: Text(widget.title),
      ),
      body: Scaffold(
        body: Container(
          alignment: Alignment.center,
          child: IconButton(
            // get current position gps button
            iconSize: 34,
            padding: const EdgeInsets.all(0.0),
            icon: const Icon(Icons.map_sharp),
            onPressed: () {
              showDialog(
                barrierDismissible: true,
                // if you click outside it is dismissed
                barrierColor: Colors.white.withValues(alpha: 0.0),
                context: context,
                builder: (BuildContext context) {
                  return FlutterMapInDialogWidget(
                      title: 'My Flutter Map in a Dialog',
                      markers: myMarkers
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

class FlutterMapInDialogWidget extends StatefulWidget {
  final List<Marker> markers;

  const FlutterMapInDialogWidget(
      {super.key, required this.title, required this.markers});

  final String title;

  @override
  State<FlutterMapInDialogWidget> createState() =>
      _FlutterMapInDialogWidgetState();
}

class _FlutterMapInDialogWidgetState extends State<FlutterMapInDialogWidget> {
  @override
  Widget build(BuildContext context) {
    return FlutterMap(
            options: MapOptions(
              initialCenter: LatLng(42.757465, -1.703924),
              initialZoom: 13,
              onTap: (tapPosition, point) {
                setState(() {
                  widget.markers.add(
                    Marker(
                      //key: UniqueKey(),
                      point: LatLng(point.latitude, point.longitude),
                      width: 45,
                      height: 45,
                      // if you have a pin-marker then you want the pin (bottom-center) to be at mark, else not:
                      alignment: Alignment.topCenter,
                      // when we have icon.location_pin with a pin
                      // the icon size below, see also https://github.com/fleaflet/flutter_map/discussions/2156
                      child: Container(
                        child: IconButton(
                          onPressed: () {
                            print("marker clicked");
                          },
                          padding: EdgeInsets.zero,
                          icon: Icon(Icons.location_pin),
                          iconSize: 45.0,
                          color: Color(0xff9045f7),
                        ),
                      ),
                    ),
                  );
                  print("Marker added: " + point.toString());
                });
              }, // setState
            ),
            children: [
              RichAttributionWidget(
                attributions: [
                  // Suggested attribution for the OpenStreetMap public tile server
                  TextSourceAttribution(
                    'OpenStreetMap contributors',
                    onTap:
                        () =>
                    {
                      launchUrl(
                        Uri.parse(
                          'https://openstreetmap.org/copyright',
                        ),
                      ),
                    },
                  ),
                ],
              ),
              TileLayer(
                urlTemplate:
                'http://tile.openstreetmap.org/{z}/{x}/{y}.png',
                userAgentPackageName:
                'ShopperApp/0.1 (+https://bingoshopper.org; contact: [email protected])',
                tileProvider: AHPFlutterMapCaching().provider,
              ),
              MarkerLayer(markers: widget.markers),
            ]);
  }
}

class AHPFlutterMapCaching {
  static final myHiveCacheStore = HiveCacheStore(
    '/data/user/0/com.example.maps/app_flutter/map',
    hiveBoxName: 'MapsStore',
  );
  static AHPFlutterMapCaching? _instance;
  final CachedTileProvider myCachedTileProvider = CachedTileProvider(
    // maxStale keeps the tile cached for the given Duration and
    // tries to revalidate the next time it gets requested
    maxStale: const Duration(days: 300),
    // This example uses Hive as storage backend
    store: myHiveCacheStore,
  );

  get provider => myCachedTileProvider;

  // singleton boilerplate
  factory AHPFlutterMapCaching() {
    _instance ??= AHPFlutterMapCaching._internal();
    return _instance!; // !!!
  }

  // Private named constructor
  AHPFlutterMapCaching._internal();
}