Flutter, not yet ready for web
Tags: flutter, dart, webdev, javascript
Published: 2023-12-11 23:15:26

## Introduction
I've been developing with Dart/Flutter since its initial stable version. It's my go-to language/framework for mobile app development at work. I've also been working on web applications for years, experimenting with web apps using Dart/Flutter on side projects.

I'm a staunch supporter of Flutter. This post isn't against Flutter but rather an analysis of its current limitations, with hopes to write a post next year titled **"Flutter, the primary tool for the web"**.

## Limitations
The context was building a web app for a business (no B2C), so I won't delve into indexing issues or initial load speed. **The concern is the performance**. The problem arises when you have to write specific code for the platform, in the web case, in javascript.

## Interoperability
Unless the project is very straightforward (but then, why use something complex like Flutter? A microframework like might be better, [KISS](https://en.wikipedia.org/wiki/KISS_principle)), native code calls will be necessary. Dart offers relatively recent tools like [js](https://pub.dev/packages/js). In my case, I needed to display high-weight PDFs, even up to 40MB per page. Here, unfortunately, Dart hits its limit.

A PDF viewing engine is intricate, and reinventing the wheel is unnecessary. [pdfJs](https://mozilla.github.io/pdf.js/) is widely used and well supported for the web. It's apparent that other companies/devs have created packages to display PDFs in Flutter and essentially are native calls to pdfJs. In this case I took syncfusion as an example, [syncfusion_pdfviewer_web](https://github.com/syncfusion/flutter-widgets/blob/master/packages/syncfusion_pdfviewer_web/lib/src/pdfjs.dart).

Using this library (like others, as they'll essentially be bindings to pdfJs) is impossible for PDFs that weigh more than a total of 1MB, and even in this case, they don't perform well. The performance isn't even comparable to native. Even with a dedicated worker, the main thread freezes processing (even for a single page) of a PDF, locking the UI not for seconds, but minutes! The same PDF, in a ReactJS app using the same pdfJs library, loads almost instantly without UI freezes.

The tests were conducted on a MacBook Pro 2019 with the following specifications: 2.3 GHz Intel Core i9 8-core processor, graphics card: Intel UHD Graphics 630 1536 MB, and memory: 16 GB 2400 MHz DDR4. With Flutter, it was also impossible to conduct speed benchmarks (obviously in release mode); the only option was to open the activity monitor to forcibly terminate the web page. In any case, to easily test the performance difference, running a [Flutter example](https://github.com/syncfusion/flutter-widgets/tree/master/packages/syncfusion_flutter_pdf/example) and a [JavaScript example](https://github.com/wojtekmaj/react-pdf/tree/main/sample/vite) with a heavy PDF is sufficient.

## Conclusion
How can we predict what our app will need in the future? Can we be certain we'll never need to communicate with JS to execute computationally heavy code? **As of now**, I wouldn't suggest initiating a Flutter project for web development unless the previous questions received a fully positive response.

**Hopefully, in the future, we can write an article titled 'Flutter, the primary tool for the web.'**

## Info
Post written in December 2023 using:
- Flutter 3.16;
- JS version 0.6.7.