How Flutter Web Can Reduce the Cost of Your App Development

Piotrek Polus | 15 May | 11 min read

You come up with a product idea but you need a plan for getting it out to the world. In order to expose your service to as many users as possible, you need mobile and web apps. But your short research is brutal – although you have just one narrow idea, it requires three different apps (Android, iOS, web), three different types of specialists (Kotlin, Swift, JavaScript), and maybe even three separate vendors. 

But you’re not the first to be in this position. The creators of such applications as Airbnb, Uber Eats, and Discord also stood where you are now. They all decided to go with a cross-platform solution. And it looks like in 2020 the most important player in this discipline is Flutter.

What is Flutter?

Flutter is a Google framework that allows you to produce mobile applications for both IOS and Android using one codebase. The first stable version of Flutter was released at the end of 2018. Google created Flutter as a response to the melting budgets of mobile applications and the growing popularity of React Native, becoming its main competitor.

Flutter draws attention to Dart, an object-oriented language from Google which, according to many domain specialists, is the future of all mobile, web, and desktop development. Compared with the JavaScript that React Native uses, Dart is fully object-oriented and strongly typed. What does this mean for your business? The code delivered in Dart is much more resistant to errors and much easier to maintain, even for many years in a changing team.

Flutter for Web conquers browsers

How does all this translate to the Web? 2020 is an important year for Flutter because it brings a fresh challenge. The framework is just about to conquer larger screens and web browsers. Over the past two years, apart from Flutter, there has been a research project called Hummingbird which was supposed to generate web apps from the same Flutter code that iOS and Android apps use.

The project matured, and a year ago the core team included it in the framework, and currently (as of May 2020) it is still on the beta branch. What does this mean? Even today it is possible to build web applications using Flutter and the Google team could announce it as stable at any moment. One code, one technology, three birds with one stone. Looks like your project is a perfect fit.

A scenario for cross-platform applications is quite common. A lot of popular and well-known solutions have used this model to save time and money. Walmart, Soundcloud, and Bloomberg have decided on cross-platform mobile applications. I bet that you have at least one cross-platform application on your mobile phone. 

However, the possibility of building web apps along the way is something that opened up to us just a few months ago. Although none of the big brands have decided on this move yet, it’s clear today that soon or later it will be an excellent tool for startups and quick PoCs.

Flutter benefits for your app

Reduced development costs

Using Flutter for Web, three apps are created using one codebase, within one technologically connected team, with one pace. You don’t have to look for vendors of three different technologies and then synchronize their work. There’s no need to duplicate the same payment function or social media authorization three times.

However, this doesn’t mean that you will be able to limit the number of outlays by three times. It is often a bit more complicated to deliver a certain functionality for cross-platform. In my experience, there is something like a cross-platform multiplier factor that equals 1.2-1.5. It means if a functionality takes X hours of development for one platform, it takes (1.2-1.5) * X when it comes to cross-platform. Still, x1.5 compared to x3 could be a winning case for your budget. 

Faster app development

All the above makes flutter an excellent choice for PoC and product idea verification. Within just a few weeks you can achieve a working application that you can easily release to app stores. After potential success, you can consider rebuilding apps to native technologies. This path was followed by Airbnb. After the success of its cross-platform mobile apps, they decided to switch to native applications in 2018.

Simpler maintenance process

Also, keep in mind what will happen when your application finally suceeds. When it goes into maintenance it is much easier to maintain the app with one Dart/Flutter specialist. Your business might not be able to find tasks for three different developers full-time just by maintaining the code. Similarly, any imbalance in their skills will generate variations in the pace of work.

The skills of a development team are also important considering the shared look and feel on different platforms. Working on three projects, their final shape strongly depends on the developer’s skills and UI attitude. When the iOS guy prefers rounded corners and the Android one is not so keen on them it can turn out that these two applications will differ in how they influence the product brand.

Flutter for Web risks

Developing technology issues

Okay, but are there any risks or disadvantages associated with choosing Flutter for Web? As always, there are two sides to the story. From a technical point of view, we must remember that it’s still a beta technology. So it is not entirely stable and you may even encounter an unsolvable problem. The support of co-existing Flutter libraries is also sometimes incomplete. It’s common for a  library to work like a charm on mobile but crash on net applications because it’s not optimized for that. This is a minor issue when limited to the UI, but could be troublesome if it is your main payment service integration.

Web application exceptions

Another issue is even if the universes of Android and iOS applications are very similar and the codebase in most cases is 95-100% the same, this may not apply to the browser version. A bottom sheet drawer, bottom tab menu, or horizontal carousels are great mobile UX patterns that do not apply to the web well. Often, you need to create exceptions just for the web app. Architectural design often needs to be entirely different in mobile and web. At the very beginning of the work, it’s good to set up a roundtable discussion between designers and developers. Let them share their point of view and try to reach a consensus, especially if you care about your budget and dates.

Flutter vs React Native

But is Flutter for Web your only choice? Of course not. Its most important alternative is React Native. React Native is a competitive framework Facebook invented and supported years before Flutter. It allows you to do exactly the same thing – build all iOS, Android, and web applications (similarly to Flutter for a relatively short time).

I spent the last two years working with React Native, recently jumping into the Flutter world so I can give you some advice if you face a decision between those two. First of all, there is no single winner in this duel, both technologies are mature and both are excellent as cross-platforms. But there are a few nuances that can bring an advantage when implementing a specific project:

  • If you particularly care about gesture-related UI (swiping, dragging, pulling out drawers, etc.) then Flutter will be a better choice because of its architecture and gesture support on the native side. RN sometimes struggles to deliver good gesture + animations combo performance.
  • If the web is the key touchpoint for your business then select React Native. RN produces a browser application much closer to native developed products and you can debug it with native tools. On the other hand, Flutter for web projects don’t transpile to typical DOM and needs adapters.
  • If your application is to be maintained and developed over the years (or the team working on it may change over time) then Flutter and Dart may be a better solution.
  • If your application assumes the use of slightly more complex mechanisms (bluetooth, biometrics, geolocation) or external integrations (payments, social media), React Native has been around for longer and has a much wider spectrum of libraries around. The Flutter for Web ecosystem is growing every month but still, research of available libraries should precede every project there. 

Summing up

Never before have users been so scattered between platforms. Mobile devices and web browsers are just the tips of the iceberg. Users increasingly use applications in cars, watches and TV sets while voice assistants have also become more popular. Therefore, there is a need to simplify the process and reduce the costs of software production. One codebase for web + mobile is already a common pattern, and Flutter for Web is an awesome example.

For a long time, I considered Flutter for Web as a fledgling technology. My recent work has made me change my mind and now I stand corrected. Flutter is an adult young man standing in front of a bright future and is definitely worth considering. It seems to be an attractive choice for ideas with tiny budgets and short deadlines. It’s for those who want to verify their ideas quickly and with low expenditure, those who have an idea and are responding to the needs of the market. This is exactly the same thing that Flutter did with software development.

Sound promising?

Wondering if cross-platform development would be a good solution for your business? Click here to contact our team and get an estimate on your project in 48 hours.

Wanna know more? See our previous posts: