Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
performance cover
Package detailsv0.1.1

performance

Performance overlay package for Flutter apps that works on web.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
728
Likes
27
Pub points
160

Install package

flutter pub add performance

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

The performance overlay package for Flutter provides real-time performance metrics such as frame rate, memory usage, and CPU load directly on the app interface. Designed to work seamlessly across all platforms—including web—it helps developers identify and resolve performance bottlenecks during development. The overlay is lightweight and configurable, making it ideal for debugging UI responsiveness and resource consumption. It integrates easily via a simple pub add command and supports multiple target platforms.

Use cases

  • Real-time performance monitoring during development
  • Identifying frame drops and rendering issues
  • Optimizing app responsiveness on web
  • Debugging memory and CPU usage
  • Testing app performance across different devices
  • Validating UI smoothness in production-like environments

Key features

  • Live frame rate and performance stats
  • Cross-platform support including web
  • Minimal setup with pub add
  • Configurable overlay appearance
  • No runtime overhead in release mode
  • Supports all major Flutter platforms

Suitable for

  • Flutter developers troubleshooting UI lag
  • Teams building web-first Flutter apps
  • Performance-focused app optimization
  • Frontend engineers testing responsiveness
  • Mobile and desktop app developers
  • QA testers validating app stability

Considerations

  • Overlay should be disabled in production builds
  • May impact performance slightly during heavy use
  • Not intended for end-user visibility
  • Requires manual integration in app entry point
  • Limited customization options for layout
  • Best used during active development sessions

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

performance Pub version demo badge Twitter Follow

Performance overlay for Flutter apps that works on web.

sample

Reading the charts

You can read the charts in the performance overlay like this:

  • Every bar represents a single frame.
  • The height of each bar represents the total time it took to render the frame.
  • The line indicates the target frame time (e.g. 16ms for 60 FPS) and frames that cross that line turn red.
  • The overlay is divided into three charts.
    • UI: the time it takes the UI to build.
    • Raster: the time it takes to rasterize the frame.
    • High latency: the total time between vsync start and raster finish, i.e. the time it takes from an input to seeing the next frame.
  • The "max" value shows how long the worst sample in the displayed range took.
  • The "avg" value represents the average of all samples in the displayed range.
  • The displayed FPS value indicates the best logically possible number of frames that could have been rendered per second. This might not be the actual value, but the actual value is definitely not greater than this. This is computed based on the average.

Limitations

The package is based on the FrameTiming API. Everything documented there applies. This should correspond one to one with the values you see in the framework performance overlay on mobile and on native desktop. So if you like how this looks better, you can also use this package on mobile and native desktop :)

On web, however, it shows somewhat limited data. This is because performance data from the GPU on web is not available in the FrameTiming instances (which would be part of the raster duration on native). What is included in the raster duration on web are only parts of what is done on the GPU thread on native (due to limitations on the web which require running the computations on the UI thread). If you want to access the GPU performance data, you can use Chrome DevTools or chrome://tracing for example.

Repo structure

This repo currently contains the following packages:

Package Contents
performance The actual performance Flutter package for the performance overlay that is also hosted on Pub.

Categories

Performance & Crash Insights

Source repository

Projects using this package

No data available yet.