How to Achieve 120 FPS in Flutter Without Jank

Modern devices are no longer limited to 60Hz. Many now support 90Hz or 120Hz, which means your Flutter app has a chance to feel incredibly smooth—but only if it can keep up. If your app misses frames, users experience jank: stutters, lag, and broken animations. Let’s fix that.

What 120 FPS Really Means

At 120 FPS, your app must render a frame every 8.33 milliseconds. That’s not much time. Every build, layout, paint, and animation must finish within that window.

Try this mentally: imagine scrolling your app—if even one frame is delayed, your eyes catch it instantly. That’s jank.

Why Your App Isn’t Hitting 120 FPS

Most Flutter apps fail here not because Flutter is slow, but because of inefficient code.

Common reasons:
-heavy widget rebuilds
-unnecessary setState calls
-large UI trees rebuilding frequently
-expensive layouts and paints

Quick check: open Flutter DevTools → Performance tab → look at the frame chart. If bars go above the line, you’re dropping frames.

Build Less, Perform More

Flutter is fast, but rebuilding widgets unnecessarily kills performance.

class MyWidget extends StatelessWidget {
 const MyWidget({super.key});
 @override
 Widget build(BuildContext context) {
 return const Text("Static Text");
 }
}

Using const tells Flutter: “Don’t rebuild this.”
Small change, big impact.

Try this: remove const from multiple widgets and scroll again. Notice the difference in smoothness.

Control Repaints Like a Pro

Not everything needs to repaint every frame.

RepaintBoundary(
 child: HeavyWidget(),
)

This isolates expensive UI parts so Flutter doesn’t redraw everything.

Yinh moment: Think of this like putting walls in a house—changes in one room don’t affect the whole building.

Optimize Animations for 120 FPS

Animations are the first place where jank shows up.

AnimationController(
 vsync: this,
 duration: const Duration(milliseconds: 300),
)

Shorter, well-timed animations feel smoother. Avoid heavy work inside animation builders.

Try this: add a complex calculation inside an animation and watch FPS drop. Then move it outside. Smooth again.

Avoid Heavy Work on the Main Thread

Flutter runs UI on a single thread. If you block it, frames drop.

compute(expensiveFunction, data);

Use isolates (compute) for heavy tasks like parsing JSON or image processing.

Interactive thought: if your UI freezes for even a moment, that’s your main thread being blocked.

Measure, Don’t Guess

Use Flutter DevTools to monitor FPS and frame time.

Look for:
-green bars = smooth frames
-red spikes = jank

Try this: intentionally slow down your UI and watch DevTools react. It’s the fastest way to learn.

Reality Check

You don’t “force” 120 FPS. You earn it.
If your app is optimized, Flutter will match the device refresh rate automatically. If not, it will drop frames.

Wrap Up

Achieving 120 FPS in Flutter is not about tricks—it’s about discipline. Build efficiently, isolate repaints, optimize animations, and never block the UI thread. Do that, and your app won’t just run—it will feel premium.