Native app frameworks can be extremely limiting — and with the wealth of cross-platform options currently available, software development companies are opting for hybrid and cross-platform frameworks more and more. The reason is simple: cross-platform frameworks allow developers to create apps for both iOS and Android with one single codebase. This means less time and money spent on development and maintenance, as well as an app that reaches the widest audience possible.

If you’re trying to choose a cross-platform technology, your tech team has a number of options available. But chances are, you’re likely choosing between Facebook’s React Native, Microsoft’s Xamarin, or Google’s Futter.

Though Flutter is a relatively new framework (it was initially released in May of 2017), it’s risen quickly in popularity thanks to its fast performance, short development time, beautiful user interfaces and designs, consistency across platforms, and expanding community support. It’s become a new favorite at our software development company, and use of Flutter is likely to continue to grow in 2021 and 2022.

What is Flutter?

Flutter is an open source UI toolkit that allows developers to create native-like apps for mobile, web, and desktops using a single codebase. Flutter is a complete SDK (software development kit) that comes with a framework and other tools. It also comes with pre-built Material Design and Cupertino widgets that can be easily customized. You can create your own widgets, or install third party plug-ins.

Flutter is written in Dart (also created by Google), which is a powerful object oriented language. Dart is easy to learn by those who already have an underlying knowledge of C++, Javascript, or Java. Flutter uses Skia, a 2D graphics library written in C++, as the engine for rendering objects on the screens of any supported platform.

Updates and debugging are made easy with the Stateful Hot Reloading feature, which allows developers to see changes to the UI in real time without a full recompile, as well as with a Static Code Analysis tool that analyzes the Dart code to find bugs or other errors before execution. These tools shorten app development time.

Flutter borrows many ideas from web design developers, who have long been adapting web pages for different screen sizes. As a front end framework, Flutter allows designers to create their UI concepts easily, which makes it easier to produce a high-end user experience.

Who uses Flutter?

Flutter has gained a lot of popularity this year — it currently has a rating of 122,000 stars on Github, and there are more than 120,000 apps built in Flutter on the Google Play Store alone.

Flutter is being used by a wide range of companies and industries, including giant ecommerce organizations like Alibaba and Ebay, Fintech companies like Square and Nubank, and mindfulness projects like the Reflectly and Insight Timer apps.

Some Flutter apps you may recognize include:

  • The Google Ads app: With over 10 million downloads, The Google Ads app allows users to monitor, adjust, and optimize their pay-per-click ad campaigns in real time.

What are the benefits of Flutter for a software development company?

Higher App Performance

Compared to Xamarin or React Native, Flutter offers an overall higher app performance, with quicker rendering of UI and graphics and a seamless integration with the OS platform. Unlike React Native or Xamarin, Flutter’s Dart code directly compiles ahead of time (AOT) to native ARM code without being slowed down by interpreters.

On the user side, Flutter apps load quickly and run fast. The Flutter team promises 60fps or 120 fps on devices capable of 120Hz updates. Graphics and animations are drawn on the screen in real time by the rendering engine Skia. Technologies like React Native and Xamarin tend to run slower because they have to translate a tree of native controls.

Flutter apps have rich graphics, and it makes it easy to render anything, including a multimedia-rich UI (user interface). It’s often difficult to develop GUI (graphical user interface)-heavy apps in Xamarin due to the need to write platform-specific UI code. But in Flutter, the Skia engine utilizes OpenGL, which makes refreshing faster because it writes on low-level rendering tech. In short, Flutter is ideal for apps with complex animations, graphics, or even games.

Consistent and Beautiful Native-Like UI Design

Flutter doesn’t use native components to build a UI — it uses its own set of widgets, which means that developers can build UIs free from platform constraints and that are completely unique. This is different from both Xamarin and React Native, which rely on native components and thus are limited to platform-specific designs.

With Flutter, it’s also possible to create apps that are native-like. Included in Flutter’s framework are libraries of pre-built widgets that look the part for iOS and Android systems, making them seem as if they were built natively.

Another benefit of Flutter’s UI is that it’s more stable than that of React Native and Xamarin. Designs remain consistent independent of different screen sizes, aspect ratios, or operating systems, and are more likely to appear the same on older versions of iOS and Android systems.

Truly Cross-platform

Flutter is a truly cross-platform framework — Flutter 2.2 can be used to create mobile, desktop, web, and embedded apps. Flutter apps can be used on any of five operating systems: iOS, Android, Linux, Microsoft, and macOS; on the web via browsers such as Chrome, Safari, and Edge; and can be embedded in TVs, cars, or smart homes.

Community Support and Documentation

The official documentation for Flutter is easily available, extensive, and well-organized. Third-party training and courses are plentiful and accessible on platforms like Udemy and Youtube.

Moreover, Google is strongly invested in the advancement and development of Flutter: in March 2021, Flutter 2 was released, which broadened Flutter from merely a mobile framework to a portable framework (as well as adding new packages and updates). Flutter 2.2, which included performance improvements and new features to DevTools, was released in May 2021.

How does Flutter work?

Inspired by Facebook’s React framework, Flutter can be summarized as a universal declarative UI framework, wherein the developer declares the UI while the framework itself does the work of updating the interface at runtime whenever the UI changes (e.g. due to events such as user input).

Flutter’s architecture can be divided into three layers of independent libraries: the framework, the engine, and the embedder.

The framework is the design layer, where developers build apps. Written in Dart, the Framework is composed of a series of libraries organized into layers. They include the foundational classes, animation, painting, gestures, rendering layer, widgets layer, and Material and Cupertino libraries. This framework is relatively small, and other features that developers may use — such as camera or in-app payments — are implemented as packages from third parties.

