CloudBit Blog

Flutter for Web, production ready?

Posted on May 20, 2022

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.

Need a Flutter app?