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

패키지, 저장소 및 앱 카테고리 검색

패키지 설치