How does Flutter Widget rerender works when it's properties change?

Issue

I’m just wondering how Flutter Widget works when Parent widget’s properties change.

Let’s say we have a Parent Widget which renders Widget base on some mutable value or some listenable value (like in Bloc Pattern).

return Scaffold(
  body: BlocBuilder<LocationBloc, LocationState>(builder: (context, state) {
    if (state is NewLocationState) {
      return Map(
        location: LatLng(state.latitude, state.longitude),
      );
    }
    return Container();
  }),
);

So in code above, the NewLocationState comes every 15 sec with new values.

My question is: What is happening with this Map Widget?

Does Flutter renders a completely new Map Widget every 15sec with new NewLocationState or similar to React, Flutter can compare the changes in some kind of virtual tree and only change the properties in an existing Map which is efficient and should cause less memory consumption.

Bloc example is just for reference/context of my question. but I want to know overall how Flutter Widget behaves when properties change.

Cheers

Solution

So in code above, the NewLocationState comes every 15 sec with new values.

Does Flutter renders a completely new Map Widget every 15sec?

Yes. Widgets are aren’t reused in any way.

On the other hand, while the widget instance is recreated, its associated State & Element & RenderObjects are preserved (as they are mutable instead).

Since it’s these three that does all the work in a Flutter app, it is actually pretty efficient.

Answered By – Rémi Rousselet

Answer Checked By – Marilyn (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *