show_fps

Show FPS

Use ShowFPS to monitor your app's FPS (Frames Per Second) in real time with advanced performance metrics.

Features

• Real-time FPS monitoring with accurate microsecond precision
• Average FPS calculation for smoother readings
• Min/Max FPS tracking
• Frame time display in milliseconds
• Color-coded FPS text based on performance
• Interactive chart with customizable colors
• Target FPS line on chart
• Jank frame indicators (frames significantly slower than average)
• Frame budget indicator (percentage of target frame time used)
• Dropped frame counter
• Draggable widget positioning
• Collapsible/expandable view
• Double-tap to temporarily hide
• Low FPS threshold alerts with visual feedback
• Fully customizable colors and text styles

Installation

Add show_fps: ^1.1.0 in your project's pubspec.yaml:

dependencies:
  show_fps: ^1.1.0

Usage

Import show_fps in your dart file:

import 'package:show_fps/show_fps.dart';

Basic Usage

Wrap your main widget with ShowFPS widget:

import 'package:flutter/material.dart';
import 'package:show_fps/show_fps.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FPS Monitor',
      debugShowCheckedModeBanner: false,
      home: ShowFPS(
        alignment: Alignment.topRight,
        visible: true,
        showChart: true,
        child: const MyHomePage(),
      ),
    );
  }
}

Hide in Release Mode

import 'package:flutter/foundation.dart';

ShowFPS(
  visible: !kReleaseMode,
  child: MyHomePage(),
)

Simple FPS Counter (No Chart)

ShowFPS(
  showChart: false,
  child: MyHomePage(),
)

Advanced Usage with All Features

ShowFPS(
  alignment: Alignment.topRight,
  visible: true,
  showChart: true,
  borderRadius: const BorderRadius.all(Radius.circular(11)),

  // Display options
  showAverage: true,           // Show rolling average FPS
  showMinMax: true,            // Show min/max FPS values
  showFrameTime: true,         // Show frame time in ms
  colorCodedText: true,        // Color FPS based on performance

  // Chart options
  targetFps: 60,               // Target FPS for calculations
  showTargetLine: true,        // Show target line on chart
  showJankIndicators: true,    // Highlight slow frames
  jankThreshold: 1.5,          // Frames 1.5x slower than avg are jank
  chartMaxFps: 60,             // Max FPS for chart scale

  // Advanced metrics
  showFrameBudget: true,       // Show % of frame budget used
  showDroppedFrames: true,     // Show dropped frame count

  // Interaction options
  draggable: true,             // Allow dragging the widget
  collapsible: true,           // Tap to collapse/expand
  doubleTapToHide: true,       // Double-tap to temporarily hide
  hideDuration: const Duration(seconds: 3),

  // Performance options
  sampleRate: 1,               // Update every N frames

  // Customization
  backgroundColor: const Color(0xaa000000),
  goodColor: const Color.fromARGB(255, 0, 162, 255),
  poorColor: const Color(0xfff44336),
  textStyle: const TextStyle(
    color: Colors.white,
    fontSize: 14,
  ),

  // Alert callback
  alertThreshold: 30,          // Alert when FPS drops below 30
  onAlertTriggered: () {
    print('FPS dropped below threshold!');
  },

  child: MyHomePage(),
)

Parameters