Flutter 的效能覆蓋層套件可直接於應用介面提供即時效能指標，例如畫面更新速率、記憶體使用與 CPU 負載。此工具設計為可在所有平台（包含 Web）順暢運作，協助開發人員在開發過程中識別並解決效能瓶頸。覆蓋層輕巧且可設定，非常適合用於除錯 UI 回應性與資源消耗。僅需簡單的 pub add 指令即可輕鬆整合，並支援多個目標平台。
適用情境
開發過程中的即時性能監控
識別幀率下降和渲染問題
優化網頁應用的響應速度
除錯記憶體和CPU使用情況
在不同設備上測試應用性能
在類似生產環境的環境中驗證UI流暢性
主要特色
即時幀率與效能統計
跨平台支援，包含網頁
使用 pub add 進行最小化設定
可設定的覆蓋層外觀
發布模式下無執行時開銷
支援所有主要的Flutter平台
適合對象
Flutter 開發人員排錯 UI 滯遲
建構以 Web 為首選的 Flutter 應用程式的團隊
注重效能的應用優化
前端工程師測試響應式設計
行動與桌面應用程式開發人員
品質保證測試人員驗證應用程式的穩定性
使用建議
生產構建中應禁用覆蓋層
在高負載使用期間可能略微影響效能
不打算對最終用戶可見
需要在應用入口點手動整合
佈局的自定選項有限
最適合在活躍的開發會話期間使用
原始 README
以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。
performance
Performance overlay for Flutter apps that works on web.
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:
