12 Feb 2025 Flutter Web: Is It Worth It?

Flutter is a versatile multi-platform development framework known for its performance, speed, and usability. Here at ClearPeaks we’re big fans, and we’ve covered it before in our blog, looking at themes like how to use it for powerful charts and complex and interactive animations.

It’s often considered as an option to develop mobile applications for iOS and Android, but we tend to forget that it goes way beyond that: web, desktop (Mac, Windows, Linux) and embedded systems are also a possibility. You might even find Flutter in your car’s infotainment system!

Today we’ll talk specifically about Flutter Web, its journey and its advantages, to find out if it’s a good match for you.

Technical Evolution

Flutter Web was announced at Google I/O in 2019. Since then, it has only got bigger and better, focusing on strong performance and stability. Here are the milestones:

• May 2019: Announced at Google I/O, with an early adopter program and using an HTML renderer.
• March 2021: First stable release with Flutter 2.0, including the new CanvasKit renderer option.
• May 2022: Performance improvements launched with Flutter 3.0, including image decoding and web app lifecycle management.
• Nov 2023: Wasm (WebAssembly) is added to the web roadmap, mentioned with the release of Dart 3.2.
• March 2024: Plans to deprecate the HTML renderer.
• May 2024: Better performance and reduced size for the CanvasKit renderer released with Flutter 3.10.
• May 2024: Stable version of the Wasm renderer introduced with Flutter 3.22.

As you can see, Flutter Web continues to evolve with consistent improvements, demonstrating an ongoing commitment to delivering a perfect, polished web experience.

Performance: Renderers Explained

In the previous section we referenced several renderers. This is where most of the magic happens, and your experience will depend on which one you choose. Let’s check out a brief comparison:

• HTML Renderer: Uses standard HTML, CSS and JS for rendering, offering the highest compatibility and the smallest bundle size as no additional rendering engine is required. While it was a solid starting point for Flutter Web, it has now been replaced by more advanced and reliable renderers and should not be considered as an option nowadays.
• CanvasKit Renderer: Uses Wasm and Skia, the rendering engine that Flutter uses for mobile, creating a more consistent and accurate rendering experience. It delivers a noticeable performance improvement over the HTML renderer, though at the cost of a larger bundle size. However, ongoing optimisations have refined it significantly.
• WebAssembly (Wasm) Renderer: The latest addition, recommended for applications where maintaining a smooth frame rate is essential. If you go for this option, make sure that your browser engine supports WasmGC (for example, Chromium and V8).

Usage: Widgets & Packages

One of Flutter’s standout features is their catalogue of widgets. Material Design components are always up to date and very accurate, following established guidelines. Flutter also provides iOS-style components that follow Apple’s Human Interface Guidelines, ensuring a native experience on Apple devices.

When it comes to widgets, there is no difference between mobile and web: all widgets are available across all platforms. What’s more, the web experience is finely tuned to match Flutter’s mobile capabilities. If you’ve struggled with other web frameworks like Angular or React to achieve a mobile-like experience, dealing with issues like bounce scroll physics, touch vs. mouse events (tap vs. click), or complex navigation layouts, you’ll be amazed at how Flutter simplifies this process. As an extra, it’s also compatible with Progressive Web Apps (PWAs), so you can build installable, offline-capable web apps for mobile devices.

The official Flutter package repository offers plenty of options that are cross-platform compatible, but it’s important to check whether any specific package you need lacks web compatibility. Bear in mind that for some web functionalities, the Dart team has developed JavaScript interoperability, so you can use virtually any external JavaScript library when required.

Real-World Use Cases

What better way to showcase the power of Flutter Web than by experiencing it firsthand? Here are some of our favourites:

• Material 3 demo: A great example of the widget library and how components follow the design guidelines.
• Wonderous demo: Full of complex animations. Try it in a browser that uses Chromium to see the difference in performance between the CanvasKit and the WebAssembly renderers.
• Google Earth: The UI has been revamped and developed using Flutter for iOS, Android and web.
• Google Pay: This service was also revamped to share the codebase across different platforms. Showcase available here.
• Rive: A tool to build visual animations for different mobile frameworks, web, Unity, Unreal and others. Showcase available here.

Conclusion

As we’ve seen in this article, Flutter has come a long way, from an emerging framework to a robust, multi-platform solution. And with an ambitious roadmap ahead, development shows no sign of slowing down.

If your web project is mobile-focused, Flutter Web is a game-changer you should seriously consider. Even if mobile isn’t your primary focus, give it a try and discover the boost in performance, flexibility, and user experience it delivers. Curious to learn more about Flutter Web or exploring its potential for your next project? Our ClearPeaks experts are ready to help you, from performance optimisation to full-scale development – just contact us!