Introduction

Flutter is Google’s open-source technology for users to create web, mobile and desktop applications using a single codebase. With over 2 million users, Flutter is one of the most widely used open-source software development kits (SDK). Initially released in 2017, it gained massive popularity in Mobile application development. Flutter is yet to make significant inroads in web and desktop applications. I will particularly be focusing on Flutter Web and areas where there is room for improvement.

The main reason why people want to develop mobile apps with Flutter is that it allows you to build Android and iOS apps from a single codebase. Before Flutter, you had to hire two teams for two different projects for Android and iOS. This solution is now also available for web apps. Previously in 2017, Flutter 1 offered web support in the beta version, which required developers to write different codes for various platforms. However, Flutter 2.0 version which was released in March 2021 with a set of new features offers a similar experience on both mobile and web, allowing you also to build web applications from the same codebase besides Android and iOS. Thus, you can use all of the features of Flutter such as animations, routing without the need for separate source code. However, Flutter is not made for static web pages. It is ideal for single page interactive apps with animations and heavy UI elements. 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. Which brings me to the the areas where Flutter Web needs to work on:

Search Engine Optimization

Server side Rendering (SSR) is the ability of an application to display the web page requested by a user on the server, instead of the browser. The server then sends a fully rendered page to the user. Mobile apps are a visual interface that interacts with a backend via APIs, similarly, Flutter Web and Flutter Desktop are applications that communicate with a backend via APIs (thus SSR with Flutter isn’t possible).Since Flutter Web lacks the SSR, Search Engine Optimization (SEO) is a major issue. Websites do not display on search engines and are only interpretable by people. In order for websites to be SEO friendly, search engines should be able to search each page of the website and index the content in their database. [1]

Increased Load Size

Flutter Web uses two rendering engines: HTML or CanvasKit. HTML minimum payload is 1.8 MB. While CanvasKit offers extra features, there is one major drawback — its initial payload which can go upwards of 8MB before the user can even see the application. This causes the web initial rendering to slow down and most people won’t wait that long for the app to load. [2]

Lack of Web Support for Developers

While Flutter has many features for web development, a lack of web support features such as plug-ins, debugging and hot reload make the developer experience not so great. Hot reload is particularly helpful as it allows a developer to make changes to the code and the changes automatically apply on the web-page, without the need for restarting the application. There is also a restriction on how well Flutter APIs are supported. [3]

A good quality web application will require UI changes and preparation for more giant screens. If a mobile app uses some mobile-specific APIs like a camera or local storage, implementing these features in a web app will be a daunting task. User interfaces will need to be built responsively. That’s because mobile apps and web apps work on different screen sizes and resolutions. In some cases, the web version of a screen might need to be utterly different than the one on mobile.

Embedding Flutter Web app with another app

The only way through which an existing Flutter Web application can be merged/embedded with another app is through an iframe. This only works in some cases and does not work successfully for all websites looking to merge their web app into Flutter Web app.

Dart

Developers don’t want to learn a language that is so exclusive. Companies don’t want to invest in a niche framework when they know they won’t find any developer around to maintain it.

Besides Dart, you have Javascript. Learning Javascript opens many more doors to a developer, from React Native, to Node.js, enabling them to do everything in a community that is mature and production-ready. 

Lack of API support

There is a restriction on how well Flutter APIs are supported. Some websites show a loading indicator or splash screen when the page is loading. Due to the large size of CanvasKit and restriction on APIs, currently there is no indication of a webpage loading on Flutter, or a developer being able to give users a custom experience. [4]

Flutter builds everything into one object — one Android Activity, a single iOS View, or in case of Web — a single HTML element. Because of this, you can’t play around with the HTML/DOM freely. So if you’re looking to add a few scripts or make a few changes on top of what Flutter has built — it won’t be possible.

Difficulty building different Flavors

Flavors allow us to handle different configurations for different environments — development, staging, production — adding custom assets and settings to each version of the app. Flavors provide a convenient method of passing from the command line (IDE) to the app the environment that we are currently using, without having to change our code. Flutter Web does not support flavors that well, which means that the developer has to modify code configuration each time and change the build environment.