Flutter – The new mobile promise

No Comments

If you’ve worked with technology for a couple of years, you’ve probably lived through your fair share of hypes and “Technobabble”. So before you cast the “Flutter” buzzword aside, we would like to show you what it is and what can be accomplished with it.

The topic of how ready for the real world Flutter is was already approached by my colleague in late 2018 and I recommend the read. I am offering here my perspectives on the subject.

What is Flutter?

Born out of curiosity

Flutter is still a babyFlutter started as an experiment performed by members of the Chrome browser team at Google. The team wanted to see if a faster renderer could be built by ignoring the traditional model of the layout used on current web engines. It was first unveiled at the 2015 Dart developer summit. The first version of Flutter was known as “Sky”. It ran on the Android operating system, with the stated intent of being able to render consistently at 120 fps.

Flutter is now defined as a mobile cross-platform application development SDK. It means that Flutter is used to develop applications for Android and iOS, as well as being the primary method of creating applications for Google Fuchsia, the supposedly new OS from Google. This was quite groundbreaking! Developers now had the opportunity to develop apps for different OS with one single code base!

What it promises

According to the team that develops Flutter, it has four main characteristics:

  1. Flutter enables you to build beautiful apps: Designers can release their full creativity since Flutter gives them control over every pixel on the screen. It offers compositing capabilities that let you overlay and animate graphics, video, text, and controls without limitation.
  2. Flutter is fast: It’s powered by the same hardware-accelerated Skia 2D graphics engine that underpins Chrome and Android. It is architected to be glitch- and jank-free at the native speed of the device it runs on
  3. Flutter is productive: It has stateful hot reload, which allows one to iterate on their apps in real time. With stateful hot reload, you can make changes to the code of your app and see the results instantly. No need to restart your app or lose its state. It can make development 3x more productive, according to polls with developers who use it.
  4. Lastly, Flutter is open: Flutter is an open source project and has thousands of contributions already. There’s also a vibrant ecosystem of thousands of plug-ins. And because every Flutter app is a native app that uses the standard Android and iOS build tools, you can access everything from the underlying operating system, including code and UI written in Kotlin or Java on Android, and Swift or Objective-C on iOS.

Dart: The language of choice

We cannot talk about Flutter without talking about its language of choice: Dart. During the early days of the project, the Flutter team evaluated more than a dozen languages and picked Dart because it matched the way they were building user interfaces.

Here is a quick list of some the Dart features that together make it indispensable for Flutter:

  • Dart is AOT compiled. Which means the program is compiled ahead of time into fast, predictable and native code. This allows almost all of Flutter to be written in Dart.
  • At the same time, Dart can also be JIT compiled. Just-in-time compilation allows for the fast development cycles and game-changing workflow that Flutter offers (hot-reload for example)
  • Dart can do object allocation and garbage collection without locks. And like JavaScript, Dart avoids preemptive scheduling and shared memory (and thus locks). This makes it not only much faster at start-up, but easier to create smooth animations and transitions that run at 60 fps.
  • Because Flutter apps are compiled to native code, they do not require a slow bridge that translates between your code and the platform.
  • Dart allows Flutter to avoid the need for a separate declarative layout language like JSX or XML, or separate visual interface builders because Dart’s declarative, programmatic layout is easy to read and visualize. And with all the layout in one language and in one place, it is easy for Flutter to provide advanced tooling that makes the layout a breeze.

Not all of these features are unique to Dart, but the combination of them hits a sweet spot that makes Dart uniquely powerful for implementing Flutter. So much so that it is hard to imagine Flutter being as powerful as it is without Dart.

As an example of how Dart code looks, here are a couple lines:

// This is where the app starts executing.
main() {
    // Declare and initialize a variable.
    var number = 42;
 
    // Call a function.
    printInteger(number);
}
 
// Define a function.
void printInteger(int aNumber) {
    // Print to console.
    print('The number is $aNumber.');
}

Developers have found that Dart is particularly easy to learn because it has features that are familiar to users of both static and dynamic languages.

Version 1.0/1.2

