Flutter 打印Widget 层级列表

在Flutter实际开发过程中，偶尔调试Widget生命周期时，需要打印Widget的路径，从路径中查找组件inState生命周期触发的原因。

实际案例：

在用Container 包裹一个组件，发现该组件instate生命周期莫名被调用，根据打印出来的路径，定位到Container的Decoration影响。

DrilgrassWheelList ← Container ← DecoratedBox ← Container ← _RawMouseRegion ← MouseRegion ← Listener ← Listener ← _GestureSemantics ← RawGestureDetector ← GestureDetector ← Positioned-[GlobalObjectKey WheelListItem#705e9] ←

在上述案例中，我们通过打印Widget路径，很清晰地知道组件的层级关系。

关键代码如下

DebugCreator(context as Element).toString()

/// A wrapper class for the [Element] that is the creator of a [RenderObject].
///
/// Setting a [DebugCreator] as [RenderObject.debugCreator] will lead to better
/// error messages.
class DebugCreator {
  /// Create a [DebugCreator] instance with input [Element].
  DebugCreator(this.element);

  /// The creator of the [RenderObject].
  final Element element;

  @override
  String toString() => element.debugGetCreatorChain(12);
}

默认这个方法会返回12层的结构。