What is Flutter web?

Learn the canvas and HTML renderers of Flutter web.

What is Flutter web?

flutter_web runs a Flutter app in the browser. There are two renderer options: canvas (CanvasKit, high performance) and html (DOM, small size). The wasm renderer is the next-generation option.

// Run
flutter run -d chrome --web-renderer canvas

canvas vs html

The canvas renderer (CanvasKit) uses WebGL; it is high-performance and visually identical to mobile. The html renderer uses DOM elements; it has a smaller initial size but some visual differences.

Exercise Renderer list

In main, define the list ['canvas', 'html', 'wasm']. Print the first element with print.

Show example solution

void main() {
  final renderers = ['canvas', 'html', 'wasm'];
  print(renderers.first);
}

Test yourself

Which two renderers can Flutter web run with?
- Skia and OpenGL
- canvas and html
- iOS and Android
- Vulkan and Metal
Show answer

canvas and html — Flutter web runs with the canvas (CanvasKit) and html renderers; iOS/Android are mobile, Vulkan/Metal are graphics APIs, and Skia/OpenGL are internal graphics engines.

Select canvas renderer

flutter run -d chrome --web-renderer ____

Show answer

flutter run -d chrome --web-renderer canvas

Flutter web renderer matches

flutter_web

Web platform
canvas

CanvasKit renderer
html

DOM renderer
wasm

Next-gen renderer

Next lesson: flutter build web

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies