Divyansh Kulshreshtha

Follow

Hashtag by IECSE

--

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 - FlutterBut, 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

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.

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.

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 the ideal tool to build cross-platform apps, including apps for the web?Not entirely, Flutter web also comes with some severe drawbacks:

Flutter web is not SEO-friendly. Lack of SEO is preventing the framework from being used for large-scale business products.

Flutter offers you the option to choose between 2 renderers:1. HTML Renderer2. 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

CanvasKit:

The flow:

Steps to initialize for the web:All projects created on Flutter 2.0 and up have built-in support for flutter web.You can initialize and run your flutter web project by

The devices command should at least list out:

Then to run your app on chrome:

To add web support to an existing project created using a previous version of Flutter, run the following command from your project’s directory:

Running the flutter create . command creates a folder called — “web” and populates it with the necessary files for the app to run on the web! It’s that simple!

By the way, if you are wondering, no, you can’t edit the index.html or the rendered javascript files.

Here’s a comparison of what a very simple To-Do list app would look like on your phone vs on the web