Flutter – A broad Introduction

According to statista, by 2020, mobile apps are expected to generate around 189 billion US dollars in revenues via app stores and in-app advertising. Nowadays, companies see the mobile app not only as the business itself, but also as a means to advertise their brand, and are trying to reduce the time to market as much as possible in order to keep up with the competition.

Currently, there are two main operating systems running on smartphone devices: Android and iOS. Together, they make up almost 100% of the smartphones sold in the first quarter of 2018. These different platforms have their own design constraints, their own toolsets and their own programming languages, but each platform is merely building a user interface. Why should development across these two user surfaces be so different?

Many technologies have already addressed the necessity to unify development for the existing platforms, and names like Microsoft’s Xamarin and Facebook’s ReactNative have emerged as the most prominent cross-platform development solution.

Google is known for its awesome products but has never endorsed a long-term, supported, fully cross-platform project until recently. Read this Flutter introduction and discover all about the project.

According to Google, the enterprise behind the project, Flutter is a brand new technology that allows the crafting of high-quality native interfaces on iOS and Android with a single shared code base, using a programming language called Dart, also developed by Google.

With a free and open source SDK, Flutter is used by developers and organisations around the world and works with a centralised programming language and unified core. Additionally, Flutter integrates with standard, popular development environments and tools such as Visual Studio Code and IntelliJ.

This combination of key features enables fast development, a high performant result and high maintainability.

Flutter is quite new. Therefore, its timeline is fairly small and compact (for now!).

• In early 2015, the project was up and running and known as ‘Sky’. It ran on Dart and was already capable of rendering screens at a 120 frames-per-second;
• In 2016, Google unveiled their plans and codebase for a new operating system (OS) known as ‘Google Fuchsia’. This new OS is rumoured to be the successor to Android for universal devices, and its apps are entirely written in Flutter;
• After maturing, the initial release took place in 2017. The alpha version, numbered as v0.0.6, was publicly available and developers could jump on this technology.
• In May 2018, during Google IO, Flutter was finally shipped in its official beta release.
• In September 2018, Google released the second preview of version 1.0.

Fuchsia is a new OS with a dedicated micro-kernel that runs on universal devices, from embedded systems to smartphones, tablets and personal computers. It is already clear that Flutter is not going to disappear or be abandoned any time soon. Google is boldly and consistently investing in Flutter, as can be seen from its presence in I/O 2017 and I/O 2018.

Flutter is not a new, ground-breaking, unseen solution. It is rather a new option for the competitive cross-platform world. But what value is Flutter bringing to this prolific environment? There are, of course, some points of differentiation.

Unlike ReactNative, which bridges Javascript to native code with a noticeable performance loss, or Xamarin.Android & Xamarin.iOS, which compile a single C# codebase into native code – thus requiring two completely distinct UI constructions – Flutter seems to overcome its competitors’ most common flaws. Skipping mid-level bridging and interpretation, leveraging powerful ahead-of-time compilation and making use of the flexible Skia Graphics Library, Flutter is all about widgets.

A widget represents an atomic area on the screen and its corresponding logic (e.g. Input Field, Button, Image, List). These small building blocks are fast, very responsive and customisable. Flutter’s solid and high-quality user interfaces come from the fact that you can combine, interweave and compose widgets in order to achieve larger, more complex screens.

Despite the existence of many community-developed widgets, Google’s Flutter team provides the most relevant ones. These widgets were built under Google’s material design or Apple’s Cupertino.

Another major advantage of Flutter is hot reload. This feature allows code to be incrementally added and executed in real time, instead of having to recompile code over and over again, reducing implementation and test time.

Just like most cross-platform technologies, Flutter allows interaction between its Dart codebase and native components, be they hardware or existing libraries. By leveraging this possibility, it can delegate difficult, expensive functionalities to native implementations and collect the results with great ease so they can be further used by the single codebase. For instance, it can use the battery service of each OS to obtain the device battery status.

