Map gets rebuild with every frame while navigating

[JohnnyRainbow81]

As far as I understand flutter, widgets should only rebuild when configuration changes happen.

Maybe this is intentional here because of some internal, non visible magic of the leaflet map implementation. In this case, just let me know if this is wanted. Otherwise - what did I do wrong? My code example shows mostly a c/p version of the official example from https://pub.dev/packages/flutter_map.

The problem is: Rebuilding the FlutterMap also means its children rebuild, in my case, pretty expensive marker widgets, which I didn’t include in the example code (because they re not necessary to prove my point). The performance is quite laggy, so here’s my question:

Is the way it works now intentional or can I avoid the permanent rebuilding or is it a bug in the leaflet framework?

Thank you for your help!

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: LeafletMap());
  }
}

class LeafletMap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("LeafletMap.build()");
    return FlutterMap(
      options: MapOptions(
        center: LatLng(51.5, -0.09),
        zoom: 13.0,
      ),
      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: new LatLng(51.5, -0.09),
                builder: (ctx) => MyWidget()),
          ],
        ),
      ],
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("MyWidget.build()");
    return FlutterLogo();
  }
}

[ibrierley]

I think maybe you need to be a bit more specific about what problem you are experiencing.

I tend to think of it more as 'widgets update when state updates', or you ask them to update. Obviously a simplification, I don't tend to think of 'config', but it may be we sort of mean the same thing.

So when there's a map change, there naturally has to be a widget rebuild somewhere (this may be the 'invisible' bit within flutter_map you mean), but I'm not really sure if we're talking about the same thing, or which widgets you are referencing.

So I'd try and add a bit more info, what problem you are experiencing, how you are testing that, and what you expect vs what you experience. What do you mean by 'wrong' in your case, what do you specifically mean by 'frame' here.

[JohnnyRainbow81]

Hi ibrierley, thank you for the comment. I edited my post, hopefully my problem gets clearer now.

[ibrierley]

I'm just guessing here a bit, so apologies in advance, just thinking out loud.

If there are any child widgets that don't need to get rebuilt, could you make them into const widgets ?
However, I suspect your widgets will need to get rebuilt, as you're talking about Markers. They will need to get repositioned on the screen won't they ?

[JohnnyRainbow81]

Hi,
Well - it's a bit complicated.

First: Yes, you are right. I can use const widgets to avoid rebuilding when navigating the map. This works to a certain degree even with the complex Marker widgets i want to use in my real code, which contain animation, pictures etc. I can navigate the map, the markers move along accordingly, show animation, everything's fine there. And the widgets only rebuild when i rebuild them with new data, which is what i want. Without having constructor values (like see below), I almost got it.

BUT: Since this only works with const widgets, i don't have the possibility to set the Marker widgets' const compile time constructor values, like the key and callback functions, which i really, really need. Please see the code:

for (int i = 0; i <= MAX_MARKERS_IN_SCREEN; i++) {
      Marker m = Marker(
          height: MARKER_HEIGHT,
          width: MARKER_WIDTH,
          point: LatLng(data[i].lat, data[i].lng), 
          builder: (ctx) {
            return const MarkerWidget(
                key: Key(constListOfConstStrings[i]), //Not possible, "i" cannot be const 
                onTappedCallback: widget.onTappedCallback); // "Invalid constant value"
          });
    }

In summary: I cannot initialize the const widget with the values it needs.

Probably this is not a too hard problem, but after messing around for a long time I cannot see it anymore...

Best regards

[Swepilot]

I'm not a coding expert by any means so I might have misunderstood the problem, but have you looked at flutter_map_marker_popup https://github.com/rorystephenson/flutter_map_marker_popup

I'm using this to build markers at runtime. Perhaps that could give you a hint.

[maRci002]

Can u try #719 because as far as I remember I took care of that.

I mean in master (latest stable) version gestures.dart uses setState() every time in handleScaleUpdate however #719 gestures.dart uses another logic.

[JohnnyRainbow81]

@Swepilot I tried the marker_popup and they have the same issue with rebuilding every frame when navigating the map.

@maRci002 thank you. I guess I'll try this now...

[JohnnyRainbow81]

