Flutter Map, Controller lost in modal

Question

I'm trying to open a modal in a flutter_map to create relocating shortcut. I try to send the flutter_map context into the modal, but when I'm in. If I click on it , it tell me, that it can't find a flutter map context.

       FlutterMap(
            options: const MapOptions(
              initialCenter: LatLng(54.939196, -3.929788),
              initialZoom: 14,
            ),
            children: [
              TileLayer(
                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                userAgentPackageName: 'com.example.app',
              ),
              const NavigationButton(),
            ],

When I use showModal, I think that I give properly my FlutterMapContext.

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

  @override
  Widget build(BuildContext context) {
    var mapController = MapController.of(context);
    var mapCamera = MapCamera.of(context);
    return Align(
        alignment: Alignment.bottomLeft,
        child: Padding(
          padding: const EdgeInsets.only(left: 2.0, bottom: 2.0, right: 2.0),
          child: FloatingActionButton(
            onPressed: () {
              showModalBottomSheet(
                  context: context,
                  builder: (context) => NavigationList());
            },
            child: const Icon(Icons.list),
          ),
        ));
  }
}

class NavigationList extends StatelessWidget {
  const NavigationList(
      {Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Shortcut(
            title: "Entrance Hall",
            lat: 54.949196,
            lng: -3.929788),
      ],
    );
  }
}

class Shortcut extends StatelessWidget {
  final String title;
  final double lat;
  final double lng;
  const Shortcut(
      {super.key,
      required this.title,
      required this.lat,
      required this.lng});
  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      onTap: () => MapController.of(context).move(LatLng(lat, lng),MapCamera.of(context)),
    );
  }
}

Thank you

Bad state: `MapController.of()` should not be called outside a `FlutterMap` and its children

Answer 1

This occurs because Material modal children are actually a child of the MaterialApp, as you can see from the DevTools inspector screenshot below.

You'll need to either:

• pass through the appropriate context, making sure not to confuse them
  I'm not entirely sure what the context argument does in showModalBottomSheet, but it's clearly not the right thing
• use an external map controller as in these docs, which is probably preferable