fps_jank_flash_widget

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

fps_jank_flash_widget は、Flutterのパフォーマンス監視ツールであり、アプリが指定された時間枠内でフレームをレンダリングできなかったときに視覚的に点滅します。開発者向けに設計されており、リアルタイムでカクつきや応答なしのUI瞬間を強調することで、レンダリングのボトルネックを特定するのに役立ちます。このウィジェットは、Android、iOS、Web、macOS、Windows、Linuxといったすべての主要プラットフォームにシームレスに統合され、開発およびテスト中に有用です。特にフレームドロップの診断やアニメーション、複雑なレイアウトの最適化に効果的です。

用途

リアルタイムパフォーマンスデバッグ
アニメーション中のUIのジャンクを特定する
異なるデバイスでのアプリの応答性のテスト
複雑なウィジェットツリーの最適化
フレームレートの一貫性のモニタリング

主な機能

フレームの損失用の視覚的フラッシュインジケータ
クロスプラットフォーム互換性
ジャンク検出の設定可能なしきい値
pub add を用いた最小限のセットアップ
追加ツールなしの実行時フィードバック

適している対象

Flutter開発者がパフォーマンスのトラブルシューティングを行っている
スムーズなUI体験に注力するチーム
アプリテスト担当者がフレームレートの安定性を検証しています
フレームレンダリングについて学ぶための教育的利用

注意事項

本番ビルドには推奨されません
ユーザーテスト中に気を散らす可能性があります
手動での有効化が必要です
視覚フィードバックのみに限定
高頻度シナリオにおけるパフォーマンスのオーバーヘッド

元の 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

パッケージ、リポジトリ、アプリカテゴリを検索

パッケージをインストール