Flutter can make it easy to build complex interfaces, but keeping those interfaces smooth at 120 FPS is a different challenge. In this session, we'll look at what happens when a Flutter application starts doing too much work during rendering.

We'll build and deliberately stress a Flutter graphics canvas using complex paths, expensive painting operations, multiple layers, and unnecessary repaints. Once the application starts dropping frames, we'll use Flutter DevTools and Android Perfetto to find out why.

Rather than looking at performance as a collection of rules, we'll follow the evidence in the traces. We'll identify whether the problem is coming from the UI thread, raster thread, or GPU, and then make targeted changes to the code and measure the results.

Along the way, we'll explore how Impeller's rendering pipeline works on Android, how CustomPainter and canvas operations affect performance, and where tools such as RepaintBoundary can help.

By the end of the session, attendees will have a practical workflow for taking a Flutter rendering problem from "it feels janky" to a measurable performance improvement.

Key Takeaways

• Understand the basics of how Impeller renders Flutter graphics on Android.

• Use Flutter DevTools and Android Perfetto to investigate frame drops.

• Identify expensive painting, layers, and unnecessary repaints.

• Apply practical optimizations to CustomPainter-based interfaces.

• Measure rendering improvements instead of relying on guesswork.