Xamarin.Android and Xamarin.iOS allow the developer to centralise code logic in a single C# codebase. This powerful feature prevents code duplication and minor logic bugs and speeds up the output process by saving development time. Nonetheless, in order to achieve platform dedicated UIs, the developer must implement the UI separately for each supported platform. Xamarin.Forms can help circumvent this necessity, but native UI implementation is usually the preferred option due to its flexibility.  Once ready to run, code is compiled and deployed to the app.

Flutter’s “Write Once Run All” approach is different, relying on the Skia Graphics Library to render its UI, mimicking native UI components. Just like Xamarin, the logic is centralised in a single Dart codebase.
While we can achieve a “written once” UI that runs perfectly on both platforms, it is recommended not to combine platform-specific UI guidelines in order to prevent UX ‘alienation’ (iOS users are certainly accustomed to their Cupertino-styled apps, while Android users have a more diverse range of styles). In order to dodge this issue, Flutter allows the implementation of different UIs for each platform in a similar way to Xamarin.

The development process isn’t solely based on the cross-platform technology, but also on the whole ecosystem, which includes libraries and plugins. Xamarin is already an established technology, more mature than Flutter, and can call on the support of the most used third party plugins. However, despite the fact that Flutter was only recently developed, it already features an extensive set of third party libraries, just like Xamarin, as well as continuous development tools.

The bottom line of this comparison is that Xamarin emerges as a more consolidated technology, while Flutter, still under significant development, is quickly growing and learning from its competitors how to achieve a solid backbone for the coming months.

ReactNative is a cross-platform technology built by Facebook and designed to develop mobile and web apps. Similar to Flutter, ReactNative centralises development in a single codebase and allow developers to write apps for both Android and iOS.

Despite sharing the same codebase, ReactNative embraces differences among platforms and allows platform-specific customisations. ReactNative developers have to rely on third-party UI libraries; this is seen as a disadvantage when compared to the out of the box Flutter UI components.

Facebook built ReactNative as a robust platform, with lots of optimisations. Despite being hard to extract, performance metrics depend on features, algorithms, components amongst many other aspects.

The most relevant consideration to make is the fact that ReactNative apps are developed in JavaScript and, therefore, with a JavaScript engine under the hood, introducing a considerable overhead, as the implementation is not compiled into native code.

ReactNative has been in the market for some years, which translates, in a clear way, to a more mature and consolidated state when compared to Flutter. But besides that, Flutter allows the usage of many JavaScript libraries thus permitting companies to reuse components and to include non-mobile JavaScript developers into mobile projects.

As a result of this ever-moving ecosystem, many third-party libraries were ported from native libraries while others were created specifically for this platform.

Even though Flutter is still in beta, it is encouraging to note the strong early adoption of the SDK, with some high-profile examples already published. One of the most popular is the companion app to the award-winning Hamilton Broadway musical. Built by Posse Digital, this app has an extensive user base and an average rating of 4.5 on the Play Store (as of July 2018).

Recently, in May 2018, the Chinese e-commerce giant Alibaba announced their adoption of Flutter for Xianyu, one of their flagship apps with over twenty million monthly active users. Alibaba praises Flutter for its consistency across platforms, the ease of generating UI code from designer redlines, and the ease with which their native developers have learned Flutter.

A more complete and organised Flutter portfolio can be found here.

Based on everything we’ve covered in this article, the conclusion is that Flutter has great potential to solve some of the pains of cross-platform development, but it’s still not clear when it can be a real alternative – this will really depend on the project. It’s not even fair to compare Flutter to Xamarin or ReactNative due to the difference in the maturity of the platforms. However, we think there’s great potential in the technology, and this is why we keep investigating, trying and comparing. With several modern IDEs at its disposal, a stable, developer-friendly modern language and unified output, this technology is bound to earn its place in the digital world.

As soon as Google pushed Flutter through Alpha into a Beta phase, the odds of its success grew exponentially, thus drawing the attention of the mobile community. Mobile experts around the world have found in Flutter what they were looking for as they strived for new, fresh options. Let’s see how it evolves – we’ll definitely be a part of what is to come.