Flutter: first contact

Flutter is everywhere. Last December, version 1.0 was published, declaring it ready for production. The announcement was accompanied by a colorful inventory of organizations that have already developed their apps with Flutter, including flashy names such as Alibaba or Tencent. Communities of Flutter developers appear as mushrooms. It’s new, it’s bright, it’s cool. It’s by Google.

But what on earth is Flutter?

Buongiorno Principessa

Flutter is a software development kit (SDK) for creating multiplatform user interfaces on iOS and Android. It is an open source project developed by Google and a community of volunteers.

Flutter and happiness

Flutter allows you to build complete mobile applications using connectivity, storage and sensor systems of the device in which they are executed, but its reason for existing is the user interface. Flutter enables developers to create interfaces where brand design prevails, maintaining a single code base compatible with iOS and Android. At the same time, it allows to adhere to the style of the platform when it is desired, providing two sets of separate components (widgets), Material Design and Cupertino.

The idea of doing multiplatform apps is quite unoriginal. Maintaining a single code base for iOS and Android is terribly attractive as a way to reduce development and maintenance costs, at least in theory.

Flutter approach is similar to that of many video game engines. The code of the application, together with that of Flutter itself, is built into a native library. This is compiled into an APK or IPA file along with a base project that acts as the “runner” of the library. When the app is launched, the base project loads the library and delegates to it any user or system event it receives, as well as the responsibility for drawing the screen.

The key difference with respect to other multiplatform solutions is that Flutter SDK does not rely on web technology such as Cordova, nor on the platform widgets in the base system such as Xamarin. Flutter includes its own rendering engine and its widgets are executed directly on it. This engine is based on Skia, a 2D drawing library that is part of the stack of Chrome, Firefox or Android itself, and is included in every Flutter application natively built.

With this implementation Flutter is committed to a technology stack that is more independent of the base system, thinner, and with more room to optimize both the user interface performance and its fidelity to the original design.

My precious

In addition to the SDK, Flutter provides a series of tools necessary for the creation of applications. All of them are accessible either from the command line, or from the respective official plugins for Android Studio / IntelliJ IDEA and Visual Studio Code.

The star of the package is, without a doubt, the hot reload system. This allows almost any change made to the code to be immediately reflected in execution with just saving files. It works surprisingly well, both in real devices and in emulators, iOS or Android.

It is superbly complemented by the widget inspector, a panel in the IDEs plugins able to locate and watch in real time the status of each element of the user interface. The combination of both prevents missing any graphical editing tool, delegating its role to the mobile device or emulator.

Flutter does not forget either the importance of testing. The package includes specific APIs to develop unit and integration tests, together with a headless test runner that works on Windows, Linux and Mac, ideal to operate in continuous integration environments.

Show me the money

Flutter applications are written in Dart, a programming language created by Google, originally for web development. Dart is object oriented, typed and transpilable to JavaScript. It was approved as ECMA standard in 2015.

Let’s see the look of Dart with a classic.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}

The previous example shows an app based on Material Design. The first line imports the set of Flutter widgets that implement this style. The second contains the method main(), entry point to the application, using the => notation to define its body in a single line.

This line creates a single widget that hosts the entire application. In Flutter almost every imaginable element in a user interface will be a widget. Flutter widgets are reactive components designed to favor composition, and go beyond what is usually associated with the word ‘widget’ in other systems, including concepts such as alignments or paddings.

In the example, MyApp class is defined as a stateless widget, which serves as the root of the interface. MyApp holds a widget of type Scaffold, a specific element of the Material library that accepts an application bar with a title and a body to host the main content of the view. In this case, the body consists of a Center widget that aligns its child widget Text in the center of the screen.

To see this code in action, follow the instructions here. The example is copied from the first step in a small tutorial from the official Flutter documentation.

Wax on, wax off

End of the advertorial. Despite the enthusiasm of Google and the Flutter community, there is still much to prove. In all multiplatform solutions the fundamental question is the same: to what extent can I replace my two native development environments with this new and shiny solution?

Flutter includes interoperability and plugin APIs to connect to the system and 3rd-party SDKs from the code written in Dart. These APIs serve as the basis for several extension packages published in Dartlang.org that are easy to integrate into Flutter apps thanks to the dependency management tool present in the toolchain. A whole ecosystem of libraries within a stone’s throw.

The point is that said packages are not Flutter, and therefore the fabulous, solid and reliable 1.0 exhibited by the SDK does not apply to them. Each package has its own set of contributors, its own maturity status and its own version number. A priori, it is difficult to put the same trust on a package for camera access displaying version 0.4.2 as on the official programming interfaces.

Flutter encourages us, developers, to create our own packages and join the community of contributors. Without a doubt this is a fantastic approach to boost the growth of the platform. However, it adds a point of uncertainty about its stability and short-term evolution that a responsible developer can not ignore.

On the other hand, the independence from the official UI widgets brings its own drawbacks. There is a new catalog of widgets to learn, with the time and effort that this requires. This catalog seems really complete, but competes with two longly established, and we can not take for granted that our favorite platform widgets will have Flutter equivalents available. In addition, purists will not hesitate to remind us that Flutter widgets only imitate native styles.

As for the tools, Apple’s golden cage favors a totally expected asymmetry. While Xcode is a requirement to generate Flutter apps for iOS, there is no way to develop them in Xcode. The transition seems much easier for Android or Xamarin developers, since plugins for their usual IDEs exist.

The lack of a dependency injection solution deserves a special mention. Searching for friends.

Hakuna matata

Is it worth the leap? Well, I don’t know. Multiplatform development has become the Holy Grail of mobile development, and we know that up to now it is half reality, half legend.

At first glance, Flutter seems solid enough to work well in rapid prototyping or simple REST clients, but it bears a lot of uncertainty to consider bringing more sophisticated apps to production.

This puts it in a situation similar to other multiplatform systems, with the disadvantage that it comes later, which makes it difficult to justify the change if one already has experience in some of them. Perhaps the optimized performance that promises makes the difference, but assessing this in depth goes beyond what we can estimate with a first approach.

An interesting incentive is that Flutter is the first known platform to develop apps for Google Fuchsia, the operating system to rule them all. Positioning your apps early in Fuchsia could be an important competitive advantage if the project came to fruition. So it seemed, at least, until was revealed that Android apps will be supported in Fuchsia. And let’s not forget that Google closes projects like who closes the door of her house. Ciao, Google+.

In short, value it yourself. If you want to take a look there is a lot of interesting content in the official documentation. Codelabs on Flutter are particularly appropriate to get started.

We will keep an eye on the platform, but for the moment we are sure that there are other baskets to put part of the eggs.

About David A. Velasco

Arquitecto software y desarrollador móvil nativo con cierto favoritismo hacia Android. Obsesionado con la creación de valor para el usuario y la prevención de riesgos durante el desarrollo. Nada me emociona más que priorizar la pila de producto.

Leave a Comment

Responsable » Solidgear.
Finalidad » Gestionar los comentarios.
Legitimación » Tu consentimiento.
Destinatarios » Los datos que me facilitas estarán ubicados en los servidores SolidgearGroup dentro de la UE.
Derechos » Podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

By completing the form you agree to the Privacy Policy