fps_jank_flash_widget

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

fps_jank_flash_widget 是一个 Flutter 性能监控工具，当应用程序未能在指定时间内渲染帧时，会以视觉闪烁的方式提示。专为开发者设计，可实时突出显示卡顿或无响应的 UI 时刻，帮助识别渲染瓶颈。该组件可无缝集成到所有主要平台——Android、iOS、Web、macOS、Windows 和 Linux，适用于开发和测试阶段。尤其适用于诊断帧率下降问题，并优化动画或复杂布局。

适合场景

实时性能调试
识别动画过程中的UI卡顿
在不同设备上测试应用程序的响应性
优化复杂的部件树
监控帧率一致性

主要特点

丢帧的视觉闪烁指示器
跨平台兼容性
可配置的卡顿检测阈值
使用 pub add 进行最小化设置
无需额外工具的运行时反馈

适合对象

Flutter 开发人员排查性能问题
专注于流畅用户界面体验的团队
应用测试人员验证帧率稳定性
用于学习帧渲染的教育用途

使用建议

不建议用于生产构建
可能在用户测试期间造成分心
需要手动激活
仅限视觉反馈
高频场景下的性能开销

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

FPS Jank Flash widget

A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

Installation

flutter pub add fps_jank_flash_widget
flutter packages get

Usage

import 'package:fps_jank_flash_widget/fps_jank_flash_widget.dart';

void main() {
  const frameBudget = Duration(milliseconds: 17); // 60 fps
  FPSJankFlash.frameBudget = frameBudget;

  runApp(FPSJankFlash.overlay(child: const MyApp()));
}

FPSJankFlash could be used directly:

import 'package:fps_jank_flash_widget/fps_jank_flash_widget.dart';

class SomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Column(
         children: [
            /// ... your widgets,
          ],
        ),
        const FPSJankFlash(),
      ]
    );
  }
}

You can also use a JankObserver:

import 'package:fps_jank_flash_widget/fps_jank_flash_widget.dart';

void main() {
  JankObserver.addListener(() {
    print('jank detected');
  });

  runApp(YourApp());
}

If you're testing the app on a higher refresh rate displays, override the frame duration budget:

import 'package:fps_jank_flash_widget/fps_jank_flash_widget.dart';


void main() {
  const refreshRate = 120;
  final budgetMs = 1000 ~/ refreshRate;
  FPSJankFlash.frameBudget = Duration(milliseconds: budgetMs);

  runApp(FPSJankFlash.overlay(child: const MyApp()));
}

License

MIT

搜索插件、代码仓与 APP 分类

安装插件