Search packages, repositories and app categories

Package detailsv1.1.0+3

fps_jank_flash_widget

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

AndroidiOSWebmacOSWindowsLinux
30-day downloads
8
Likes
22
Pub points
160

Install package

flutter pub add fps_jank_flash_widget

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

The fps_jank_flash_widget is a Flutter performance monitoring tool that visually flashes when the app fails to render frames within a specified timeframe. Designed for developers, it helps identify rendering bottlenecks by highlighting janky or unresponsive UI moments in real time. The widget integrates seamlessly across all major platforms—Android, iOS, Web, macOS, Windows, and Linux—making it useful during development and testing. It’s particularly effective for diagnosing frame drops and optimizing animations or complex layouts.

Use cases

  • Real-time performance debugging
  • Identifying UI jank during animation
  • Testing app responsiveness on different devices
  • Optimizing complex widget trees
  • Monitoring frame rate consistency

Key features

  • Visual flash indicator for dropped frames
  • Cross-platform compatibility
  • Configurable threshold for jank detection
  • Minimal setup with pub add
  • Runtime feedback without additional tools

Suitable for

  • Flutter developers troubleshooting performance
  • Teams focused on smooth UI experiences
  • App testers validating frame rate stability
  • Educational use for learning about frame rendering

Considerations

  • Not recommended for production builds
  • May distract during user testing
  • Requires manual activation
  • Limited to visual feedback only
  • Performance overhead in high-frequency scenarios

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

FPS Jank Flash widget

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

lesnitsky.dev GitHub stars Twitter Follow

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

lesnitsky.dev GitHub stars Twitter Follow

Categories

Source repository

Projects using this package

No data available yet.