Flutter - Memory Investigation

Question

I am using Flutter for a fairly large (IMO) social app. I use Firebase as a backend. There is a timeline listview with listview items that have a photo, avatar pic... pretty similar structure to Facebook. It's within a four tab application. The other 3 tabs are another timeline listivew, with same kind of listview items. A profile page that is pretty minimal and a settings page, which is VERY minimal. Clicking the listivew item takes you to a detail view, that has one picture, avatar picture, a description and comments that are loaded 10 at a time, async, through Firebase.

My problem is, watching it run on an iOS device, watching XCode, the memory usage (using iPhone X) pushes sometimes towards 2 gigs and eventually hits memory pressure and crashes.

I don't want to start over in Native code (Kotlin and Swift). Where do you suggest I start in investigating this. I haven't used the Flutter profiler yet. But to me, even though the UI is nice, it doesn't seem like it should be all that heavy (especially for native).

Can anyone suggest some beginning procedural steps to investigating and reconciling these memory issues?

Sorry, I know it's a big ask. But even small little hints, as I learn on the go, are a blessing.

Thanks!

Solution

This sounds like it might related to this issue that's being tracked on GitHub. I'd highly recommend running your app on a real device in release mode and see if you can observe the same memory growth. If you don't, it's likely worth filing an issue on GitHub or following up on the previously referenced issue.

If this is actually an issue with your application, you have a few options to try and figure out why you're leaking memory.

The Flutter team provides a tool called Dart DevTools that is useful for debugging and profiling your Flutter applications. In particular, you'll want to check out the memory view, where you can track memory growth statistics and determine where objects are being allocated and referenced from.

Another option is to use Observatory, the debugging tool served by the Dart virtual machine embedded in your debug mode Flutter application, and examine the allocation profile for anything that might stand out. Observatory might be a bit harder to use than DevTools as it was designed mostly for Dart VM engineers but it will provide at least as much functionality as DevTools does.

Comments

[Abion47]

I haven't used the Flutter profiler yet. Well then it sounds like that's where you should start.

[Daniel Chapman]

Agreed. It's giving me difficulties, but Observatory (on an Android device) will get me started down the right path, I believe. Thanks Abion!

[Daniel Chapman]

Thank you so much Ben! I have been researching the Observatory and Dart DevTools over the past couple of days. I genuinely think it is my misunderstood usage of setState and huge ancestor widget redraws. I did get to the memory view but it's unfortunately blank. But that's a whole other story. I think Observatory / allocation profiling will get me where I need to be. Thanks again good sir!