With Flutter v3 just released, and macOS and Linux now stable how
are things looking for Flutter on the Web?
First of all, Flutter on the web can use two render engines, the
Html renderer and the CanvasKit renderer.
Html renderer uses
Canvas API, HTML elements and CSS to render the content.
CanvasKit
renderer, on the other hand brings the Skia library to the web
with the help of Web Assembly.
If you want your apps to look like they do on the mobile/desktop,
then the CanvasKit is the only option. Yes, Html renderer has
faster load time, but still has issues with text fidelity. Besides
that, it is less performant than the CanvasKit renderer, has
problems with SVG and Lottie Animations and not all Canvas API
calls work properly.
CanvasKit renderer performs better, correctly displays text, SVG and
Lottie animations, and pretty much renders the same as
mobile/desktop version of the app. It's biggest disadvantage is
that it has a larger download size and does not use native text
rendering. And this is where the problem is. Search engine bots
still can not crawl this content and index the web page properly.
But if you are considering Flutter for Web then you most likely
have a Progressive Web App or a complex Single Page App like an
admin panel, hidden behind a login screen, with content not
visible to search bots anyway.
Long story short, if your site needs SEO then Flutter for Web is
probably not the best choice.
Otherwise, where SEO is not required, Flutter can be taken into
consideration. Having a single code base for mobile, desktop and
web is a huge plus. This also means same UI experience on all
platforms. Also, with Skia library building rich UIs with complex
animations can be easier than with HTML/CSS/JavaScript.
Furthermore, games running on the web? No problem,
Flame Engine
for example can target the web platform.
Want to see the difference between the two renderers? Checkout
this demo page using
the CanvasKit renderer
and
the HTML renderer.
The performace difference is obvious, in favour of CanvasKit. If
you navigate to the Services section, you can see the text
layouting problems of the HTML renderer.