What is Flutter and how does it render UI?

Flutter is a UI framework plus a rendering engine. You write Dart widgets, Flutter compiles ahead of time to native machine code, and the engine draws the interface itself instead of mapping widgets to platform view objects. That is why a Flutter screen looks and behaves the same on iOS and Android.

• One Dart codebase targets Android, iOS, web, macOS, Windows and Linux
• Widgets are immutable descriptions; the element and render trees hold live state and layout
• The engine uses Impeller on iOS and Android, with Skia still relevant on some targets
• Platform integrations such as camera or Bluetooth come through plugins and channels

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('VocalHyre')),
        body: const Center(child: Text('Hello Flutter')),
      ),
    );
  }
}

What the engine actually does

The framework turns widgets into elements, then into render objects. Render objects receive constraints, choose a size, and paint into layers. The engine composites those layers on the GPU. Dart runs on the UI thread, so expensive synchronous work there delays layout and paint.