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 delve deeper into Flutter application development by building a website using this framework. In this article, we share the results of our experiment and the insights we gained.
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:
![How does Flutter Web work?](https://backend.lampa.dev/images/post/РеÑÑÑÑ 59-aa65.jpg)
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:
![Our case about building own Flutter website](https://backend.lampa.dev/images/post/ÐиагÑамма без Ð½Ð°Ð·Ð²Ð°Ð½Ð¸Ñ (1)-aad5.jpg)
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!
Need professional assistance gathering all the required artifacts to build a mobile app? Order product ideation services from Lampa!
FAQ
Why should businesses choose Flutter?
This framework is ideal for creating MVPs, SPAs, and PWAs quickly and saving money. With Flutter, you implement a common app base that you can use to deploy your app on all popular platforms.
What makes Flutter an ideal framework for building cross-platform applications?
- 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 application and widgets.
- Speed of deployment. Only the application body is developed, which is containerized for installation on target platforms.
- Versatility. All the design, functionality, and screens are created 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.
What makes Flutter not an ideal framework for creating a multi-page website?
- Multi-platform development. When creating IT solutions, you need to focus on the features of all target systems simultaneously, which creates certain inconveniences.
- Problematic use of standard functions. Native features of the OS 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 pull up images written in them.
- Poor routing. Even when you go to a certain page element, the framework draws the entire page instead of the key fragment.
Table of contents
Latest articles
Guide on Mobile App Development Process
Outsourcing in Business: Why Is It Beneficial for Companies?
How to build a healthcare app that will make your business successful
Building Your Own Food Delivery App
Mobile App vs. Mobile-Friendly Website: Which is Best for Your Brand?
3 Questions to Ask Yourself Before Developing a Mobile App
Subscribe via email and know it all first!
Explore the latest blogs on trends and technology.