Flutter Web Rendering Complete Guide — CanvasKit vs HTML Renderer
Flutter Web supports two renderers. Understanding CanvasKit vs HTML renderer helps you pick the right one for your app.
Two Renderers
HTML Renderer
How it works: HTML / CSS / Canvas 2D API
Bundle size: Small (~1MB)
Initial load: Fast
Fidelity: May differ slightly from Flutter desktop
Best for: Text-heavy, document-style apps
CanvasKit Renderer
How it works: Skia compiled to WebAssembly
Bundle size: Large (~4MB with Skia WASM)
Initial load: Slower (WASM download required)
Fidelity: Pixel-perfect match with native
Best for: Graphics-heavy apps, games, custom drawing
Switching Renderers
# Build with HTML renderer
flutter build web --web-renderer html
# Build with CanvasKit
flutter build web --web-renderer canvaskit
# Auto (default): mobile → HTML / desktop → CanvasKit
flutter build web --web-renderer auto
# Dev server
flutter run -d chrome --web-renderer canvaskit
Checking the Active Renderer
import 'package:flutter/foundation.dart';
void checkRenderer() {
if (kIsWeb) {
debugPrint('Renderer: ${RendererBinding.instance.rendererType}');
}
}
Custom Painting
class ChartPainter extends CustomPainter {
final List<double> data;
ChartPainter(this.data);
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = const Color(0xFF4F46E5)
..strokeWidth = 2
..style = PaintingStyle.stroke;
final path = Path();
for (int i = 0; i < data.length; i++) {
final x = size.width * i / (data.length - 1);
final y = size.height * (1 - data[i]);
i == 0 ? path.moveTo(x, y) : path.lineTo(x, y);
}
canvas.drawPath(path, paint);
final fillPath = Path.from(path)
..lineTo(size.width, size.height)
..lineTo(0, size.height)
..close();
canvas.drawPath(
fillPath,
Paint()
..color = const Color(0xFF4F46E5).withOpacity(0.1)
..style = PaintingStyle.fill,
);
}
@override
bool shouldRepaint(ChartPainter old) => old.data != data;
}
Web-Specific Optimizations
import 'package:flutter/foundation.dart';
class WebOptimizedImage extends StatelessWidget {
final String url;
const WebOptimizedImage(this.url);
@override
Widget build(BuildContext context) {
if (kIsWeb) {
return Image.network(
url,
cacheWidth: 800,
loadingBuilder: (context, child, progress) {
if (progress == null) return child;
return const CircularProgressIndicator();
},
);
}
return CachedNetworkImage(imageUrl: url);
}
}
SEO with HTML Renderer
import 'package:url_strategy/url_strategy.dart';
void main() {
setPathUrlStrategy(); // Remove hash (#) from URLs
runApp(const App());
}
<!-- web/index.html -->
<meta name="description" content="AI Life Management App">
<meta property="og:title" content="Jibun AI">
<link rel="canonical" href="https://my-web-app-b67f4.web.app/">
PWA Configuration
{
"name": "Jibun AI",
"short_name": "Jibun AI",
"start_url": ".",
"display": "standalone",
"background_color": "#1e1b4b",
"theme_color": "#4f46e5",
"icons": [
{"src": "icons/Icon-192.png", "sizes": "192x192", "type": "image/png"},
{"src": "icons/Icon-512.png", "sizes": "512x512", "type": "image/png"}
]
}
Comparison Table
| HTML renderer | CanvasKit | |
|---|---|---|
| Bundle size | ~1MB | ~4MB |
| Initial load | Fast | Slower |
| Fidelity | Approximate | Pixel-perfect |
| SEO | Good | Needs work |
| Best for | Docs / LP | Graphics / Games |
Start with Auto mode and switch based on your specific requirements.
Building an AI Life Management app with Flutter × Supabase at 自分株式会社. Sharing indie dev insights every week.
SOCIAL SHARE CARD GENERATOR