‘addPostFrameCallback’ vs. ‘endOfFrame.then’ in WidgetsBinding with Rendering.
as a Flutter developer, I think—at least once — you decided to do some work in initState() which needs BuildContext.
Therefore, we do our work inside the WidgetsBinding.instance.addPostFrameCallbackcallback or WidgetsBinding.instance.endOfFrame.then so we use BuildContext safely.
So what’s the difference?
And how does this relate to the rendering process?
WidgetsBinding
the WidgetsBinding class provides us access to the current state of the widgets system or as the flutter docs say,
The glue between the widgets layer and the Flutter engine.
through the WidgetsBinding instance, we can access “addPostFramCallback” and “endOfFrame.then”.
“addPostFramCallback” and “endOfFrame.then” both can be used to schedule a callback to be executed after the rendering phase to the current frame ends.
But before showing the difference between them, we need first to define the “rendering phase”.
Rendering Phases
in #Flutter, rendering goes through four phases and each one has a specific purpose:
- Layout phase: During the layout phase, the dimensions and positions of the widgets are calculated. it ensures that the widgets are properly positioned and sized on the screen.
- Painting phase: During the painting phase, the widgets are painted on the screen using the dimensions and positions calculated during the layout phase. The painting phase involves traversing the widgets tree and calling the
paintmethod of each widget. - Compositing phase: The compositing phase takes the painted widgets and combines them into a single image that can be displayed on the screen.
- Rasterizing phase: in this final phase, the engine receives the updated layer tree containing the drawing instructions and converts them into pixels. in other words, the scene is displayed on the screen as a matrix of pixels.
For more deep info about rendering in Flutter, check this talk by Adam Barth.
Now, let’s jump back to our main topic…
‘addPostFrameCallback’ vs. ‘endOfFrame.then’
As we said before,
“both can be used to schedule a callback to be executed after the rendering phase to the current frame ends”
However, they differ in terms of when the callback is executed in relation to the rendering phases.
- “addPostFramCallback”: adds a callback that is executed immediately after the “rendering phase” ends but before the engine starts the “layout phase”. This method is useful for tasks that need to be performed after the widgets have been painted, but before the layout is calculated.
- “endOfFrame.then”: returns a future that completes after the “rendering phase” ends, but after the “layout phase” of the first frame has started. This method is useful for tasks that need to be performed after the widgets have been painted and the layout has been calculated.
Each method has its own purpose to fulfill your needs.
And that’s it, I would love to hear your feedback about this article or discuss any related topics, so feel free to drop a comment or reach out to me on Twitter or LinkedIn.
