drawFrame method

  1. @override
void drawFrame ()
override

Pump the build and rendering pipeline to generate a frame.

This method is called by handleDrawFrame, which itself is called automatically by the engine when when it is time to lay out and paint a frame.

Each frame consists of the following phases:

  1. The animation phase: The handleBeginFrame method, which is registered with Window.onBeginFrame, invokes all the transient frame callbacks registered with scheduleFrameCallback, in registration order. This includes all the Ticker instances that are driving AnimationController objects, which means all of the active Animation objects tick at this point.

  2. Microtasks: After handleBeginFrame returns, any microtasks that got scheduled by transient frame callbacks get to run. This typically includes callbacks for futures from Tickers and AnimationControllers that completed this frame.

After handleBeginFrame, handleDrawFrame, which is registered with Window.onDrawFrame, is called, which invokes all the persistent frame callbacks, of which the most notable is this method, drawFrame, which proceeds as follows:

  1. The build phase: All the dirty Elements in the widget tree are rebuilt (see State.build). See State.setState for further details on marking a widget dirty for building. See BuildOwner for more information on this step.

  2. The layout phase: All the dirty RenderObjects in the system are laid out (see RenderObject.performLayout). See RenderObject.markNeedsLayout for further details on marking an object dirty for layout.

  3. The compositing bits phase: The compositing bits on any dirty RenderObject objects are updated. See RenderObject.markNeedsCompositingBitsUpdate.

  4. The paint phase: All the dirty RenderObjects in the system are repainted (see RenderObject.paint). This generates the Layer tree. See RenderObject.markNeedsPaint for further details on marking an object dirty for paint.

  5. The compositing phase: The layer tree is turned into a Scene and sent to the GPU.

  6. The semantics phase: All the dirty RenderObjects in the system have their semantics updated (see RenderObject.semanticsAnnotator). This generates the SemanticsNode tree. See RenderObject.markNeedsSemanticsUpdate for further details on marking an object dirty for semantics.

For more details on steps 4-8, see PipelineOwner.

  1. The finalization phase in the widgets layer: The widgets tree is finalized. This causes State.dispose to be invoked on any objects that were removed from the widgets tree this frame. See BuildOwner.finalizeTree for more details.

  2. The finalization phase in the scheduler layer: After drawFrame returns, handleDrawFrame then invokes post-frame callbacks (registered with addPostFrameCallback).

Implementation 

//
// When editing the above, also update rendering/binding.dart's copy.
@override
void drawFrame() {
  assert(!debugBuildingDirtyElements);
  assert(() {
    debugBuildingDirtyElements = true;
    return true;
  }());
  try {
    if (renderViewElement != null)
      buildOwner.buildScope(renderViewElement);
    super.drawFrame();
    buildOwner.finalizeTree();
  } finally {
    assert(() {
      debugBuildingDirtyElements = false;
      return true;
    }());
  }
  // TODO(ianh): Following code should not be included in release mode, only profile and debug modes.
  // See https://github.com/dart-lang/sdk/issues/27192
  if (_needToReportFirstFrame && _reportFirstFrame) {
    developer.Timeline.instantSync('Widgets completed first useful frame');
    developer.postEvent('Flutter.FirstFrame', <String, dynamic>{});
    _needToReportFirstFrame = false;
  }
}