What about Flutter?

Introduction

In mid-2007, Steve Jobs introduced to the world the most loved product Apple has ever crafted and the de facto first smartphone: the first-generation iPhone. His main goal was to radically change how we interacted in a connected world and to revolutionize the current status quo of the mobile computing industry. Realizing the great opportunities offered by that new-borne market, Google launched its operating system for mobile devices in the following year, the Android OS.

Evolving through many iterations and receiving a whole new lot of features, they are now the platforms that aim billions of people around the world to be part of an interconnected global economy. This new scenario is responsible for the current high demand for mobile apps which availability in Apple’s and Google’s ecosystems is practically mandatory for companies that intend to maximize their profits. Also this demand for apps created a budgetary problem because a company should keep two different sets of professionals to develop, maintain and distribute those apps for each platform using a native approach.

Through time many solutions were proposed to solve those problems. The most famous frameworks use web technologies (like HTML5, CSS and Javascript) as Ionic and React Native does. The main goal is to use a single code base to create a product, compile it to the targeted OS and upload the generated binary file to the App Store or Google Play. This approach worked well for the last years, but nowadays the users have more expectations on the look and feel of the available mobile apps. They require them to have great design, smooth animations and optimal performance without compromising the inclusion of new features. And this is the main reason why Google decided to enter this game creating Flutter.

But, what is Flutter?

Architecture

Flutter is UI Toolkit created by Google in mid-2017 intended to help developers to create pixel-perfect apps that look and feel like native ones. Also it should enable a developer to make those apps available for mobile devices, the web and desktop without compromising performance and the user experience.

As shown in the image above, the Flutter framework can be sliced into three basic layers.

• The Embedder: This is the native part of every flutter application and it is responsible to provide an interface to interact and access resources of the targeted OS. It also provides the most basic features that the Engine layer uses to control the app’s lifecycle and the widget painting process.

• The Engine: This is the core of each Flutter App, and can be divided in basically three sub-modules:

  • Dart Virtual Machine: Responsible for interpreting and executing all Dart Code created by the layer above.
  • Rendering Engine: Its main responsibility is to paint efficiently the widgets created by the layer above and assure that animations will be played smoothly. It is written in C/C++ to boost performance and uses Skia Graphics Engine to efficiently paint each widget on the screen.

  Skia is an open-source 2D graphics library that provides common APIs that work across a variety of hardware and software platforms. It serves as the graphics engine for Google Chrome and Chrome OS, Android, Mozilla Firefox and Firefox OS, and many other products.

  Skia is sponsored and managed by Google but is available for use by anyone under the BSD Free Software License. While engineering of the core components is done by the Skia development team, we consider contributions from any source.

  Source: [Skia WebSite](https://skia.org/)

  • Services: Interfaces that allow the Framework layer to access the engine services, like the rendering engine, platform channels (access the system’s resources) and listen to system events.

• The Framework: this is the layer that the programmer will interact daily. It contains the foundational resources upon what all the Flutter’s widgets are built. This layer also offers the two main themes used to create Flutter apps: material and cupertino. The material theme is responsible for implementing widgets that are compliant with the second version of Google's Material design system. In the same way, the Cupertino theme implements the look and feel of the iOS native design system.

Characteristics

1. All flutter apps are compiled and optimized for ARM architecture in production mode and optimized for debugging in development mode. Also hot reloading is available in development and it is simply awesome!

2. As shown in the architecture section, all Flutter widgets are build using Dart, a language created and maintained by Google itself. Dart is optimized to easily create user interfaces using code at the same time that offers a similar syntax to C#, JS, Swift and Kotlin.

3. Due to performance improvements, Flutter renders its widgets that mimic the underlying OS components. So, a new embedder must provide a canvas upon what the Skia Engine will draw the user interface itself and services to access resources of the system.

4. Extensibility is granted by the aggregation of third-part plugins that adds new components or allows the use of the OS resources that are not yet available in the built-in classes. All those libraries can be found in the official repository and added as dependencies in the apps pubspec.yml file.

5. Similarly to the React ecosystem, a flutter app can be described as a widget tree and the UI can be defined is the result of a function applied to the current app state. Therefore, as in React, data flows in a unidirectional way: from a parent widget to its children and each widget is repainted only if the application state changes and it affects the widget state.

6. Platform custom code is super easy to write. The Platform class has some static methods that help to identify the current OS and execute specific code. Also, some widgets like Switch implements the adaptative constructor that chooses the widget theme based on the current OS.

7. It helps to efficiently create Minimal Viable Products and Proof of Concepts. Due to increased development speed, great UI flexibility and minimum setup time, Flutter helps to easily approach and validates business ideas. Also features as hot reloading helps to speed up the implementation of feedback from clients.

Use Cases

For a long time, many companies have struggled to deliver high-quality apps using a hybrid approach. Performance issues, slow development time, limited UI development and other downsides have made companies to move away from more traditional hybrid solutions and give Flutter a try. In the showcase page you can find a whole lot of companies that are developing apps using Flutter. In this list you can find some big players like Tencent, Alibaba, The New York Times and eBay.

Conclusions

Flutter is a new framework from Google that speeds up the app development cycle by focusing on key features like interface building, performance and extensibility. By rendering its widgets, the developer can easily and rapidly extend and implement new features without losing the look and feel of the operating system upon which the app will run.

There are some critics because of Google's choice to use Dart instead of Javascript/Typescript. But after playing with Dart for some time and developing some simple apps, I realized that the language really resembles a lot the most popular C-like programming languages and it was not hard to learn.

Finally, I believe Flutter is a trend to 2020 mobile app development and it really worths a try. As time passes by and this technology solidifies, it is certain that more companies are going to adopt it as a first-class framework for cross-platform app development.