According to Statista analysts, the most popular tools for creating cross-platform applications at the beginning of 2022 were React Native and Flutter, with an equal rating of 42%. These two frameworks were considered the most universal, flexible, and convenient for developing projects of varying complexity.
As an IT outsourcing company, one of the important lead generation channels for us, Lampa Software, is the corporate website. The last time we redesigned it was over 5 years ago, and in the middle of 2022, there was an urgent need for visual and technical modernization. We decided to move away from traditional JS frameworks and attempted to create the corporate website using Flutter.
Below, you will learn the story of how we tried to build a medium-sized website in Flutter, how we potentially spent no less than $45,000 on it, the difficulties we encountered, and the conclusion we reached.
We hope this experience will save time, nerves, and money for both developers and companies as a whole.
Why Flutter?
Our acquaintance with the Google framework began back in 2018. We were among the first in Ukraine to offer our clients small commercial projects on Flutter, even though the framework was not yet stable but in beta.
We should note that those first attempts were quite successful. Development on the platform had several significant advantages (and we're not just talking about budget savings). At the same time, there weren't as many unpleasant compromises (more on that later) typical of cross-platform solutions. And we have something to compare with: we've tried most mainstream "killers" of native development: PhoneGap, Cordova, Xamarin, React Native.
It is worth mentioning that at that time, Google positioned Flutter primarily as a platform for mobile development. But later, support for web and desktop apps was announced. This fact, combined with our successful previous experience and traditional inclination towards experimentation and innovation, convinced us of the feasibility of such an approach.
Furthermore, we planned to use our site as a kind of Flutter showcase for potential clients who were still wary of the new technology.
So, after brainstorming, we formed a team, and everything started rolling.
Brief Overview of the Flutter Framework: Advantages and Disadvantages
Before diving directly into the website development story, here are a few general words about Flutter itself and its technical specifications – for those who are not quite familiar with what it entails.
Flutter is a cross-platform technical solution from Google based on the Dart language. Its peculiarity lies in excellent code optimization, architecture, and interface for all types of systems, formats, and screen sizes. Moreover, the Dart programming language is considered quite convenient.
Apps built on Flutter support both ARM and x86-64 architectures and can run simultaneously on multiple key operating systems. These include Android, iOS, macOS, Linux, and even Windows. These software solutions boast good performance metrics comparable to native apps.
Among other advantages:
Streamlined code editing: During software emulation, you can adjust functions and track changes in real-time.
Design: The framework's native functionality is sufficient for creating a modern application style and widgets.
Deployment speed: The developers develop only the app body, which is containerized for installation on target platforms.
Universality: All design, functionality, and screens are created for the base platform, with further adaptation to others.
These listed features of Flutter make it one of the most promising solutions for cross-platform development. However, apart from its advantages, the framework also has a number of obvious drawbacks.
Common issues with the framework:
Cross-platform development. This is both a plus and a minus. In particular, when applying a range of IT solutions, it's necessary to consider the specifics of all target operating systems simultaneously, which sometimes creates inconveniences and code accumulation.
Poor mechanics for SEO. The inability to connect SSR (Server-Side Rendering) for optimizing site speed and content indexing settings.
Weak routing. Even in the case of web development, a website on Flutter remains essentially a mobile app. Therefore, when transitioning to it, all static content is fully loaded, even if it is not currently used.
Excessively long initial compilation of a newly created project and subsequent building of release versions for iOS and Android. Preparing the release version in large projects can take 15-40 minutes.
Sometimes painful transitions between major versions. The language and framework change actively, so there are constantly emerging features that require additional work from the developer (as in the case of the introduction of null safety).
However, let's return to the development story.
Beginning of Website Development
In our company, there is a practice that before starting any project, we always have to formulate a clear understanding of why we are doing it and what goals we aim to achieve. So, this time, we set ourselves a number of specific requirements for the result:
Update the website design.
Completely update the outdated tech stack.
Prepare and fill the website with additional sections and data for more powerful SEO.
Reorganize navigation and feedback form.
Improve website speed and performance.
Remove the russian-language version 🙂.
We formed a team to implement the planned tasks:
Two designers (main and art director)
Two Flutter developers
Backend developer
QA specialist
Project manager
Overall, the development of the first version of the corporate website on Flutter, the API, and our own CMS took approximately 3-4 months. During this time, we designed about 90% of the pages (desktop, tablet, and mobile versions) and implemented about 75% of the entire functionality of the future website.
After completing the main part of the work, we moved on to the project finalization stage. It included bug fixes, adding various "bells and whistles" in the form of cute animations, as well as performance optimization and serious work with SEO tools.
It's worth noting that in the SEO and digital marketing direction, we collaborate with an experienced agency that immediately set strict requirements for the website structure and preparation for its promotion.
At this stage, we realized that the Flutter development story was not going quite in the right direction.
Problems, Problems, and More Problems
Even in the midst of working on the project, we began to notice issues with the speed and loading of the website, especially in certain scenarios. However, initially, they manifested rather mildly. Therefore, we regarded them as temporary difficulties that occur in any experiment and that we could overcome with some effort over time.
But the deeper we delved into it, the more nuances emerged.
Problem #1: SEO
Essentially, in a project based on this framework, there is always a static page that only changes when the Flutter engine is fully loaded. Only then do all the meta tags, markup, and other indexing tools get applied, and the site becomes visible to search engine bots.
The problem is that bots usually don't wait for the full content to load, so the site cannot be properly indexed in search engines. In other words, "out of the box" SEO capabilities are simply absent.
To solve a similar problem in typical JS frameworks, SSR (server-side rendering) was invented, but Flutter does not support it. Instead, everything is based on CSR (client-side rendering).
This nuance also affects the display of previews of links to the site shared on social networks, messengers, etc. Any link to a specific page of the site will always display the same static content that was specified for the first page.
Fig. 1 - Comparison of page previews on Flutter and React.js
Problem #2: Insufficient Website Performance
Flutter is built around CSR, which means that the entire interface is always rendered on the device. This can cause the framework to burden the devices on which the program is run. While this may not be noticeable on a PC browser, it can significantly impact performance on mobile devices.
Specifically, our website was so noticeably sluggish that we didn't even need special tools to determine the level of performance.
Fig. 2 - Comparison of website performance on Flutter and React.js
The Flutter framework always loads all the content of the site instead of just the necessary page. This causes delays and significant traffic consumption when opening the site. Moreover, it does not fare well in terms of performance evaluation using tools like Google Performance Tools. In our case, the site received a proud question mark on a 100-point scale.
An interesting nuance: the loading speed varied for different screen resolutions. The best result was recorded at a resolution of 1080x1920.
Later, we found that the engine also loaded the Failing Font each time, which increased in size proportionally to the amount of static text. In our case, it ranged from 10 to 300 megabytes.
Problem #3: Low Loading Speed
During blackouts in October 2022, we tested the site using a 3G modem. Its loading took 30-40 seconds for each cycle. And this is despite the fact that the corporate site at that time consisted of relatively simple and "lightweight" elements.
Strived for SEO but Got Problems Only
As you've already understood, SEO posed the biggest questions. It's all due to the specifics of the framework engine and its handling of style sheets and content, as well as the simultaneous loading of all elements. However, optimization was one of the main triggers for the redesign. So, we couldn't just back down easily.
Facing problems with developing the website on Flutter, we turned to the Internet. We read dozens of articles and even reached out to framework developers. But they didn't provide answers to all our questions; instead, they simply acknowledged the issues and added them to the backlog.
Moreover, at one point in our search, we came across a tweet from one of the top Flutter managers (now former). They mentioned that the framework shouldn't be used for website development despite official support.
To say that we were surprised is an understatement. However, even after this, we didn't give up on trying to make the project work. Specifically, we found a partial compromise regarding SEO. We added another plugin that generated HTML markup for search engine bots so they could somehow index JavaScript / Dart content. However, we were still far from perfection.
Additionally, almost a month of performance experiments didn't yield the desired results. Due to the framework's peculiarities, we couldn't optimize the loading speed and UI rendering to a level we'd be proud of.
Despite our skills and experience with Flutter, we were unable to complete the project successfully. Therefore, we decided to abandon further experimentation with Flutter due to the uncertain outcome and the project's lengthy duration. Further investment of time was not economically feasible.
It was an unpleasant but truly necessary decision to radically change the stack and develop the website from scratch. We decided to return to JavaScript, the classic for web development, namely, to Next.js. And within just 2.5 months (from the first line of code), the site was completely finished, and it went online without any nuances or problems.
Summary
Since this was our own project and in a semi-test mode, it can technically be considered that the experiment was successful. We gained expert experience using Flutter for web development, tested its pros and cons, and reached certain logical conclusions.
However, we cannot say that this development was successful from a commercial standpoint. It was, rather, a failure. We wasted a lot of time, effort, and money and did not achieve any results.
Engineers and managers spent over 1700 work hours developing the Flutter version.
Design – 370 hours.
Flutter – 500 hours
Backend – 350 hours.
Project management – 380 hours.
QA – 160 hours.
Assuming we had hired a small service company with a team of mid-level developers charging average rates of $25–30, the project cost would have been at least $45,000.
Of course, we should note that we reused the same backend part in the development of the website on Next.js.
So, what is the conclusion, to choose or not to choose Flutter for implementing a web project? We believe that this decision is very individual. Your answer is "yes" if you are writing, for example, an admin panel for an existing app in Flutter. You can involve the same developers or even transfer a certain part of the code, which is a big plus.
Before starting any web project on Flutter, we recommend defining your final goals and tasks with a medium-term perspective. You should consider the future scale of the project, its audience, and the necessity of search engine optimization, among other things.
If your website is more complex than just an MVP or an admin panel, if it contains a large number of graphics, static images, and text, or requires SEO, do not develop it on Flutter. Instead, choose something from the time-tested JS stack – it will be the best solution, at least for now.