Understanding FPS in Flutter: Why 60 vs 120 Changes Everything

When you scroll an app or tap a button, what you’re really seeing is a sequence of frames. The speed at which these frames appear is called FPS—frames per second. This small number has a huge impact on how your app feels.

What 60 FPS Actually Means

At 60 FPS, your app renders 60 frames every second. That gives Flutter about 16.67 milliseconds to build, layout, and paint each frame. If everything finishes within this time, your app feels smooth. If not, frames drop and you notice lag, also called jank.
Try this in your mind: imagine flipping through 60 images every second like a flipbook. That’s what your UI is doing continuously.

What Changes at 120 FPS

At 120 FPS, everything doubles. Your app now renders 120 frames per second, but the time per frame drops to just 8.33 milliseconds. This makes animations look incredibly smooth, especially during fast scrolling or gestures.
Now imagine flipping 120 images per second. Movements feel more natural, almost like real life.

The Real Difference You Feel

You might think 60 FPS is already smooth, and it is. But once you experience 120 FPS, going back feels slightly less fluid. The difference is most noticeable when scrolling long lists, dragging elements, or using gesture-heavy apps.
Try this yourself: use a high-refresh-rate phone and scroll quickly in a Flutter app. Then compare it with a standard 60 Hz device. The smoothness difference is subtle but real.

How Flutter Handles FPS

Flutter doesn’t let you manually set FPS. Instead, it syncs with the device’s refresh rate using its rendering engine. If the device supports 120 Hz, Flutter will try to render at 120 FPS.
But here’s the catch: Flutter can only be as fast as your code. If your UI takes too long to build, it misses the frame deadline. That’s when dropped frames happen.

What Causes Jank

Jank occurs when a frame takes longer than its allotted time. On a 60 FPS device, anything above 16 ms causes trouble. On a 120 FPS device, the limit is even stricter at 8 ms.
Heavy widgets, unnecessary rebuilds, large images, and complex layouts are common reasons. Even a small inefficiency becomes noticeable at higher refresh rates.

Try This Small Experiment

Build a simple animated widget using an AnimationController. Run it on a normal device and then on a 120 Hz device. Observe closely during fast motion. You’ll notice how transitions feel tighter and more responsive at higher FPS.
Now add a heavy computation inside build(). Watch how both 60 and 120 FPS struggle. This shows that performance matters more than raw FPS.

Why 120 FPS Isn’t Always Better

Higher FPS improves smoothness, but it also increases CPU and GPU usage. That means more battery consumption. For static screens or simple apps, 60 FPS is perfectly fine.
The real goal isn’t “maximum FPS,” it’s “consistent FPS.” A stable 60 FPS is better than a fluctuating 120 FPS.

How to Keep Your Flutter App Smooth

Think in terms of time, not frames. Every widget build, every layout pass, every repaint must fit within the frame budget. Use const widgets where possible, avoid unnecessary rebuilds, and isolate heavy UI with RepaintBoundary.
Most importantly, use Flutter DevTools to monitor performance. It shows exactly where frames are being delayed.

"FPS is not just a number, it’s the feeling of your app. 60 FPS feels smooth. 120 FPS feels premium. But both depend entirely on how efficiently your app is built.
The next time your app feels laggy, don’t just think about FPS. Think about time, rendering, and how each frame is created. That’s where true performance lives."