Flutter for Web in 2022: A Deep Dive
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 the ideal 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:
Initializing and running the web app
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
flutter create app_name
flutter devicesThe devices command should at least list out:
1 connected device:
Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150Then to run your app on chrome:
flutter run -d chromeTo add web support to an existing project created using a previous version of Flutter, run the following command from your project’s directory:
flutter create .Folder Structure
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.
Demo:
Here’s a comparison of what a very simple To-Do list app would look like on your phone vs on the web
Code: https://github.com/geekyprawins/Todo-List-App
Conclusion:
At its current stage, using flutter web for all of your web development needs is doubtful, but it’s useful and efficient if you want to build:
- Progressive Web Apps (PWAs) that can be integrated with a user’s already built environment.
- Organization’s internal applications like dashboards
- A web counterpart to your already existing Flutter mobile app. You can use existing logic and UI elements to output web apps faster than other web frameworks. The web version of your app doesn’t have to implement all features the mobile one does.
Flutter Web allows you to build highly performant and interactive web apps. However, it is not made for static web pages.
Flutter web is ideal for single-page interactive apps with animations and heavy UI elements. If you need SEO in your website, forget flutter web (at least in its current state)
In the case of static web pages with a lot of dense text, a more classic web development approach might bring better results, faster load times, and easier maintenance.
All in all, flutter web is a great competitor to all the frameworks present in the market. As mentioned above, it has its pros and cons, but it’s not quite at the level of becoming a standard yet.
