“Unlike React Native which translates JSX into real platform widgets (UIViews / Android Views), Flutter bypasses native widgets entirely. Flutter compiles Dart code AOT to native ARM machine code, builds a RenderObject tree, and draws every single pixel directly to a GPU surface (Metal on iOS, Vulkan on Android) using Impeller / Skia.”
Why Flutter bypasses OEM native widgets entirely to paint directly to GPU surfaces with pre-compiled shaders.
// Flutter Custom RenderObject / Impeller Canvas
class RadarPaint extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = const Color(0xFF0EA5E9)
..style = PaintingStyle.stroke
..strokeWidth = 2.0;
// Direct GPU drawing instruction (Rasterized via Impeller)
canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width * 0.4, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}Widget Tree: Declarative configuration of UI elements
Element Tree: Manages lifecycle and instantiation of widgets
RenderObject Tree: Handles sizing, layout constraints, and paint instructions
Compositing: SceneBuilder groups render layers into a GPU display list
Impeller Engine: Executes pre-compiled Metal/Vulkan shaders to rasterize pixels directly to screen buffer at 120 FPS
Impeller pre-compiles all GPU shaders Ahead-of-Time at app build time, completely eliminating the "shader compilation jank" that historically plagued first-frame animations.