Zoom changed listener

Question

I wonder, Is exists in the flutter_map package v. 0.13.1 some zoom change event listener?

I try to change stroke width according to zoom size. How can I handle this?

Answer 1

You could use the MapOptions property onPositionChanged it is a callback called every time you move on your map, even when you are just zooming. From this callback you could populate a Stream which you would be able to listen.

Here is my full test code:

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _controller = MapController();

  // Create your stream
  final _streamController = StreamController<double>();
  Stream<double> get onZoomChanged => _streamController.stream;

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

    // Add your listener
    onZoomChanged.listen((event) {
      print('New zoom is $event');
    });
  }

  @override
  void dispose() {
    _streamController.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      // Some basic zoom control buttons
      floatingActionButton: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          FloatingActionButton(
            onPressed: () =>
                _controller.move(_controller.center, _controller.zoom + 1),
            child: Icon(Icons.zoom_in),
          ),
          const SizedBox(height: 8),
          FloatingActionButton(
            onPressed: () =>
                _controller.move(_controller.center, _controller.zoom - 1),
            child: Icon(Icons.zoom_out),
          )
        ],
      ),
      body: FlutterMap(
        mapController: _controller,
        options: MapOptions(
          center: LatLng(51.5, -0.09),
          zoom: 13.0,
          onPositionChanged: (position, hasGesture) {
            // Fill your stream when your position changes
            final zoom = position.zoom;
            if (zoom != null) {
              _streamController.sink.add(zoom);
            }
          },
        ),
        layers: [
          TileLayerOptions(
              urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
              subdomains: ['a', 'b', 'c']),
          MarkerLayerOptions(
            markers: [
              Marker(
                width: 80.0,
                height: 80.0,
                point: LatLng(51.5, -0.09),
                builder: (ctx) => Container(
                  child: FlutterLogo(),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Console Output:

PS D:\Documents\Projects\so_tests> flutter run -d chrome
Launching lib\main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...             13,4s
This app is linked to the debug service: ws://127.0.0.1:64606/bNK9z0-_2N8=/ws
Debug service listening on ws://127.0.0.1:64606/bNK9z0-_2N8=/ws

 Running with sound null safety 

  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".
New zoom is 13
New zoom is 12
New zoom is 11
New zoom is 10
New zoom is 11
New zoom is 12