Flutter | Understanding the MemoryAllocations

In this post, you will become familiar with the MemoryAllocations class from the Flutter framework and learn how to use it to create smart, interactive solutions.

Overview of the class

The MemoryAllocations class helps track when objects are created or disposed of in the app. What does that mean? This class can help when we want to know if something specific was created or disposed of in the app.

Why you might need it

This functionality may be very useful when you create a solution that has to react to changes in the widget tree. Let’s say you want to highlight a widget that appeared on the screen, but you do not want or cannot modify the code of the widget. Thanks to MemoryAllocations, you will know that the widget was created, and you can perform further actions with it.

This is exactly what we’ve done at Flukki; we created a no-code product tour builder that relies on this class. When our plugin sees that a specific widget was shown on screen, we can handle the whole logic, knowing its position and size.

How to handle events

MemoryAllocations gives us a simple API to dispatch or listen to events. We are interested in listening to them, so here is a code sample from our plugin:

MemoryAllocations.instance.addListener((event) {
  if (event.object is Element) {
    if (event is ObjectCreated) {
      ContextController.instance.addElement(event.object as Element);
    } else if (event is ObjectDisposed) {
      ContextController.instance.removeElement(event.object as Element);
    }
  }
});

As you can see, the implementation is straightforward; we receive an event, and we handle it with our logic. In Flukki, we are interested only in Element objects’ lifecycle, but you have a free hand to implement it your way.

How to enable MemoryAllocations

There is a condition that describes if the functionality is turned on or off:

const bool _kMemoryAllocations = bool.fromEnvironment('flutter.memory_allocations');

const bool kFlutterMemoryAllocationsEnabled = _kMemoryAllocations || kDebugMode;

The class is active in debug builds or when an additional run argument was passed when starting the app.

How to pass the run argument?

Android Studio

1. Go to Edit configurations.
2. Choose something or create a new configuration.
3. Pass the argument into the field named Additional run arguments.

--dart-define=flutter.memory_allocations=true

Configurations view after change:

VS Code

1. Open “Run and Debug” view (Ctrl + Shift + D by default).
2. Click on “Show all automatic debug configurations.”
3. From the dropdown, choose Dart & Flutter and then click on the gear icon at “Flutter (release mode).”
4. In the newly created file launch.json, add code:

"args": ["--dart-define=flutter.memory_allocations=true"]

5. Your code should look like this:

Release

To make it work on release mode, you must also pass this argument when building the app.

flutter build web --dart-define=flutter.memory_allocations=true
flutter build apk --dart-define=flutter.memory_allocations=true
flutter build ipa --dart-define=flutter.memory_allocations=true

And that’s it, now you are able to listen to object creation and disposal event.

Be creative folks,
Maciek