At the core of Flutter is the engine, which implements the Dart code written in the framework. The engine wraps Dart code into C/C++ and acts as a bridge to the last layer, the embedder. The engine is responsible for rendering UI via the Skia engine on users’ devices whenever screens change, and supports all primitives necessary for building apps.

When a Flutter app is accessed by an operating system, it is compiled into native ARM code via the embedder layer. The embedder layer is written in platform-specific language and comes with prebuilt libraries for the most common operating systems, e.g. Java and C++ for Android, Objective-C/Objective-C++ for iOS and macOS, and C++ for Windows and Linux. In addition, it is also possible for developers to create their own platform-specific embedder.

Widgets

When developers build their Flutter apps in the framework layer, they do so using widgets, which are similar to the widget components found in React. As a UI framework, Flutter renders an object onto the user’s frame. That object is a widget. Widgets are the building blocks of Flutter apps, and Flutter developers will often assert that “everything is a widget” in Flutter. Widgets can be anything — including text, a layout design, padding, animations, scrolling, icons, and more.

Flutter comes with a catalog of pre-built widgets that includes most use cases needed to design an app. Developers can also build their own widgets.

Since Flutter is a declarative UI framework, widgets can be manipulated and customized according to the desired UI and UX. For example, developers can choose buttons from the Cupertino library with an iOS native-like look and feel — in other words, it’ll look similar to a native button. The same goes for Android-style buttons from the Material Design library. And if the developer wants to incorporate both styles, that is possible as well.

There are two types of widgets available in Flutter: stateful and stateless. Stateless widgets do not change over time, like icons or text. Stateful widgets are widgets that change based on user interaction, such as a check box that is ticked when the user taps it.

Rather than having a single tree of widgets, Flutter makes use of three trees: Widget, Element, and RenderObject. Together, these concepts form the basis for how Flutter renders objects:

  • The Widget tree is responsible for configuration.

All together, they form a parent-child hierarchy where each child receives context from its parent.

Once widgets are defined, they are immutable at runtime. But when the UI of a Flutter-based app changes (e.g. due to a user interaction), one widget replaces another widget in the hierarchy. The framework compares the two widgets, and replaces only the parts of the tree (Widget, Element, or RenderObject) that are different, thus reusing code wherever possible and simultaneously offering smoother graphics.

No Interpreters Needed

Usually, when cross-platform frameworks want to render UI and graphics on the designated operating system, the system must make use of an abstraction layer that overlays the native operating systems. Flutter, on the other hand, bypasses the operating system’s UI widget libraries and uses its own set of widgets (written in Dart but compiled into native code) to render directly on the platform via the Skia engine. All it requires of the hardware is a blank canvas on which to draw.

Flutter’s ability to talk directly in the machine code makes it incredibly fast at rendering objects. The graphics and multimedia that the user experiences are comparable to that of a videogame. The fact that Flutter does not need to go through a JavaScript bridge means that it can communicate with the OS directly, in its native language, and thus improves loading and rendering time.

Hot Reload

Flutter makes use of a hot reload cycle, which means that when a developer starts building an app in Flutter, they’ll be able to see the changes they’ve made almost instantly. The hot reload feature works by checking the new code against the last compilation and recompiling any libraries with changed code, the apps main library, and the libraries from the main library leading to affected libraries. Then, the updated source code is injected into the Dart virtual machine (VM). The VM updates classes with the new versions of the fields and functions, and the Flutter framework automatically renders the new widget tree, allowing updates to be seen in real time.

As long as the root widget is not changed (if it is, a full restart will be needed in order to see updates), Flutter’s ability to hot reload will allow the entire widget to rebuild and show updates quickly. If text changes or a row is swapped for a column, developers can use the hot reload feature to refresh quickly, without a full reload, and you can easily see how it looks on a device or emulator/simulator. Hot reloading makes it easy to experiment with new UI, fix bugs, or update old versions of apps.

Case Study: An App Developed by Using Flutter

In an effort to connect local independent coffee shops with their customers, a client contracted our software development company AccelOne to build an app that would allow customers to place a coffee order online in advance before going to the shop to pick it up. Customers can also place the order themselves in the shop at a designated tablet, and the order will be sent directly to the merchants POS (point of sale) system. The app allows small independent shops an opportunity to compete with larger coffee chains by offering their own pre-order solution that lets customers “skip the line.”

The client’s coffee-ordering app has been downloaded over 50,000 times via the Google Play Store, and is currently ranked in the top 200 apps in the “Food and Drink” category in the Apple App Store.

Customers can download the app on their iOS or Android device and:

  • See which coffee shops are nearest to them

Merchants can accept digital orders either directly to a specified tablet, to their Square POS, or behind their existing POS system. When a customer places an order, either on their mobile app or on the in-shop tablet, the order goes directly to the barista’s screen (either an Android or iOS device). Both the barista and customer can see the orders in real time.

When AccelOne was hired to develop the app, the client had already chosen Flutter, because compared to other cross-platform frameworks it has the most native-like UI and UX. The development team faced a few challenges:

  1. An MVP (minimum viable product) had already been created using older architecture and state management framework.

In order to solve the issue of the older MVP, the AccelOne team refactored the outdated architecture and framework. Using Flutter helped with this process, since development time with Flutter tends to be shorter than with native technologies.

To solve the problem of communication, the AccelOne team implemented a Bluetooth bridge to avoid latency and unnecessary network usage. Flutter was instrumental in solving both of these challenges due to its speedy development time and ability to make Bluetooth communication implementation simple. Using Flutter allowed AccelOne’s developers to create the app in record time, as well as provide a rich UI experience with fast graphics and a consistent feel on both Android and iOS.

Originally published here.