Build a website with Flutter carefully - How not to lose $15,000

Every day, developers worldwide use dozens of programming languages and frameworks. They are suitable for creating various kinds of software: websites, SPAs, native or multi-platform mobile apps, games, programs for Windows, Linux, macOS, etc.

Due to internal limitations, or rather, the complexity of the development process of certain functions and elements, some frameworks are better at one type of work but worse at another. This affects their overall position in the development market.

According to Statista analysts, ReactNative and Flutter were considered the most popular tools for creating multiplatform apps in early 2022, with a parity rating of 42%. These two frameworks were the most versatile and flexible, comfortable for developing projects of varying complexity.

At Lampa, we decided to test this hypothesis and started building a website with Flutter. We'll tell you how our experiment ended and what conclusions we made in this article.

What is Flutter?

Let's start with the basics: the Flutter framework is a cross-platform technical solution from Google Corporation based on the Dart language or the "JavaScript killer." Its peculiarity lies in optimizing the code, architecture, and interface for all types of systems, formats, and screen sizes. Moreover, the Dart programming language is considered to be standardized and convenient.

Apps built on Flutter support ARM and x86-64 architectures, simplifying their adaptation to key operating systems: Windows, Linux, macOS, Android, and iOS. It also enables incredible software performance comparable to native digital products. However, there is more to the list of the framework's strengths.

Additionally, there are some other benefits of Flutter over its competitors:

• Stream code editing. During software emulation, you can adjust functions and monitor changes in real-time. 

• Design. The standard functionality of the framework is enough to create a modern and elegant style for the app and widgets.

• Speed of deployment. Only the app body is developed and containerized for installation on target platforms. 

• Versatility. You create all the design, functionality, and screens for the base platform, with further adaptation to other platforms. 

• Cost. The framework is distributed free of charge, which reduces the final price of developing a digital product for the customer.

These features of Flutter make it one of the best solutions for the cross-platform development of desktop and web apps. However, in addition to its advantages, the framework has several disadvantages. They are especially evident when using Flutter to create a website. Let's take a closer look at them.

Typical problems of the framework:

• Multi-platform development. When creating IT solutions, you need to focus on the features of all target systems simultaneously, which causes certain inconveniences.

• Problematic use of standard functions. Native OS features do not always connect to the framework correctly or do not work at all due to the lack of a "bridge." 

• Poor SEO mechanics. It is almost impossible to perfectly synchronize content with HTML and CSS for correct display in Flutter and to adjust the images written in them.

• Poor routing. Even when you go to a certain page element, the framework draws the whole page instead of the key fragment.

Despite these drawbacks, the framework performs quite well when creating multi-platform apps, games, etc. However, it is not very good at web development. To explain why you shouldn't build a website with Flutter, we have prepared a detailed analysis of the mechanics and algorithms of this technical solution.

How does Flutter Web work?

In short, Flutter Web converts all the content of a ready-made app or website into standardized HTML, JS, and CSS code. In other words, the project is transformed from a multi-page system into a SPA (Single Page Application). Each page gets its own container that is loaded during navigation. This is quite convenient but sometimes very impractical, for example, when you need to conduct comprehensive SEO. 

The architecture itself looks comprehensive:

The image is taken from the official website.

The platform is designed to simplify the process of creating apps and speed up their adaptation to different operating systems. The structure of the framework offers developers excellent flexibility in creating projects:

• First, you can transform all the code into a standardized set of commands and logical blocks. 

• Next, you can work on the design and interface and specify the parameters for uploading content.

• Configure classes, dependencies, containers, etc.

• Connect third-party plugins, libraries, and functions.

• Draw visualizations, animations, and styles.

• Add a web server or web folder that will contain the content to be displayed in the app.

• Pack the app in a native container for a key OS or deploy a website for browsers.

Thanks to the stream processing of code and embedded elements, you can test the app at all stages of its creation. Even with full emulation, developers can see all changes in real-time. Moreover, you can automate about 90% of tests and checks. It is not necessary to wait for the next full-fledged iteration to start the testing cycle. This, in turn, speeds up the work on the application.

Take a look at the layout of a typical Flutter-based app:

The first three blocks, namely, Dart App, Framework, and Engine, are universal. When developing these elements, experts are not tied to the peculiarities of operating systems. They are responsible for the web app's content and its adaptation to different display formats. 

The last two elements, Embedded and Runner, are part of the app created with the platform's specifics in mind. For example, if you need two software versions for Android and iOS, the app body will be shared, but the processing algorithms on the device will be different.

This brief overview should be enough to understand how the framework works and its key features. Flutter app development allows you to implement digital apps, but there are problems with creating cross-platform websites. Therefore, we want to share our experience, which cost Lampa $15,000.

Our case about building own Flutter website

Lampa is engaged in the comprehensive development of digital solutions for key business industries. The list includes:

• mobile and web apps;

• websites and SPA;

• corporate systems;

• product and service marketplaces;

• custom projects, MVPs for startups, etc.

We use all available technologies, frameworks, and tools. We pay special attention to advanced, promising technical solutions. This is the reason why we chose Flutter to create our own website.

When we started building a website using Flutter, we had a plan:

• implement convenient navigation;

• integrate SEO;

• ensure maximum website performance.