Flutter is growing upAt the “Flutter Live” event in London, on December 4th, 2018, the Lead Developer of the project, Eric Seidel, took the stage to announce that the project had achieved its 1.0 stage, thus denoting the first “stable” version of the framework. Recently the Flutter team also released version 1.2 with a lot of new features and improvements.

Although the stable version is quite recent, you might have already seen Flutter in the wild. Big names in the industry already ported their apps to Flutter: Internally, Flutter is being used at Google for a wide array of products, with Google Ads already having switched to Flutter for their iOS and Android app. But there are also companies such as Abbey Road Studios, Phillips, Alibaba and Groupon that also took the leap. They now have parts or the whole app done with Flutter.

Some examples of apps done with Flutter

Left to Right: Google Ads, Groupon and Abbey Road Studios

Android and iOS in one go… Why?

UI brand is king! If a company can deliver the same user experience and look and feel for both the Android and the iOS user, it will make a stronger impact and thus eventually have its own “style” directly recognized by the user. This is, of course, the marketing dream which is achieved by the likes of Nike or McDonalds. These are instantly recognizable brands (I’ll just say “swoosh”).

But not only that. If a company has to develop and maintain only one codebase while still delivering for two platforms, it can cut costs. The development team can be smaller. It doesn’t need everyone to be an expert in Java/Kotlin or Objective-C/Swift, but only a small subset of the team. Because the learning curve for Dart/Flutter is arguably smaller than of other languages, a new team member can be productive faster. This also allows for faster turnover times since changes are made only in one place without the need for coordination among several teams.

Sometimes the company might still want to keep a couple of details of the native platform (e.g. the back arrow). This is done in order for their app to integrate better with the OS ecosystem. Flutter can take care of showing the appropriate icon for the appropriate platform. You don’t have to take care of it yourself. Besides, Flutter also offers concepts such as “Safe zone”, which takes into account curved corners on screens and the now infamous “notch” on top of the new iPhones, and thus doesn’t let your design be concealed because of it. It also allows one to use techniques of responsive design and thus adapt to a practically infinite range of screens.

Fluttter shows that is possible to have iOS and Android apps looking the same

Left: The subtle differences on different OSs, Right: How Flutter deals with different screen configurations

The Future

To the future and beyondThe open source project is always looking for help, so check out the repositories in here. It also makes sure to be open about the direction in which it is going. For the coming year, the team has a couple of areas where it wants to improve such as stated on their 2019 Roadmap.

Out of the small screen and into the world

Some “experiments” are being made in order not to stay constrained to the “small” screen of mobiles. Although not the main focus of the team, there is still something going on in these areas.

Hummingbird

In just a short sentence: Project Hummingbird is Flutter for the web.

The compiler transforms the parts into pure HTML + CSS + JS and uses the Canvas object of HTML5 to display them. This is not only possible but it carries the same performance as the team provided in its mobile goals.

Desktop

There are also ongoing efforts to make Flutter compile for usage in Windows, Mac, Linux, Chrome OS and others. This would make a strong competitor for the Electron framework that uses JavaScript for the same purpose. Check out the code repository.

So, should I learn it?

In my opinion: yes! If Fuchsia actually takes off as a platform, which at the moment is nothing but a big question mark, this will be a necessary skill since Flutter will be the only way to develop apps for it. The current state of the project shows how well it is developed and is supported by a lot of big players in the industry through usage on their own product. Flutter offers some money and time-saving possibilities, as discussed previously, so that is another factor looking from the bottom line perspective.

If the developments out of the small screen also take off, we are then talking about a tool that can be used for practically every technology platform, also without the need for hacks, special packages or libraries to learn on top of the base technology. This is a huge promise and one that, if it pays out, it will be a game changer.

Flavio Diez

Flavio works as an IT Consultant for codecentric AG in Frankfurt, Germany. He loves to program always with the principles of Clean Code and Clean Architecture in mind. He also enjoys working on projects that offer new challenges and affect people in a positive way.

In his free time, he enjoys sports, reading and coaching Rugby.

Comment

Your email address will not be published. Required fields are marked *