@maRci002
I tried the example app containing your newest code https://github.com/maRci002/flutter_map/tree/feature/gesture-update. Unfortunately for my purposes, the example Marker widgets(FlutterLogos) still rebuild with every frame, so the 'problem' of slow performance with larger Marker widgets still exists.

The only possibility to avoid Marker rebuild per frame is to make the Markers' widget constant. This works fine considering performance, but leads me to the other problem, that i cannot initialize them properly:

//initializing in a for-loop...

Marker marker = Marker(
...
builder: (ctx) {
            return const MarkerWidget(
                key: Key(constListOfConstStrings[i]), //Not possible, "i" from for-loop cannot be const 
                onTappedCallback: widget.onTappedCallback); // "Invalid constant value" > can this callback-Function be made const anyhow?!
          });

Maybe I'm just too stupid to use const correctly. If you see my mistake here or you know a workaround, please let me know.

[ibrierley]

What happens if you create your marker list outside of the build method (i.e in class LeafletMap) , and then just reference it later?
Eg MarkerLayerOptions( markers: myMarkerListFromEarlier )

[JohnnyRainbow81]

@ibrierley I already tried that and the problem of Marker widget rebuilding every frame stays the same.

(Edit) I could maybe get rid of the const-problem in the Key by initialising every Marker widget individually, which means, not in a loop, like:

Marker marker1 = Marker(... builder: (ctx) => const MarkerWidget(key: Key("1"), ....),
Marker marker2 = Marker(... builder: (ctx) => const MarkerWidget(key: Key("2"), ....)

This feels totally stupid, but would at least be a solution for the key.

But there would be still no solution for the callback functions i want to pass in the constructor. I want to give every MarkerWidget the same callback functions, but it doesn't seem to be possible to make functions == const...

[maRci002]

@JohnnyRainbow81 rebuilding the layer every frame while panning is the intended behaviour because we have to calculate the new position for the Marker, if we throttle the building time then you will see the marker stays at the same place while map is moving.

Anyway if you cache a Widget in a statefull widget then Flutter will respect that the Widget is the same instance so it won't rebuild it's subchildren. Here is how to do it manually.

#719 just prevents to rebuild the whole FlutterMap because it just updates the layers (the only exception when map is rotating)

[JohnnyRainbow81]

Hi @maRci002 ,
thank you for your explanation and your help.
(Edit) I just deleted this whole posting because of a big flaw in my state handling logic. I hope you didn't already read my post and invested time here, sorry :/

[Swepilot]

How about putting _buildEmptyMarkers in initState instead of in the build method?

[JohnnyRainbow81]

I got it working now! Hooray 🚀 The MarkerWidgets only rebuild when their data changes and not when User is navigating on the map.

On the other hand, one little piece of the code i'm not able to understand 😆

In case you re interested:

MarkerWidget _buildEmptyMarkerWidget() {
    final MarkerWidget m = MarkerWidget(
        number: 1, key: Key("1"), onMarkerTappedCallback: widget.onMarkerTappedCallback); //Probably i don't need the key here anymore
    return m;
  }
 ...

@override
  Widget build(BuildContext context) {

     //Caching one marker (Why the hell is **only one(final!)** marker enough here?!)
    final markerWidget = _buildEmptyMarkerWidget(); 

    return Consumer<MarkerDatas>( //bulk of data arrives for several MarkerWidgets
      builder: (ctx, markerDatas, widget) => FlutterMap
        //other stuff...
         layers: [
                 //other stuff
                  MarkerLayerOptions(
                markers: markerDatas.items.map((data) { 
                  MarkerData markerData = MarkerData(data);  //"MarkerData" is a ChangeNotifier from Provider Package, wrapping data for the MarkerWidget. Necessary to let the data flow down only to the state of the MarkerWidget and no need to rebuild it like MarkerWidget(markerData) 
              return Marker( 
                  point: LatLng(
                    data.place.location.latitude,
                    data.place.location.longitude,
                  ),
                  width: MARKER_WIDTH,
                  height: MARKER_HEIGHT,
                  builder: (ctx) =>
                      ChangeNotifierProvider.value(value: markerData, child: markerWidget)); //MarkerWidget uses a Consumer<MarkerData> to receive new data only in it's state to avoid complete rebuilding of the widget when new data arrives
            }).toList()),
          ],
        );
}

(Edit) Forgot to obfuscate my code :D

[ibrierley]

What bit aren't you able to understand ?