VocalHyre
Sign up

Flutter · One codebase, native feel

Describe Flutter's architecture from framework to embedder.

MediumarchitectureengineembedderrenderingUpdated Oct 2026
Quiz this track

Short answer

Flutter is layered: the Dart framework provides widgets and rendering, the engine handles graphics and text, and the platform embedder hosts the engine and exposes native services.

The framework layer is written in Dart. It contains the widget, element and render layers plus Material and Cupertino libraries. Above it sits your application code. Below it sits the engine, which exposes dart:ui and handles the event loop, text shaping, rasterisation and platform channel plumbing.

  • Framework: widgets, elements, render objects, gestures, animation, Material and Cupertino
  • Engine: dart:ui bindings, text layout, compositing, Impeller or Skia rasterisation, Dart runtime
  • Embedder: Android activity or iOS view controller that starts the engine and forwards lifecycle and input events
  • Platform plugins bridge engine capabilities to device APIs
dart
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const App());
}
Binding initialisation connects the framework to the engine before plugin or async work runs.

The build, layout and paint pipeline

  • build: widgets return new widget descriptions, and elements update their children
  • layout: render objects pass constraints down and return sizes up
  • paint: render objects record drawing commands into layers
  • composite: the engine submits layers to the GPU
  • semantics: the framework exposes an accessibility tree to the platform
The UI thread and raster thread are separate. A janky frame can come from Dart work on the UI thread or from expensive raster work and shader compilation. Profiling must distinguish the two.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

  1. 1Which layer would you change to add a custom render object?
  2. 2What does the embedder do on Android and iOS?
  3. 3Why is the widget tree rebuilt while render objects are reused?
  4. 4How would you tell whether jank is on the UI thread or the raster thread?

Say it in the interview

Flutter is layered: my Dart code sits on the framework, which owns widgets, elements and render objects. The engine below it exposes dart:ui and handles text, rasterisation and the event loop. The embedder is the native host on Android or iOS that starts the engine and forwards lifecycle and input. That separation matters in profiling because UI-thread Dart work and raster-thread drawing show up as different bottlenecks.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Related questions

EasyExplain the widget tree and how it updates.MediumWhat is BuildContext and what are its pitfalls?EasyWhat is Flutter and how does it render UI?

Reading is step one

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live Flutter mock interview and get scored feedback on depth, clarity and confidence.

Start a free Flutter interviewBrowse all questions