How Flutter Could Be a Game-Changer in Cross-Platform Development

Last year, we started hearing quite a lot about Flutter, a new cross-platform framework created by Google to build applications for web, mobile, and desktop. This year, there were many market tests and positive feedback from the community. I was also curious about how Flutter could solve the challenges of cross-platform development, so I tried the framework a couple of months ago, building a mobile application with the typical features including networking, Google Cloud Firebase interaction, image caching, and rich graphic user interface. My experience with Flutter was fun. The framework offers a lot of positive features, convincing me that it would be a game-changer in cross-platform development.

Questions about React native and Flutter dominate other cross-platform frameworks on Stack Overflow

While people talk about how amazing Flutter is, I would rather start with its core technologies: Skia, a fast and low-level graphics library, and Dart, a programming language. Understanding these foundations gives you a sense of the results that Flutter can offer and why it’s so promising compared to other cross-platform frameworks like React Native or Xamarin.

Let’s start with Skia, a graphics cross-platform framework.

• A modern open-source 2D graphics library written in C++ (Google acquired Skia, Inc. in 2005)
• Focus on accuracy, high quality, and high-performance renderings
• Cross-platform: Windows, Mac, iOS 8 or later, Android 4.1 or later, Ubuntu 14.04
• Successfully implemented on Chrome OS, Firefox, Android, and many other products.

As you can see, Flutter is a new name, but its core technology, Skia, is not. Skia is a mature framework; the market has already confirmed its performance, and it runs on many enterprise products such as Google Chrome, Chrome OS, and Firefox.

But Why Skia is So Important in Flutter?

Flutter’s approach is different from most other cross-platform frameworks. While React Native, Xamarin, and Titanium try to bring out native (Android/ iOS) UI components, Flutter decided to render UI components by itself. That means when you see a UI component—a button for example, it’s not an Android or iOS button, it’s a Flutter button rendered directly by the Skia framework.

UI components are rendered directly in Flutter; there is no bridge with native components

When I heard for the first time that Flutter draws the UI components by itself, I had a lot of questions. As an experienced Android developer, I know there are a bunch of UI components on both Android and iOS with their own rich set of behaviors, properties, and public APIs, and they are very customizable as well. Could Flutter also offer the same options? Also, if the framework draws its own Flutter UI component, will it look the same across all platforms? Although I choose a cross-platform approach, my iOS application must have an iOS look, and my Android app must have an Android look as well. Is this possible?

Actually, Flutter handles all of these things very well. There is no gap between native UI components and Flutter widgets. You will find almost everything: text, buttons, sliders, date/time picker, toggle, ImageView, and more. Flutter’s widget is even better in terms of modern design, being easy-to-use and customizable. Flutter also provides out-of-the-box widgets that look like both iOS (Cupertino) and Android (Material). I really appreciate the huge effort that Flutter’s team put into this; it’s such great work. This creates a stable application that looks consistent on different versions of iOS. For example, your application will look the same whether you install it on Android L, M, or Q devices.

Cupertino and Material styles in Flutter.

Why the Dart Programming Language?

People use Flutter and love this framework because of one big reason – the Dart programming language.

Before choosing Dart, Flutter’s team examined a dozen languages, including the most popular programming languages like JavaScript and Java. They evaluated them on different primary dimensions, including developer productivity, object-oriented programming, predictability, high performance, and fast allocation. Some languages met several criteria; Dart, however, scored high on all evaluated dimensions and met all of the Flutter team’s requirements and standards.

1. 1. Dart is one of a few mainstream languages that support both the Ahead-of-Time (AOT) and Just-in-Time (JIT) compilers. While the Ahead-of-Time compiler emits efficient ARM code for fast startup and predictable performance (for production release), the JIT compiler allows Flutter to inject changes without rebuilding the whole project. This significantly shortens the development lifecycle of a Flutter app.

[caption id="attachment_72503" align="alignnone" width="524"] JIT compiler with Dart VM for faster development, and AOT compiler in production for best performance and startup time

1. 1. Dart is a client-optimized language. The focus in front is important. It lets Flutter easily create smooth animations, and transactions run at 60 fps, with the goal of providing 120 fps performance on 120 hz devices. Also, Dart uses a declarative UI style that’s different from most other frameworks, from Win32 to web to Android and iOS*. This allows Flutter to create a user interface without any separated layout file like an XML or JSX file. UI components will be defined programmatically in a Dart file with readability and visualization. (*for more information, Apple also recently introduced a SwiftUI package that also uses a declarative style)
   2. Dart manages memory using fast object allocation and a generational garbage collector. Flutter rebuilds its UI components frequently (during every state change). The widgets were built, then destroyed again and again, that produce the numerous short-lived objects during the application lifecycle. That’s where the generational garbage collector in Dart plays an essential role in maintaining memory allocation.

The generational garbage collector in Dart for effectively managing short-lived object

1. Dart onboarding is speedy. Although Dart provides many modern features like ‘this’ constructor argument, shortened one-line function, and null safety operation, you won’t find a significant “wow” factor in the Dart syntax. This is because Dart’s team chooses familiarity over excitement. The goal is to make it so a developer can be productive on Dart immediately.

We’ve walked through the two main technologies of Flutter. Both the Skia graphics library and the Dart programming language are very mature with many advantages, which the market has confirmed. With that strong foundation, Flutter offers a lot of exciting features:

#Hot reload
Flutter applies changes immediately. We no longer need to wait for a long time to build the whole project every time we modify source code. That saves a ton of time in the development life cycle.

#Rich set of widgets that work consistently with all OS versions
As mentioned before, there are a bunch of built-in, modern widgets, including both Material and Cupertino design styles, which facilitate the development process and help you to write a beautiful application on different platforms.

#Native performance
With many advantages from Dart and Skia, which just discussed, there shouldn’t be any performance concerns with Flutter, at least in release or profile mode. In debug mode, the Flutter app runs with Dart VM and JIT compiler; therefore, it’s slower than usual.

#Productive
Dart is a powerful and productive programming language. Widgets in Flutter are expressive and highly extendable, Android Studio is a great IDE, and declarative UI works with hot reload, saving a lot of effort. These things make Flutter highly productive.

#Top documentation
There’s no complaint about Flutter’s documentation. They really do care that everything is clear, well- organized, and documented.

Flutter’s community has grown rapidly recently, but it’s still not as large as other communities like React Native. Flutter’s cross-platform open-source plugins are still in the building phase, so sometimes, you don’t have much choice. However, we see a lot of potential, many bright ideas and principles, and strong foundation technologies that make Flutter really promising in the world of cross-platform development.

Read more about other top-notch technologies:

The (R)evolution of Front-end JavaScript Development

Is .NET an outdated technology?

Mobile Automation Made Easy with Robot Framework and Appium