Skip to content
tezvyn:
Menu

Which DevTools view diagnoses janky Flutter animations?

Source: docs.flutter.devMediumHow cards are made

Summary

DevTools fluency and frame pipeline anatomy.

Key points

Open Performance view; compare UI and Raster bars; flag bars over 16ms; blame UI bloat on builds and Raster jank on shaders or saveLayer.

What's really being asked

Whether the candidate has actually debugged real animation jank or only read about it. The interviewer wants to hear the exact tool name, thread awareness, and a methodical reading of the flame chart.

The full answer

First, the candidate names the Performance view in Flutter DevTools, not the CPU Profiler or Widget Inspector. Second, they describe the flame chart as a timeline where each frame shows bars for the UI thread and the Raster thread. Third, they mention the frame budget, typically 16.67 milliseconds for 60 frames per second, and look for bars that exceed that budget or frames colored red to indicate jank. Fourth, they explain how to attribute the problem. If the UI thread bar is long, the issue is usually in Dart code such as an expensive build method, deep widget trees, or excessive layout passes. If the Raster thread bar is long, the issue is usually GPU side work like shader compilation, too many saveLayer operations, complex clipping, or large image decoding. Fifth, they might mention turning on Track Widget Builds or using Highlight Repaints to narrow the source after the flame chart points to a specific frame range.

The mistakes people make

Using the CPU Profiler as the primary tool instead of the Performance view. Claiming you would look at the Widget Inspector to find jank. Stating that you only look at total frame time without separating UI and Raster thread work. Blaming the Flutter engine generically without explaining how to tell which thread is responsible. Suggesting you would add print statements or manual timers instead of using the built-in flame chart. Recommending StatelessWidget conversions as a blanket fix without identifying the actual hot path in the chart.

What usually comes next

How would you fix UI thread jank if the flame chart shows a long build phase? What is the difference between shader compilation jank and build method jank? When would you use the CPU Profiler after identifying a slow frame in the Performance view? How do you interpret the frame chart on a 120Hz device where the budget is 8.33 milliseconds?

A concrete example

A custom painter with drop shadows causes dropped frames. In the Performance view flame chart, the UI thread is fast but the Raster thread bar spikes to 28 milliseconds. Zooming into the chart reveals multiple saveLayer calls from the shadow rendering. The fix is to cache the shadow in a picture recorder or reduce the blur radius so the GPU workload fits inside the 16.67 millisecond budget.

Interview question

In Flutter DevTools Performance view, a frame exceeds 16.67 ms. How do you tell if the jank comes from Dart code versus GPU-side work?

  • a.Check the total frame time and convert all StatefulWidgets to StatelessWidgets to reduce both Dart build and GPU rendering time.
  • b.Enable Track Widget Builds in the Widget Inspector; if widgets rebuild the jank is from Dart code, otherwise it is GPU-side.
  • c.Compare the UI thread bar and Raster thread bar; a long UI bar indicates Dart build issues and a long Raster bar indicates GPU work like shaders or saveLayer.Correct
  • d.Open the CPU Profiler during the animation and look for the longest Dart function; if one exists the jank is from Dart code, otherwise it is GPU-side.
Why?

The Performance view flame chart separates UI and Raster thread bars so you can attribute a long UI bar to expensive Dart builds and a long Raster bar to GPU work such as shaders or saveLayer. Reaching for the CPU Profiler is tempting but incorrect for initial attribution because it is only a follow-up after the Performance view isolates the slow frame range.

Just read this? Test yourself on what you have been reading.

Read the original → docs.flutter.dev

Put your scrolling time to good use

Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.

See open roles