๐ Rendering Pipeline (Chi tiแบฟt)
Bร i viแบฟt nร y ฤi sรขu vร o tแปซng giai ฤoแบกn cแปงa Rendering Pipeline trong Flutter - quy trรฌnh chuyแปn ฤแปi widgets thร nh pixels hiแปn thแป trรชn mร n hรฌnh.
1. Tแปng quan Pipeline
Phแบงn tiรชu ฤแป โ1. Tแปng quan PipelineโFlutter rendering pipeline bao gแปm 7 giai ฤoแบกn chรญnh, thแปฑc hiแปn tuแบงn tแปฑ trong mแปi frame:
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ FLUTTER RENDERING PIPELINE โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ โโโโโโโโโโโโ โโโโโโโโโโโโโ โโโโโโโโโ โโโโโโโโโโ โโโโโโโโโ โโ โ User โ โAnimation โ โ Build โ โ Layout โ โ Paint โ โโ โ Input โโโโถโ Tick โโโโถโ Phase โโโโถโ Phase โโโโถโ Phase โโโโถ โโ โโโโโโโโโโโโ โโโโโโโโโโโโโ โโโโโโโโโ โโโโโโโโโโ โโโโโโโโโ โโ โโ โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ โโ โโโถ โ Compositing โโโโถโ Rasterize โโโโถ GPU โโโถ Display โโ โ Phase โ โ Phase โ โโ โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ โโ โโ โโโโโโโโโโโโโโโโโโโ Dart Framework โโโโโโโโโโโโโโโโโโโถโโโโ Engine/GPU โโโถ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโThแปi gian mแปฅc tiรชu:
- 60 FPS: 16.67ms per frame
- 120 FPS: 8.33ms per frame
Nแบฟu pipeline mแบฅt quรก lรขu โ frame drop โ jank.
2. User Input Phase
Phแบงn tiรชu ฤแป โ2. User Input Phaseโ2.1 Luแปng xแปญ lรฝ
Phแบงn tiรชu ฤแป โ2.1 Luแปng xแปญ lรฝโKhi ngฦฐแปi dรนng tฦฐฦกng tรกc (chแบกm, vuแปt, gรต), hแป ฤiแปu hร nh gแปญi raw events ฤแบฟn Flutter Engine thรดng qua Platform Embedder.
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ USER INPUT FLOW โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ โโโโโโโโโโโโโโโโโ โโ โ Hardware โ โโ โ (Touchscreen) โ โโ โโโโโโโโโฌโโโโโโโโ โโ โ Raw touch data (x, y, pressure, timestamp) โโ โผ โโ โโโโโโโโโโโโโโโโโ โโ โ OS Layer โ โโ โ (Android/iOS) โ โโ โโโโโโโโโฌโโโโโโโโ โโ โ MotionEvent / UITouch โโ โผ โโ โโโโโโโโโโโโโโโโโ โโ โ Platform โ โโ โ Embedder โ โโ โโโโโโโโโฌโโโโโโโโ โโ โ flutter::PointerDataPacket โโ โผ โโ โโโโโโโโโโโโโโโโโ โโ โ Flutter Engineโ โโ โ (dart:ui) โ โโ โโโโโโโโโฌโโโโโโโโ โโ โ PointerEvent (Dart object) โโ โผ โโ โโโโโโโโโโโโโโโโโ โโ โ Gesture โ โโ โ Recognition โ โ GestureDetector, Listener, etc. โโ โโโโโโโโโฌโโโโโโโโ โโ โ onTap, onPan, onDrag, etc. โโ โผ โโ โโโโโโโโโโโโโโโโโ โโ โ setState() โ โ Trigger rebuild โโ โโโโโโโโโโโโโโโโโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ2.2 Hit Testing
Phแบงn tiรชu ฤแป โ2.2 Hit TestingโFlutter thแปฑc hiแปn hit testing ฤแป xรกc ฤแปnh widget nร o nhแบญn event:
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ HIT TESTING โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Tap at (150, 200) โโ โ โโ โผ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ RenderView โ โ Bแบฏt ฤแบงu tแปซ root โโ โ hitTest(result, position) โ โโ โโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโ โโ โ โโ โผ (150, 200) cรณ trong bounds? โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ RenderPositionedBox โ โโ โ hitTestChildren โ hitTestSelf โ โโ โโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโ โโ โ โโ โผ Tiแบฟp tแปฅc ฤแป quy โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ RenderFlex โ โโ โโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโ โโ โ โโ โผ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ RenderDecoratedBox (Button) โ โ HIT! Thรชm vร o HitTestResult โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโ Kแบฟt quแบฃ: HitTestResult chแปฉa danh sรกch RenderObjects โโ theo thแปฉ tแปฑ tแปซ innermost โ outermost โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ3. Animation Phase
Phแบงn tiรชu ฤแป โ3. Animation Phaseโ3.1 Vsync vร SchedulerBinding
Phแบงn tiรชu ฤแป โ3.1 Vsync vร SchedulerBindingโAnimations ฤฦฐแปฃc driven bแปi vsync signal tแปซ display:
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ ANIMATION TICK โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Display Hardware โโ โ โโ โ VSync signal (every 16.67ms @ 60Hz) โโ โผ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ SchedulerBinding โ โโ โ handleBeginFrame(timestamp) โ โโ โโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโ โโ โ โโ โผ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ Transient Callbacks โ โ Ticker.tick() โโ โ (Animation frame callbacks) โ โโ โโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโ โโ โ โโ Cho mแปi AnimationController ฤang active: โโ โ โโ โผ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ Calculate new animation value โ โโ โ based on: โ โโ โ โข elapsed time โ โโ โ โข duration โ โโ โ โข curve (easing function) โ โโ โโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโ โโ โ โโ โผ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ Notify listeners โ โโ โ โ AnimatedBuilder.build() โ โโ โ โ setState() in some cases โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ3.2 Curves vร Interpolation
Phแบงn tiรชu ฤแป โ3.2 Curves vร Interpolationโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ ANIMATION VALUE CALCULATION โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ t = elapsedTime / totalDuration (0.0 โ 1.0) โโ โโ Linear: value = t โโ โโ EaseIn: value = tยฒ โโ โโ EaseOut: value = 1 - (1-t)ยฒ โโ โโ EaseInOut: value = t < 0.5 ? 2tยฒ : 1 - (-2t+2)ยฒ/2 โโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ โ โโ โ 1.0 โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โโ โ โ โ
โ โ EaseOut โโ โ โ โ
โ โโ โ โ โ
โ โโ โ 0.5 โ โ
โ โโ โ โ โ
โ โโ โ โ โ
โ โโ โ โ โ
โ โโ โ 0.0 โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โ 0.0 1.0 โ โโ โ t โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโ Tween interpolation: โโ finalValue = begin + (end - begin) * curvedValue โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ4. Build Phase - Chi tiแบฟt
Phแบงn tiรชu ฤแป โ4. Build Phase - Chi tiแบฟtโ4.1 Khi nร o Build ฤฦฐแปฃc trigger?
Phแบงn tiรชu ฤแป โ4.1 Khi nร o Build ฤฦฐแปฃc trigger?โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ BUILD TRIGGERS โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ StatefulWidget: โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ โ โโ โ 1. setState() called โ โโ โ โโโ Element ฤฦฐแปฃc ฤรกnh dแบฅu dirty โ โโ โ โโโ Scheduled trong next frame โ โโ โ โ โโ โ 2. didUpdateWidget() - parent rebuild vแปi config mแปi โ โโ โ โ โโ โ 3. didChangeDependencies() - InheritedWidget thay ฤแปi โ โโ โ โ โโ โ 4. Widget ฤฦฐแปฃc reinsert sau khi deactivate โ โโ โ โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโ StatelessWidget: โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ โ โโ โ 1. Lแบงn ฤแบงu insert vร o tree โ โโ โ โ โโ โ 2. Parent rebuild vร tแบกo widget mแปi vแปi config khรกc โ โโ โ (canUpdate() returns false โ tแบกo Element mแปi) โ โโ โ โ โโ โ 3. InheritedWidget dependency thay ฤแปi โ โโ โ โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ4.2 Dirty Elements vร BuildOwner
Phแบงn tiรชu ฤแป โ4.2 Dirty Elements vร BuildOwnerโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ BUILD OWNER MECHANISM โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Khi setState() ฤฦฐแปฃc gแปi: โโ โโ 1. Element.markNeedsBuild() โโ โ โโ โผ โโ 2. BuildOwner.scheduleBuildFor(element) โโ โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ โ _dirtyElements List โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โโ โ โ [Element A, Element C, Element G, ...] โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ โโ โผ โโ 3. SchedulerBinding.ensureVisualUpdate() โโ โโโ Request new frame nแบฟu chฦฐa scheduled โโ โโ Trong frame tiแบฟp theo: โโ โโ 4. BuildOwner.buildScope() โโ โ โโ โ Sort _dirtyElements theo DEPTH (shallow โ deep) โโ โ โโ โ Tแบกi sao sort theo depth? โโ โ โ Parent build trฦฐแปc cรณ thแป thay ฤแปi children โโ โ โ Trรกnh build child 2 lแบงn โโ โ โโ โผ โโ 5. Lแบทp qua tแปซng dirty element: โโ โ โโ โ for element in _dirtyElements: โโ โ if element.dirty: โโ โ element.rebuild() โโ โ โโ โผ โโ 6. Clear _dirtyElements โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ4.3 Widget โ Element Reconciliation
Phแบงn tiรชu ฤแป โ4.3 Widget โ Element Reconciliationโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ ELEMENT RECONCILIATION โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Khi element.rebuild() ฤฦฐแปฃc gแปi: โโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ 1. Gแปi widget.build(context) โ newWidget โ โโ โ โ โโ โ 2. So sรกnh oldWidget vs newWidget โ โโ โ โ โโ โ Widget.canUpdate(oldWidget, newWidget): โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โ โ return oldWidget.runtimeType == newWidget.runtimeType โ โ โโ โ โ && oldWidget.key == newWidget.key; โ โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โ โ โโ โ 3. Nแบฟu canUpdate == true: โ โโ โ โโโ Reuse existing Element โ โโ โ โโโ element.update(newWidget) โ โโ โ โโโ ฤแป quy xuแปng children โ โโ โ โ โโ โ 4. Nแบฟu canUpdate == false: โ โโ โ โโโ Deactivate old Element โ โโ โ โโโ Create new Element tแปซ newWidget โ โโ โ โโโ Mount new Element โ โโ โ โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโ Vรญ dแปฅ: โโ โโ Old: Container(color: red) New: Container(color: blue) โโ โ โ โโ โโโ Same type, same key (null) โ โโ โโโ canUpdate = TRUE โโโโโโโโโโโ โโ โโโ Element REUSED, chแป update color property โโ โโ Old: Container(...) New: Text('...') โโ โ โ โโ โโโ Different type โโโโโโโโโโโโโ โโ โโโ canUpdate = FALSE โโ โโโ Old Element DESTROYED, new Element CREATED โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ4.4 Widget Explosion
Phแบงn tiรชu ฤแป โ4.4 Widget ExplosionโMแปt ฤiแปu quan trแปng: code bแบกn viแบฟt khรดng phแบฃi widget tree thแบญt!
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ WIDGET EXPANSION โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Code bแบกn viแบฟt: โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ Container( โ โโ โ color: Colors.blue, โ โโ โ child: Text('Hello'), โ โโ โ ) โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโ Widget tree thแปฑc tแบฟ sau khi build(): โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ Container โ โโ โ โโโ Align (nแบฟu cรณ alignment) โ โโ โ โโโ Padding (nแบฟu cรณ padding) โ โโ โ โโโ DecoratedBox (nแบฟu cรณ decoration) โ โโ โ โโโ ColoredBox (color != null) โ โโ โ โโโ ConstrainedBox (nแบฟu cรณ constraints) โ โโ โ โโโ Text โ โโ โ โโโ RichText โ โโ โ โโโ ... (more) โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโ โ Dev Tools sแบฝ hiแปn thแป tree sรขu hฦกn code bแบกn viแบฟt โโ โ ฤรขy lร normal behavior, khรดng phแบฃi bug โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ5. Layout Phase - Chi tiแบฟt
Phแบงn tiรชu ฤแป โ5. Layout Phase - Chi tiแบฟtโ5.1 Constraints Protocol
Phแบงn tiรชu ฤแป โ5.1 Constraints Protocolโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ LAYOUT PROTOCOL โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ "Constraints go down. Sizes go up. Parent sets position." โโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ PARENT โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โ โ 1. Gแปi child.layout(constraints, parentUsesSize: true) โ โ โโ โ โ Constraints: minW=0, maxW=300, minH=0, maxH=โ โ โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โ โ โ โโ โ โผ constraints ฤi XUแปNG โ โโ โ โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โ โ CHILD โ โ โโ โ โ 2. Nhแบญn constraints โ โ โโ โ โ 3. Tรญnh toรกn size cแปงa mรฌnh (phแบฃi trong constraints) โ โ โโ โ โ 4. Layout children cแปงa mรฌnh (ฤแป quy) โ โ โโ โ โ 5. Set size = Size(200, 100) โ โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โ โ โ โโ โ โผ size ฤi LรN โ โโ โ โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โ โ 6. Parent nhแบญn size cแปงa child โ โ โโ โ โ 7. Parent set position cho child (offset) โ โ โโ โ โ child.parentData.offset = Offset(50, 50) โ โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ5.2 BoxConstraints Chi tiแบฟt
Phแบงn tiรชu ฤแป โ5.2 BoxConstraints Chi tiแบฟtโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ BOX CONSTRAINTS โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ BoxConstraints { โโ double minWidth; โโ double maxWidth; โโ double minHeight; โโ double maxHeight; โโ } โโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ CONSTRAINT TYPES โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โโ โ โ โโ โ TIGHT (min == max) โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โ โ BoxConstraints.tight(Size(100, 100)) โ โ โโ โ โ โ minW=100, maxW=100, minH=100, maxH=100 โ โ โโ โ โ โ Child PHแบขI cรณ size 100x100 โ โ โโ โ โ โ Vรญ dแปฅ: SizedBox(width: 100, height: 100, child: ...) โ โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โ โ โโ โ LOOSE (min == 0) โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โ โ BoxConstraints.loose(Size(100, 100)) โ โ โโ โ โ โ minW=0, maxW=100, minH=0, maxH=100 โ โ โโ โ โ โ Child cรณ thแป tแปซ 0 ฤแบฟn 100 โ โ โโ โ โ โ Vรญ dแปฅ: Center loosens constraints cho child โ โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โ โ โโ โ UNBOUNDED (max == infinity) โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โ โ BoxConstraints(minW: 0, maxW: โ, minH: 0, maxH: โ) โ โ โโ โ โ โ Khรดng giแปi hแบกn โ โ โโ โ โ โ Vรญ dแปฅ: Trong ListView, height lร unbounded โ โ โโ โ โ โ โ ๏ธ Gรขy lแปi nแบฟu child muแปn expand! โ โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโ โ โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ5.3 Layout Complexity: O(n)
Phแบงn tiรชu ฤแป โ5.3 Layout Complexity: O(n)โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ LINEAR TIME LAYOUT โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Flutter layout ฤแบกt O(n) time complexity nhแป: โโ โโ 1. SINGLE PASS - Mแปi node ฤฦฐแปฃc visit tแปi ฤa 2 lแบงn: โโ โข Lแบงn 1: Nhแบญn constraints, tรญnh size โโ โข (Khรดng cรณ lแบงn quay lแบกi ฤแป "thฦฐฦกng lฦฐแปฃng") โโ โโ 2. CONSTRAINTS Lร FINAL: โโ โข Parent pass constraints โ Child PHแบขI tuรขn thแปง โโ โข Child khรดng thแป yรชu cแบงu parent thay ฤแปi constraints โโ โโ 3. SUBTREE ISOLATION: โโ โข Child chแป biแบฟt constraints cแปงa mรฌnh โโ โข Khรดng thแป nhรฌn siblings hoแบทc parent's size โโ โโ Trade-off: โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ [-] Khรดng thแป: "Lร m tรดi to bแบฑng sibling lแปn nhแบฅt" โ โโ โ [-] Cแบงn IntrinsicHeight/Width cho mแปt sแป cases (tแปn performance) โ โโ โ โ โโ โ [+] Layout cแปฑc nhanh โ โโ โ [+] Predictable โ โโ โ [+] Khรดng infinite loops โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ5.4 relayoutBoundary
Phแบงn tiรชu ฤแป โ5.4 relayoutBoundaryโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ RELAYOUT BOUNDARY โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Khi RenderObject thay ฤแปi size, parent cแบงn re-layout. โโ Nhฦฐng propagation cรณ thแป dแปซng lแบกi tแบกi RELAYOUT BOUNDARY. โโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ โ โโ โ RenderObject A โ โโ โ โ โ โโ โ โผ โ โโ โ RenderObject B โ relayoutBoundary = true โ โโ โ โ (constraints lร TIGHT, size cแป ฤแปnh) โ โโ โ โผ โ โโ โ RenderObject C โ thay ฤแปi size โ โโ โ โ โโ โ Khi C thay ฤแปi: โ โโ โ โข C.markNeedsLayout() โ โโ โ โข Propagate lรชn... vร DแปชNG tแบกi B (boundary) โ โโ โ โข A KHรNG bแป re-layout โ โโ โ โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโ relayoutBoundary = true khi: โโ โข constraints.isTight (min == max cho cแบฃ w vร h) โโ โข sizedByParent = true โโ โข parentUsesSize = false โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ6. Paint Phase - Chi tiแบฟt
Phแบงn tiรชu ฤแป โ6. Paint Phase - Chi tiแบฟtโ6.1 Paint Method
Phแบงn tiรชu ฤแป โ6.1 Paint Methodโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ PAINT PHASE โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Mแปi RenderObject cรณ method paint(): โโ โโ void paint(PaintingContext context, Offset offset) { โโ // 1. Vแบฝ background โโ context.canvas.drawRect( โโ Rect.fromLTWH(offset.dx, offset.dy, size.width, size.height), โโ Paint()..color = Colors.blue, โโ ); โโ โโ // 2. Vแบฝ children โโ context.paintChild(child, offset + Offset(10, 10)); โโ โโ // 3. Vแบฝ foreground decorations โโ context.canvas.drawLine(...); โโ } โโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ PaintingContext cung cแบฅp: โ โโ โ โข canvas: ฤแป vแบฝ trแปฑc tiแบฟp โ โโ โ โข paintChild(): ฤแป vแบฝ child vแปi compositing โ โโ โ โข pushLayer(): ฤแป tแบกo layer mแปi โ โโ โ โข pushClipRect(): clip region โ โโ โ โข pushOpacity(): apply opacity โ โโ โ โข pushTransform(): apply transform โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ6.2 repaintBoundary
Phแบงn tiรชu ฤแป โ6.2 repaintBoundaryโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ REPAINT BOUNDARY โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Khi RenderObject cแบงn repaint, thรดng thฦฐแปng cแบฃ subtree cแปงa parent โโ cลฉng phแบฃi repaint. repaintBoundary giแปi hแบกn ฤiแปu nร y. โโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ โ โโ โ KHรNG cรณ RepaintBoundary: Cร RepaintBoundary: โ โโ โ โ โโ โ Parent Parent โ โโ โ โ โ โ โโ โ โโโโโดโโโโ โโโโโดโโโโ โ โโ โ โ โ โ โ โ โโ โ Child A Child B โ repaint Child A RepaintBoundary โ โโ โ โ โ โโ โ โ Cแบฃ Parent phแบฃi repaint! Child B โ repaint โ โโ โ โ โโ โ โ Chแป Child B repaint โ โโ โ โ Parent dรนng cached layer โ โโ โ โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโ Dรนng RepaintBoundary widget: โโ โข Animations thฦฐแปng xuyรชn โโ โข Scrolling content โโ โข Video playback โโ โข Spinning loaders โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ7. Compositing Phase
Phแบงn tiรชu ฤแป โ7. Compositing Phaseโ7.1 Layer Tree
Phแบงn tiรชu ฤแป โ7.1 Layer Treeโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ LAYER TREE โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Paint phase tแบกo ra LAYER TREE song song vแปi Render Tree: โโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ โ โโ โ TransformLayer (root) โ โโ โ โ โ โโ โ โโโ OffsetLayer (main content) โ โโ โ โ โ โ โโ โ โ โโโ PictureLayer (static background) โ โโ โ โ โ โ โโ โ โ โโโ PictureLayer (text, icons) โ โโ โ โ โ โโ โ โโโ OpacityLayer (fading element) โ โโ โ โ โ โ โโ โ โ โโโ PictureLayer โ โโ โ โ โ โโ โ โโโ ClipRectLayer (clipped area) โ โโ โ โ โ โโ โ โโโ PictureLayer (scrollable content) โ โโ โ โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโ Layer types: โโ โข PictureLayer: Chแปฉa drawing commands โโ โข ContainerLayer: Chแปฉa child layers โโ โข TransformLayer: Apply matrix transform โโ โข OpacityLayer: Apply opacity โโ โข ClipRectLayer, ClipRRectLayer, ClipPathLayer: Clipping โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ7.2 Scene Building
Phแบงn tiรชu ฤแป โ7.2 Scene Buildingโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ SCENE BUILDING โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ RenderView.compositeFrame() ฤฦฐแปฃc gแปi khi platform yรชu cแบงu frame mแปi: โโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ โ โโ โ 1. Tแบกo SceneBuilder โ โโ โ final builder = SceneBuilder(); โ โโ โ โ โโ โ 2. Layer tree add vร o builder โ โโ โ layer.addToScene(builder); โ โโ โ โ โโ โ builder.pushTransform(...) โ โโ โ builder.pushOffset(...) โ โโ โ builder.addPicture(...) โ โโ โ builder.pop() โ โโ โ ... โ โโ โ โ โโ โ 3. Build Scene โ โโ โ final scene = builder.build(); โ โโ โ โ โโ โ 4. Gแปญi ฤแบฟn Engine โ โโ โ window.render(scene); โ โโ โ โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโ Scene lร mแปt opaque object chแปฉa tแบฅt cแบฃ instructions ฤแป render UI โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ8. Rasterization Phase
Phแบงn tiรชu ฤแป โ8. Rasterization Phaseโ8.1 GPU Rendering
Phแบงn tiรชu ฤแป โ8.1 GPU Renderingโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ RASTERIZATION โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Scene ฤฦฐแปฃc chuyแปn tแปซ Dart Framework โ Flutter Engine โ GPU: โโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ โ โโ โ Dart (UI Thread) โ โโ โ โ โ โโ โ โ window.render(scene) โ โโ โ โผ โ โโ โ Flutter Engine โ โโ โ โ โ โโ โ โ Scene โ Display List โ โโ โ โผ โ โโ โ Raster Thread โ โโ โ โ โ โโ โ โ Impeller/Skia processes display list โ โโ โ โ Creates GPU commands โ โโ โ โผ โ โโ โ GPU โ โโ โ โ โ โโ โ โ Execute shaders โ โโ โ โ Rasterize to framebuffer โ โโ โ โผ โ โโ โ Display Hardware โ โโ โ โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโ UI Thread vร Raster Thread chแบกy SONG SONG: โโ โข UI Thread chuแบฉn bแป frame N+1 โโ โข Raster Thread render frame N โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ9. Performance Considerations
Phแบงn tiรชu ฤแป โ9. Performance Considerationsโ9.1 Pipeline Jank Points
Phแบงn tiรชu ฤแป โ9.1 Pipeline Jank Pointsโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ COMMON JANK CAUSES โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ BUILD PHASE: โโ โข Quรก nhiแปu widgets rebuild khรดng cแบงn thiแบฟt โโ โข build() method phแปฉc tแบกp, tแปn thแปi gian โโ โข Khรดng dรนng const widgets โโ โโ LAYOUT PHASE: โโ โข IntrinsicHeight/Width (O(nยฒ) thay vรฌ O(n)) โโ โข Layout triggers tแปซ deep in tree propagate lรชn root โโ โโ PAINT PHASE: โโ โข Khรดng cรณ RepaintBoundary cho animations โโ โข saveLayer() unnecessary (opacity, clip) โโ โโ RASTERIZATION: โโ โข Shader compilation (Skia) - lแบงn ฤแบงu gแบทp effect mแปi โโ โข Too many layers โโ โข Large images โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ9.2 Optimization Strategies
Phแบงn tiรชu ฤแป โ9.2 Optimization Strategiesโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ OPTIMIZATION STRATEGIES โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ 1. MINIMIZE REBUILDS: โโ โข Sแปญ dแปฅng const constructors โโ โข Tรกch widgets nhแป vแปi state riรชng โโ โข Dรนng Provider/Riverpod select() ฤแป chแป listen cแบงn thiแบฟt โโ โโ 2. OPTIMIZE LAYOUT: โโ โข Trรกnh IntrinsicHeight/Width โโ โข Sแปญ dแปฅng ListView.builder thay vรฌ ListView vแปi children โโ โข Sแปญ dแปฅng const SizedBox thay vรฌ Container trแปng โโ โโ 3. OPTIMIZE PAINT: โโ โข Wrap animations trong RepaintBoundary โโ โข Trรกnh Opacity widget cho complex trees (dรนng AnimatedOpacity) โโ โข Cache images vแปi precacheImage() โโ โโ 4. DEBUG TOOLS: โโ โข flutter run --profile โโ โข DevTools โ Performance tab โโ โข debugPaintSizeEnabled = true โโ โข debugRepaintRainbowEnabled = true โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ๐ Tรณm tแบฏt
Phแบงn tiรชu ฤแป โ๐ Tรณm tแบฏtโ| Phase | Input | Output | Thread |
|---|---|---|---|
| User Input | Raw events | Gesture callbacks | UI |
| Animation | VSync signal | Updated values | UI |
| Build | Dirty elements | Widget/Element trees | UI |
| Layout | Constraints | Sizes, positions | UI |
| Paint | Render tree | Layer tree | UI |
| Compositing | Layer tree | Scene | UI |
| Rasterization | Scene | Pixels | Raster |
ฤiแปm quan trแปng:
- Pipeline chแบกy mแปi frame (16.67ms @ 60fps)
- Build/Layout/Paint trรชn UI Thread - khรดng block!
- Rasterization trรชn Raster Thread - parallel
- Tแปi ฦฐu: const widgets, RepaintBoundary, relayout boundary