Cross-platform development has been the trend over the last few years. With the amazing advantages that it offers, no doubt the developer community is enthusiastic about cross-platform. Google dived into this market with its up and coming UI framework - Flutter
But, wouldn’t life be easier if this “cross-platform” support got extended to Web as well? Flutter’s solution to this is Flutter for Web
Introduction: the whats and the whys
Flutter is a Google UI library designed to help developers create native, performant, and appealing mobile apps. Flutter’s ambition, however, is to create user interfaces for every screen, not just for mobile apps.
Flutter’s web support provides the same mobile and web experiences. You can now create apps for web in addition to iOS and Android, thanks to the mobility of Dart, the power of the web platform, and the flexibility of the Flutter framework. Because it is the same Flutter framework and the web is merely another device target for your project, you can compile pre-existing Flutter code written in Dart into a web experience.
Here, we will analyze the current state of Flutter web (competing with SPA frameworks such as React, Angular, and Vue), the desktop (competing with Electron and Qt), and hopefully embedded devices and more in the future with a little extra effort.
But..how does it work?
Flutter (Mobile) has its own rendering engine, Skia, which offers the Software Development Kit (SDK) complete control over every pixel of the screen, with precision and speed.
Flutter Web (FW) builds its HTML components and uses the entire screen as a canvas, allowing it complete control over every pixel. This is created using HTML/CSS and Javascript, which are both mainstream web technologies. As a result, you can use all of Flutter’s capabilities, such as animations and routing, without writing any additional source code.
Adding web compatibility to Flutter included building Flutter’s fundamental graphics layer on top of conventional browser APIs and compiling Dart to JavaScript rather than the ARM machine code used in mobile apps. Flutter may provide a portable, high-quality, and performant user experience across modern browsers by combining DOM, Canvas, and WebAssembly.
Specifics that matter: Pros and Cons
Okay, so Is this just another framework trying to bring down the Reacts and Angulars of the web market? Well, yes and no. Let’s have a look at what Flutter Web brings to the table and touch upon the downside of the same.
Pros:
1. Access to essentially the same widgets that are available for Flutter for mobile.
2. Pretty much all of the existing famous libraries that work on mobile are also available for the web.
60.04% packages of pub.dev are web-compatible
3. Significant reduction in the code development time inclusive of all three platforms.
4. Customization: it also offers you the option to develop a customized version for the web depending on the core OS of the system — just like it does for Android and iOS.
Okay, does this mean that Flutter Web, with its shiny advantages, is theideal tool to build cross-platform apps, including apps for the web?
Not entirely, Flutter web also comes with some severe drawbacks:
- The most important thing holding it back is its SEO capabilities. Flutter Web is not SEO-friendly.
- No ability to modify generated HTML, CSS, and JavaScript code.
Flutter web is not SEO-friendly. Lack of SEO is preventing the framework from being used for large-scale business products.
Performance and Rendering:
Flutter offers you the option to choose between 2 renderers:
1. HTML Renderer
2. Canvas Kit
HTML renderer optimises download size over raw performance.
Canvaskit prioritises performance and pixel-perfect consistency while taking a hit on the download size, making your app run a bit slowly. Canvaskit renders a total file size of more than 400% than the original file size, but at the same time, increases the performance by leaps and bounds.
PS: the default renderer is the auto mode which prioritizes HTML for mobile browsers and CanvasKit for desktop browsers.
If you want to test the renderers individually:
HTML
flutter run -d chrome — web-renderer htmlCanvasKit:
flutter run -d chrome — web-renderer canvaskitThe flow: