Convincing your company (or client) to try Flutter

Written by wmleler1 | Published 2018/09/03
Tech Story Tags: software-development | try-flutter | react | flutter | build-native-with-flutter

TLDRvia the TL;DR App

It has been a year since I published What’s Revolutionary about Flutter (it is still a good introduction). When I wrote that article, only a small percentage of developers had heard about Flutter, and they often dismissed it because “nobody is talking about it.” They would ask (rhetorically), “Where’s the community? Where’s the buzz?”

A year later I can’t even keep up with all the articles and videos being created about Flutter by an active, vibrant, even exploding community. Developers have discovered Flutter, and they love it. Ironically, I sometimes hear devs complaining that now there is “too much hype.”

But more often, devs are telling me that their biggest problem now is convincing their company management — or if they are an agency, convincing their clients — to try Flutter. Those decision-makers are not as excited about adopting the latest technology, just for technology’s sake. They are typically smart about technology, but that is not their only concern. They want to know if using something new will help their company succeed; for example, by bringing in new customers or reducing risks.

This article is aimed at developers (who might already be experienced with Flutter) who want to convince their decision makers to let them use it in a product. Or you might be a developer who wants to decide (yourself) whether to develop a product based on Flutter. Either way, you need solid arguments, so I will try to keep this article as hype-free as possible.

I wish you luck in convincing your decision makers, but remember that most paradigms don’t shift overnight.

What is Flutter?

If you visit the main page of the Flutter website, flutter.io, you see this:

The heading is a short elevator pitch for Flutter, but what does it actually mean? Let’s break it up into four parts and discuss them one by one:

  1. Build
  2. Beautiful
  3. Native apps
  4. In record time

1. Build

Flutter is focused on building mobile apps for iOS and Android.

However, there is a larger, longer-term vision that sets Flutter apart from current mobile frameworks: Flutter is not just a framework, it is a complete SDK for building apps that interact using a screen. That means that Flutter contains everything needed to create a user interface, including the renderer and the things to be rendered (which Flutter calls widgets).

Flutter is similar to game engines such as Unity or Unreal, which also supply their own renderer and the things to be rendered (and other things). But instead of building games, Flutter builds apps.

The fact that Flutter is a complete SDK means that it can be easily ported to run on virtually any hardware that includes a display. The Flutter renderer uses Skia, a popular open-source graphics engine that is easy to use on many different devices.

While Flutter is strongly focused on mobile apps, third parties have done ports of Flutter to desktop computers (Linux, MacOS, Windows, and others), to TVs (here’s a video of Flutter running on an Nvidia Shield TV), to the Raspberry Pi, and of course Flutter is used to build user interfaces for Fuchsia.

In the future, apps won’t run only on mobile phones. It will be common to access apps across multiple devices, including interactive displays in cars, home assistants (Lenovo Smart Display, Echo Show, etc.), home appliances, wearables (watches, clothing), and other IoT devices. In 2017 there were 8.4 billion such devices online. By 2020 (only two years from now) there will be 212 billion (compared to 5 billion mobile phones). Flutter will be used to create powerful and beautiful user interfaces for many of these new devices.

And of course, Flutter is completely free and open source.

2. Beautiful

How can you help the mobile app you are creating succeed when it is competing against 3.8 million apps in Google Play and 2 million apps in the Apple App Store? Even if you manage to convince a user to download your app, there is only a 3% chance that they will be actively using it 30 days later. Gartner Inc. says that only 0.01% of all released mobile apps become a financial success. Mobile app developers need all the help they can get.

Alibaba (left) and Topline (right)

2Dimensions

Studies have shown that having an appealing design and aesthetic can be very important. If you look at the most popular mobile apps from the last few years, they each have their own aesthetic. As the saying goes, first impressions are important. In addition, beautiful apps are more likely to win awards, which will provide extra publicity. These beautiful apps attract (and keep) users through highly customized branding.

Just as important, companies want their products to look professional and attractive. They want the appearance of their mobile apps to be consistent with their company branding.

Flutter helps you say yes to your designer and build apps that attract attention. As just a few examples, the Flutter apps shown to the left include apps from Alibaba (the largest e-commerce company in the world), the Topline recording app from Abbey Road Studios, and a demo app of amazing realtime animations from 2dimensions.

You can see more Flutter apps in the Flutter showcase (and even more apps on the It’s All Widgets site). This includes the beautiful Reflectly meditation app, shown below using an animated gif, but you should install it from the app stores onto your Android or iOS phone.

3. Native apps

Mobile developers might be surprised by this. In the world of mobile apps, the term “native app” is often used to refer to an app built using the OEM tools (e.g., Xcode from Apple or Android Studio from Google). And just to make things more confusing, frameworks like React Native and Xamarin Native claim to be native because they use the OEM widgets.

Neither usage matches what the term “native” means in other areas of computing. The definition of native is:

“Designed for or built into a given system, especially denoting the language associated with a given processor, computer, or compiler, and programs written in it.”

By this definition, Flutter is native. Flutter apps are compiled to native machine (ARM) code on both iOS and Android. Flutter apps are just as native as apps built with the OEM tools. They are far more native than apps written in dynamic languages like JavaScript (e.g., using React Native, Ionic, or Cordova), which require a bridge that can cause performance issues and jank.

As for React Native and Xamarin Native, it might be better to say that they use the OEM widgets (although “React OEM” doesn’t have the same ring to it).

Other areas of computing don’t really use the term “native” as it is used in mobile. For example, if you have a Windows or MacOS computer but also boot it to a version of Linux, would you call Windows or MacOS “native” and Linux a “cross-platform solution”? Of course not. People consider Linux just as native as Windows or MacOS, because it is.

The advantages of native apps are plentiful. Native apps start up faster, often run faster, and most importantly they are smoother and less likely to suffer from jerkiness or stutter (jank is not beautiful). Native apps also give the developer more control over the appearance and behavior of their app.

Until now, in order to receive the advantages of native apps, developers were forced to build two separate apps using separate tools and languages. Often, they had to use two distinct teams of developers, one for each platform, who then had to coordinate with each other. This raised costs significantly, increased risks, and slowed the time to market. Instead, Flutter allows developers to consolidate into a single codebase, unify their development teams, reduce risk, and speed time-to-market. All while getting the benefits of a native app.

Which one is “native”? Both!

What about the OEM widgets? Regardless of the definition of native, you might be concerned that Flutter apps will look or feel uncannily different than apps developed using the OEM tools or widgets.

For comparison, to the left is the iOS Settings screen (which is about as OEM as you can get) compared to the same screen created using Flutter. Can you tell which is which?

Furthermore, screens change from version to version in iOS, including changes to the controls, icons, and even fonts. Which one of those is the real OEM screen?

The bottom line is that Flutter makes it easy to create screens that look virtually identical to the OEM screens.

This level of fidelity is possible because Flutter is a complete SDK. It renders directly to the platform canvas and doesn’t use the OEM widgets.

This means that:

  • Older releases of the OEM platform will not break your Flutter app, and new features will run just fine on older phones. There is no need for compatibility libraries.
  • New releases of the OEM platform will also never break your app, unless a change breaks something on which Flutter depends (this is extremely rare, and it will be fixed in Flutter, not in your app).
  • Your app will not look dramatically different on different phones (other than from variations in screen size), OS versions (due to changes in OEM widgets), or changes to the OS made by manufacturers or carriers (for example, changes to the default font).
  • As discussed, Flutter provides the advantages of native code, which makes your apps perform and feel like apps developed with OEM tools. In particular, there is no JavaScript bridge.
  • Most importantly, Flutter gives you, the developer, complete control over what your app looks like, down to the pixel, on all platforms and versions.

For example, here is a Flutter app that uses Material Design widgets, on a phone running Android Jelly Bean (4.1.2). This phone came out two years before Material Design was even created, so the phone has no built-in OEM widgets for Material Design at all. But your Flutter app will run the same as it does on a more modern phone, and look great.

If you are creating an app like this using the OEM tools (or using OEM widgets via React Native or Xamarin Native), think about what you would have to do to make it work at all on (potentially a variety of) older phones, especially if you have customized the look at all. With Flutter, it will just work.

4. In record time

Last, but certainly not least, Flutter lets you develop better apps faster. The most popular (and often hyped) feature of Flutter is its stateful hot reload. Not only is it amazingly fast (usually sub-second), it is stateful, which means if you change some code deep down in your app, after you recompile you don’t have to navigate back into the same place or manually recreate your state in order to see the effect of the change.

Stateful hot reload!

Flutter’s stateful hot reload — which is made possible by advanced compiler technology and the fact that Flutter is native and based on reactive views — doesn’t just speed things up, it dramatically changes the way you code. You can try out new ideas and new layouts and see what looks and feels better. You can make changes right in front of your stakeholders and find out what they like best. We also find that it helps designers get exactly what they want. Indeed, many designers tell us that it is as easy to make a change to a layout in Flutter themselves as it is in a typical web app using CSS.

To really appreciate this, watch a Flutter app live coded in real time, or try Flutter yourself to build a real app. Join a Flutter hackathon and see how quickly you can learn Flutter and build a working app in it.

While stateful hot reload gets the hype, QA is typically even more significant. Because Flutter does not use the OEM widgets on either platform, it is not dependent on them. You can deploy dramatically faster because you don’t have to worry about testing on all those older phones, or on phones where the manufacturer changed things (like the default fonts). This means that you can test and deliver new features for your app much more quickly. Alibaba reports that the time to add a new feature to their app went from a month down to two weeks.

Hamilton, the app

In the Hamilton app, the developers actually made a major change to the app the night before they released it, with the confidence that the app would still be rock solid. And after their initial release, where the Flutter app they built in three short months was featured on both app stores, they continue to add new features frequently to keep their users active and coming back for more.

That’s how you build a successful mobile app.

Major app developers frequently report that they are between two and three times more productive using Flutter compared to other tools, and that they build better apps that are more successful. Plus the savings continues as it is faster and easier to add new features to their apps after they are released. They also report that they see significant and worthwhile advantages using Flutter even if they are building an app for only a single platform.

Developers also report (and this is one of my favorite things) that Flutter makes mobile development fun again. An outstanding 92% of developers who use Flutter say they are satisfied or very satisfied with it. This percent has been steadily increasing, and remember that these results are all from before the 1.0 release of Flutter.

Not only is it easy and fast to modify your app, it is just as fast to update the Flutter widgets. A common concern about Flutter not using the OEM widgets is that Flutter will struggle to keep up with the OEMs as they release new widgets or improve old ones.

However, when Apple announced their new iPhone X with its infamous notch, Flutter was able to add support for the notch before the phone itself was released.

And this doesn’t only apply to iOS features. When Google announced a significant revamp of Material Design at I/O 2018, Flutter was the only platform that fully implemented the new features (and not Web, iOS, or even Android). Flutter continues to have the best implementation of Material Design.

Risks and limitations

Because Flutter is a complete SDK that includes its own widgets, renderer, etc., its code size is slightly larger than an OEM solution. Up until recently, a Flutter app had a minimum overhead of 6.7MB, but a recent tweak reduced this to 4.7MB. We plan to make further optimizations in the future.

Another question we are often asked is whether Flutter is here to stay. That is a reasonable concern, but there are multiple reasons why the answer is an emphatic yes. Google is heavy user of Flutter, including for customer-facing apps such as AdWords (which is critically important to Google’s major source of revenue) and internal apps such as their CRM system (with more apps coming soon). Flutter is also a crucial part of Fuchsia. A major reason why Google released Flutter to the outside world was to speed up its growth and maturity, so that Google itself could benefit.

Flutter is fundamental to Google’s goal of ensuring that the availability of top-tier apps on Android is competitive with iOS. The fact that top apps have been typically built on two separate OEM platforms means that it can be less risky for a company to first build an iOS app and then later build an Android app if there is enough demand. With Flutter, apps can be released simultaneously on both platforms with virtually identical features, circumventing that risk.

And finally, another potential issue is that Flutter is comparatively new. It will naturally take time for Flutter to catch up to the incumbent tools, both in terms of features and community support. Presently, there are a small number of features provided by the OEM tools that will take some time for Flutter to implement. Google is putting the requisite resources into Flutter so that it will catch up.

Is Flutter for you?

If you want deeper information on why it is worthwhile to try Flutter, read What’s Revolutionary about Flutter and Why Flutter uses Dart. And read the results of our latest user study to see what users of Flutter think about it.

If you are not sure if Flutter provides a feature you need, talk to us. We are actually happy when we find a developer that needs a feature we don’t currently support, as we can provide a better solution when we work with someone who needs the feature.

When you are ready to try Flutter, here some helpful things:

  1. https://flutter.io/get-started/ — this guide helps you install Flutter, configure your editor, go for a test drive, and write your first app.
  2. Watch some Flutter videos on YouTube.
  3. There are a set of guides for devs who are familiar with one (or more) of the following: Android, iOS, React NativeXamarin.
  4. Or if you are new to mobile development, there are also tutorials, such as: Building Layouts in Flutter, Add Interactivity, and A Tour of the Flutter Widget Framework (including reactive principles, if you are not familiar with them).
  5. A valuable resource is the Flutter cookbook. Also the Widget catalog and the FAQ.
  6. Similarly, look at the apps in It’s All Widgets. Many of these are open source, so you can see code for published apps. And once you write your own Flutter apps, be sure to submit them.
  7. To get a list of the best articles about Flutter delivered to your inbox each week, subscribe to Flutter Weekly.
  8. There are a bunch of lovely codelabs for Flutter, and if that isn’t enough there is a free online video course on Flutter from Udacity.
  9. And plenty of other documentation here.

To get involved in the Flutter community, you can find us on Twitter, Gitter, and Stack Overflow. You should subscribe to the Flutter Dev mailing list. And find a local Flutter Meetup or Study Jam, and see if there are any mobile app hackathons happening near you.

Conclusion

Fluter provides high-velocity development that makes you more productive and helps you build better apps. It is an expressive, highly flexible, and customizable toolkit that gives you, the developer, complete control. And it creates fast and smooth native iOS and Android apps from a single codebase.

Flutter will save you money (it is free and open source), and it will also help you make more money (you can go after both the Android and iOS markets simultaneously, and create a better app in less time). Flutter can reduce risks.

Finally, Flutter looks to the future. It is the only native mobile toolkit that supports reactive views. And because it is a complete SDK, it will provide even more benefits when apps start to migrate to IoT.

You owe it to yourself to try Flutter and see if it provides to you the same unique and powerful advantages that current Flutter users enjoy. When you do build an app using Flutter, please let us know.


Published by HackerNoon on 2018/09/03