Memory leak on flutter web when using Icon in ListView

[IvoB1987]

Details

Consider this simple full application:

import 'package:flutter/material.dart';
void main() {
  runApp(const MaterialApp(
    home: Scaffold(body: MemoryTest()),
  ));
}

class MemoryTest extends StatelessWidget {
  const MemoryTest({super.key});
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 500,
      itemBuilder: (context, index) => const Icon(Icons.circle)
    );
  }
}

When running on web the memory keeps increasing indefinitely while scrolling through the list, as can seen in the Task Manager of Windows. Is this a bug in Flutter or how can I rewrite this code to prevent the memory leak? Simply replacing the Icon with a Text does not cause a leak.

Target Platform: web
Target OS version/browser: Chrome Version 110.0.5481.180 (Official Build) (64-bit)
Devices: Windows 10

Logs

Logs

Analyzing fluttertest...                                                
No issues found! (ran in 0.8s)

[√] Flutter (Channel stable, 3.7.6, on Microsoft Windows [Version 10.0.19045.2604], locale en-DK)
    • Flutter version 3.7.6 on channel stable at C:\Users\ivb\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 12cb4eb7a0 (7 days ago), 2023-03-01 10:29:26 -0800
    • Engine revision ada363ee93
    • Dart version 2.19.3
    • DevTools version 2.20.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at C:\Users\ivb\AppData\Local\Android\sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Enterprise 2022 17.5.0)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Enterprise
    • Visual Studio Enterprise 2022 version 17.5.33414.496
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2022.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619)

[√] IntelliJ IDEA Community Edition (version 2022.3)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.3.1
    • Flutter plugin version 72.1.4
    • Dart plugin version 223.8617.8

[√] VS Code (version 1.72.2)
    • VS Code at C:\Users\ivb\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.56.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.2604]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 110.0.5481.180
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 110.0.1587.63

[√] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[IvoB1987]

By the way I also posted it on stackoverflow: https://stackoverflow.com/questions/75674384/memory-leak-on-flutter-web-when-using-icon-in-listview

[exaby73]

Triage report

I can reproduce this issue with Master (3.9.0-1.0.pre.119). I took 3 heap snapshots on the Chrome devtools. Each time, I scrolled the list for a few seconds. After a minute of scrolling, the memory usage was >1GB.

Code Sample (Same as OP)

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: Scaffold(body: MemoryTest()),
  ));
}

class MemoryTest extends StatelessWidget {
  const MemoryTest({super.key});
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 500,
      itemBuilder: (context, index) => const Icon(Icons.circle)
    );
  }
}

Screenshot of heap snapshots using Chrome devtools

flutter doctor -v (Master)

[!] Flutter (Channel master, 3.9.0-1.0.pre.119, on Ubuntu 22.04.2 LTS 5.15.0-67-generic, locale en_US.UTF-8)
    • Flutter version 3.9.0-1.0.pre.119 on channel master at /home/exabyt3/fvm/versions/master
    ! Warning: `dart` on your path resolves to /usr/lib/dart/bin/dart, which is not inside your current Flutter SDK checkout at /home/exabyt3/fvm/versions/master. Consider adding /home/exabyt3/fvm/versions/master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 367ba011fd (2 hours ago), 2023-03-09 00:01:53 -0500
    • Engine revision 78ff6a0934
    • Dart version 3.0.0 (build 3.0.0-312.0.dev)
    • DevTools version 2.22.2
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /home/exabyt3/Android/Sdk
    • Platform android-33-ext4, build-tools 33.0.2
    • ANDROID_SDK_ROOT = /home/exabyt3/Android/Sdk
    • Java binary at: /home/exabyt3/programs/android-studio-preview/jbr/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /usr/bin/brave-browser

[✓] Linux toolchain - develop for Linux desktop
    • Ubuntu clang version 14.0.0-1ubuntu1
    • cmake version 3.22.1
    • ninja version 1.10.1
    • pkg-config version 0.29.2

[✓] Android Studio (version 2022.3)
    • Android Studio at /home/exabyt3/programs/android-studio-preview
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] Android Studio (version 2022.1)
    • Android Studio at /home/exabyt3/programs/android-studio
    • Flutter plugin version 72.1.2
    • Dart plugin version 221.6096
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] VS Code (version 1.76.0)
    • VS Code at /usr/share/code
    • Flutter extension version 3.60.0

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 22.04.2 LTS 5.15.0-67-generic
    • Chrome (web)    • chrome • web-javascript • Brave Browser 110.1.48.171

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[rydmike]

This issue feels a bit related to my issue, so for now I'm posting my initial comments here. If it later proves to not be related to this issue, I will open a separate issue.

I have also been tracking a troublesome bug in a rather big Flutter WEB build as well. It feels like the app gets more sluggish as it runs and eventually crashes with an issue on "MaterialIcons", shown below:

I see this on both Flutter 3.7.7 and latest 3.9 master. I only see it in WEB release build, not in WEB debug mode builds. Also in VM builds, like macOS, I see no issues at all, there are no console log message at all that could provide a hint about what might be wrong.

Since I only get the crash on a web release build, I'm finding it very difficult to debug it and provide any useful info. Also time to crash is a bit random, but not very long.

I also see other strange behavior in the release mode build of same app, with values changes in hover over items, that do have a hover response, but in the particular use case should not change on hover and does not do so on other builds, except on WEB release mode builds, again WEB debug build does not show that issue either.

I feel something important is being optimized out by the WEB release mode to JS compiler that should not be. This would not be the first time I have experienced this type of bug, this has the exact same "smell" the other dart2js (now dart compile js) one I experienced some years ago.

The web crash above says "Build with -sASSERTIONS" for more info. How do I do that in Flutter? I see in docs that "dart compile js" has a "--enable-asserts" flag, sounds like it, but it did not work with flutter run, like in:

flutter run -v -d chrome --release --web-renderer canvaskit --enable-asserts 

At the moment I don't know how to dig deeper into this issue to provide any more helpful info on the issue. I can only see that it seems like a quite bad Dart web compiler bug. Perhaps this issue belongs in the Dart repo? Maybe there is a report about it already. I will god have a look and see if I can find something related to this there as well.

[IvoB1987]

@rydmike it could be related yeah. My application also starts to throw the same errors when the memory runs up too high. Maybe that's also happening with your application.