Flutter性能监控插件fps_jank_flash_widget的使用

fps_jank_flash_widget 是一个Flutter小部件，当Flutter无法在特定时间内渲染帧时会闪烁。这有助于开发者检测并优化应用的性能瓶颈。

安装

在你的pubspec.yaml文件中添加依赖：

flutter pub add fps_jank_flash_widget
flutter packages get

使用

基本用法

首先，你需要设置帧预算（frame budget）。默认情况下，60帧每秒（fps）的帧预算为17毫秒。

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 小部件

你可以在任何需要的地方直接使用FPSJankFlash小部件。例如，在一个包含其他小部件的堆叠布局中：

import 'package:fps_jank_flash_widget/fps_jank_flash_widget.dart';

class SomeWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Column(
          children: [
            /// 你的其他小部件
          ],
        ),
        const FPSJankFlash(),
      ]
    );
  }
}

使用 JankObserver 监听卡顿

你可以使用JankObserver来监听卡顿事件，并在发生卡顿时执行某些操作：

import 'package:fps_jank_flash_widget/fps_jank_flash_widget.dart';

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

  runApp(const MyApp());
}

针对高刷新率屏幕调整帧预算

如果你的应用在高刷新率屏幕上运行，可以相应地调整帧预算：

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()));
}

示例代码

以下是一个完整的示例代码，展示了如何使用fps_jank_flash_widget插件：

import 'dart:math';

import 'package:flutter/material.dart';
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()));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'FPS Jank Flash Widget Demo',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

final r = Random();

void sleep(int ms) {
  final start = DateTime.now();

  while (true) {
    final elapsed = DateTime.now().difference(start);
    if (elapsed.inMilliseconds >= ms) {
      break;
    }
  }
}

class _HomeState extends State<Home> {
  final controller = ScrollController()
    ..addListener(() {
      if (r.nextInt(100) < 10) {
        sleep(60);
      }
    });

  final list = List.generate(1000, (index) => 'Item $index');

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        controller: controller,
        itemCount: list.length,
        itemBuilder: (context, index) {
          final item = list[index];
          return ListTile(title: Text(item));
        },
      ),
    );
  }
}