We failed due to the framework's internal limitations. However, this experience was priceless for the company and allowed us to prepare better for the next projects.

Details:

• Development team: 

• 2 designers;

• 2 Flutter developers;

• 2 back-end experts;

• 1 project manager. 

• Implementation time: 6 months. 

• Project cost: $15,000. 

• Additional tech solutions: 

• PostgreSQL

• Node.js

• Next.js

• Express.js

• TypeORM

• Sengrid

• TypeScript 

• Outcome: replacement of the stack with a more flexible and SEO-oriented one.

Since it was our own project and also in test mode, we can assume that the experiment was a success. As a result, we discovered the disadvantages of using Flutter for web development, found new methods of solving problems, and an interesting tech stack.

Justification of the business decision to create own website with a Flutter

We've worked with Flutter before, specifically with mobile apps. As a rule, there were no problems with them. That's why we created a website with Flutter for our own use. We also liked the platform because Google constantly updates it.

In fact, we can call Lampa the pioneers of Flutter, as we were among the first to start working with it.

This framework was perfect for us for a number of reasons:

• a single website database that adapts to all platforms;

• convenient development with a minimum of optimization;

• speed and performance of Flutter;

• a system of containers for splitting pages;

• support for key functionality.

The cost of work was also a catalyst for choosing Flutter. Since the platform is not additionally licensed, its use in your own projects is completely free. However, as we later realized, this is not the best solution for creating websites, especially if you need SEO. 

Challenges we faced during the development

Flutter for web is a good way to create a PWA for an existing website, but it is not a full-fledged resource based on this framework. Unfortunately, we realized this after some time during development when the state of the project no longer allowed us to close it.

The problems with the website started right away, but their negative impact was quite mild, almost not affecting the development process. It clouded our minds, and we kept on working. However, the work stalled at some point, prompting us to look for workarounds.

Problem #1 – SEO

The framework "draws" the content independently without involving a web driver. Accordingly, it creates a canvas that contains not only content but also markup, elements, etc. The crawler bot, responsible for indexing the page content by search engines, does not understand what is happening and gives up trying to analyze the resource.

Flutter does not work with dedicated HTML tags, labels, schemas, JSON-LD, meta tags, etc., necessary for the search engine crawler to index content. However, we managed to solve this by connecting a third-party plugin.

This caused additional atypical problems, namely the absence of images written in HTML and "resetting content formatting." We could not solve them, although we probably tried all possible solutions and optimization methods.

Problem #2 – Website performance

The framework loads the entire content instead of the unnecessary element. This causes delays and significant traffic consumption to open the resource. It also does not have the best effect on performance evaluation by systems such as Google Performance Tools. In our case, the site received a question mark from the tool on a 100-point scale.

The second nuance of the Flutter engine is seen in the simultaneous loading of a large number of Java Scripts when the resource is launched. Even when using lazy loading and listview builder, the site content takes a long time to load. Moreover, these elements conflict with SEO; even the connection of columns does not save from decreased site speed. The latter, by the way, does not have the function of loading elements from memory, which also imposes certain restrictions.

The mobile version is a little better, but only visually.

Problem #3 – Navigation, routing, etc.

A Flutter-based SPA is a set of pages that are loaded when necessary. When we tried to go directly to a "remote" page in the structure (hierarchy), the framework loaded all the resource content. Accordingly, the speed of loading and rendering content was quite low. 

But we partially solved this problem by adding the appropriate functions to each screen. However, this caused other issues, such as duplicate meta tags. 

Problem #4 – Loading speed 

During the blackouts in October 2022, we tested the site using a 3G modem. That is, loading the site became a 30-40 second test for us for each cycle even though the resource consisted of simple and "light" elements.

One interesting thing: the download speed was different for several screen resolutions. The best result was recorded at FullHD. 

Later, we discovered that the engine downloads unknown fonts ranging from 10 to 300 megabytes each time. We still do not know the mystery of their origin. 

How does Flutter Web SEO optimization work?

As you can imagine, SEO was the most problematic. This is due to the specifics of the framework engine and its work with style sheets, content, and the general loading of all elements. 

As of the beginning of 2023, Flutter developers do not recommend integrating SEO into apps but rather using special pages to promote apps. So, we are waiting for the development of the framework and hope that this drawback will be leveled one day.

How we tried to solve the problems

We used all our experience and practical skills to create the website. But this was not enough to successfully close the project. Some of the problems were of a fundamental nature, related to the peculiarities of the framework. That's why we couldn't solve them.

As for SEO, we found a partial compromise by adding HTML through a third-party plugin. However, we encountered incorrect formatting and markup, incorrect display of the text structure, and the absence of images.

As for the site's performance, we could not optimize the speed of content loading and UI rendering due to the framework's structure. Fixing one problem, we created another, and so on. As a result, we stopped using Flutter for website development.

Bottom line

The negative experience of Lampa experts when trying to make a website with Flutter shows that this framework is unsuitable for some projects. Instead, it is perfect for projects where SEO is unimportant, such as mobile games, web players, SPA, PWA, etc. 

We ended our experiment by deciding to create a new version of the resource based on the latest Next.js 13. We will see what happens in the near future. In the meantime, we continue to work on developing high-quality digital products for our customers. For instance, for you!

If you want to implement an IT solution for your startup or company on time and efficiently, don't hesitate to contact our manager!