What is Flutter web?
- Flutter course
- Expert
- Lesson 26/39
- 4 min
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 canvascanvas 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.
Practice Renderer list
In main, define the list ['canvas', 'html', 'wasm']. Print the first element with print.
Starter code
void main() {
// canvas, html, wasm elemanlarından oluşan renderers listesi tanımla
// ilk elemanını yazdır
}Sample solution
void main() {
final renderers = ['canvas', 'html', 'wasm'];
print(renderers.first);
}Expected output
canvas
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which two renderers can Flutter web run with?
- Skia and OpenGL
- canvas and html Correct answer
- iOS and Android
- Vulkan and Metal
Explanation: 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.
2 Select canvas renderer
flutter run -d chrome --web-renderer ____flutter run -d chrome --web-renderer canvasExplanation: The canvas renderer uses CanvasKit with WebGL; html uses DOM, wasm is a next-gen renderer, and dom is not a renderer name but a basic HTML element.
3 Flutter web renderer matches
| Term | Meaning |
|---|---|
flutter_web |
Web platform |
canvas |
CanvasKit renderer |
html |
DOM renderer |
wasm |
Next-gen renderer |