Flutter is the new kid around the block, and it came with a lot of new concepts and features.
Before we dive into learning more about Flutter and why is claimed to be the best cross-platform solution, we need to take a step back and look at existing available solutions.
Cross-platform frameworks allow developers to write one single codebase and run the same code on multiple platforms.
Big names such as Adobe, Microsoft and Facebook have attempted to solve the problem of duplicate codebases on both the Android and iOS platform.
Apache Cordova (PhoneGap)
PhoneGap initially created by Nitobi and later acquired by Adobe has been around for ten years and aims to solve the problem by allowing developers to write apps purely using HTML5, CSS3 and JavaScript.
This type of apps is called hybrid apps, a mixture of native and web development.
Xamarin (Mono)
Xamarin initially created by Mono, an open-source platform based on the .NET framework later acquired by Microsoft has been around for eight years.
C# is the language used to write Xamarin apps and is probably the one that comes the closest to Flutter; however, Xamarin also uses the bridge concept to map to UI elements.
Xamarin uses the Mono runtime to convert c# .NET to machine code, and it does support several processors: ARM, MIPS (in 32-bit mode only), SPARC, PowerPC, S390 (in 64-bit mode), x86, x86-64 and IA-64 for 64-bit modes.
React Native
React Native created by Facebook takes a similar approach to PhoneGap by using web technologies and makes use of the React framework and has been around for four years.
JavaScript is the language used to write apps due to the React web framework; however, React Native does not manipulate a virtual DOM. It does its job in a background thread (where JavaScript gets interpreted) for direct communication to end-devices using serialisation and bridge to native UI elements.
What do these technologies have in common?
They either use web views for UI rendering, or they use a bridge to map to native UI elements on both platforms Android and iOS.
Using a bridge sort of feels right because what you see feels like a native app; however, there are performance costs involved in bridging on top of the OS rendering engine, it can also delay development if such frameworks do not keep up to date with latest Android or iOS native development.
Another issue is that most cross-platform solutions do require developers to know native platform development (Android and iOS SDKs and programming languages, e.g. Java, Kotlin for Android and Objective-C, Swift for iOS).
Now that we know a bit more about these technologies, we can jump into how Flutter, the framework created by Google attempts to solve the problem.
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
Flutter is also the primary method for creating apps for the upcoming Fuchsia new open-source operating system by Google.
How does Flutter differ from other frameworks?
Flutter takes a different approach to other frameworks; it works more like a gaming engine and uses the Skia graphics engine to draw directly to the canvas.
Skia graphics library also serves as the graphics engine for Chrome OS, Android, Mozilla Firefox and Firefox OS.
What does that mean?
That means that Flutter widgets are drawn directly to the canvas, so Flutter does not need to use web views nor other OEM widgets. Flutter also comes packed with widgets for Android (Material Design) and iOS (Cupertino).
Flutter also aims to provide platform-specific behaviours such as animations, scrolling, transitions and more to give a more realistic native feel.
Dart is the language of choice by Flutter, which may come as a surprise to many Android developers, mainly because of Google support of Kotlin.
It was only two years ago at I/O 2017 that Google announced Kotlin as the first-class language for writing Android apps.
Now we may ask! Why did Flutter choose to use Dart?
One of the main features of Flutter is stateful hot reload, and that is only possible because Dart runtimes and compilers support the combination of AOT (Ahead Of Time) and JIT (Just In Time).
Dart VM JIT enables Flutter to support stateful hot reload for fast development cycles, which means code can be interpreted at runtime.
Dart AOT compiles to native ARM or X64 instructions set code; when you are ready to ship your product, Flutter will use AOT to compile to the specific platform.
Flutter supports 60 frames per second (fps) or 120 fps on devices capable of 120Hz updates, and that is mostly due to Dart capability of handling object allocation and garbage collection without locks.
Dart’s garbage collection and allocation scheme are fast and a perfect fit for allocating many short-lived objects, which is ideal for every frame.
Most programming languages support multiple concurrent execution threads (Java, Kotlin, Objective-C, and Swift). However, they use preemptive to switch between threads, if the preemption occurs when a resource is shared between threads (like memory) being updated, then this causes a race condition and the traditional way of solving a racing condition is by using locks, therefore preventing other threads from executing.
Threads (know as Isolates) in Dart is non-preemptive executed in single isolate and does not share memory, which avoids the need for most locks.
Thanks to Dart, Flutter does not need a specific declarative layout language like JSX or XML. Just as SwiftUI (iOS) and Jetpack Compose (Android), developers can easily create interfaces programmatically.
Another reason why Flutter chooses Dart was the ability to work closely with the community and the flexibility of the Dart team supporting Flutter right from the start; Dart improved in many ways over time with Flutter’s feedback.
Flutter is also based on the ‘unidirectional data flow’ pattern or reactive programming, meaning, when a variable/property is changed (the state), the UI is re-rendered to reflect the new state.
Benefits of adopting Flutter
Flutter is extensible with third-party plugins that can implement new UI components giving you the ability to create custom UI easily or by wrapping platform-specific features such as audio/video, bluetooth, camera, augmented reality, etc.
Flutter makes it easy to write platform-specific code using Platform.isAndroid or Platform.isIOS and wrapping platform-specific functionalities to your app or a plugin.
Because Flutter drives the UI rendering (drawing), you don’t have to worry about backward compatibility libraries like you do on Android and iOS natively.
Flutter runs on Android 4.1.x or newer and iOS 8 or later and supports mobile hardware (iPhone 4S or newer) and ARM Android devices.
With the hot reload feature, development can be much faster because we no longer have to wait for long builds on either Android or iOS, it only takes seconds.
Not Flutter-specific, but having a single code base can be beneficial in many aspects.
No code duplication over different platforms, testing needs to be done only once, and the QA process can be much faster.
Apps can be launched with feature parity from the start, therefore avoiding the risk of one being left behind due to one performing better in revenues, downloads etc.
Drawbacks
Flutter App size can be larger than native.
Flutter may not be the technology of choice for apps such as Games and that requires a lot of device-specific functionalities.
Development may take longer if plugins or functionalities are not yet available.
If Native UI changes, your app may look outdated if Flutter does not keep up to date with Material design or Cupertino; however, developers can replicate the widget or functionality themselves or if one is available from third-party.
Greenfield vs Brownfield
New Apps (Greenfield)
Flutter can work wonders if you are building something from the ground up as it’s tooling works flawlessly.
Existing Apps (brownfield)
There are some pitfalls as Flutter is still young and in constant development.
Flutter does not support multi-module import. Flutter does not support stateful hot reload when working within an existing app, for instance, where communication happens through channels. On Android Studio when the cache is cleared and invalidated sometimes you’ll have to add build types to match your existing configuration manually; otherwise, you’ll get compilation errors.
Things to consider when adopting a new technology
- Programming language
- Technical architecture
- UI Components
- Productivity
- Community
- Tooling
- Testing
- CI/CD
Programming Language
Dart is a fast object-oriented programming language optimized for UI supporting multiple platforms. Dart is relatively new and easy to learn, especially if you are familiar with C-style programming language.
Technical Architecture
On Android, the majority of developers use Clean Architecture, MVP (model-view-presenter), MVVM (model-view-view-model) or MVI (model-view-intent).
On iOS, developers use MVC (model-view-controller), MVVM or Viper.
For these platforms, there are clear and well known architectural patterns that have proven to work, however since Flutter is a new framework it feels like the community is still defining the standard or best architecture to use.
Flutter provides a lot of flexibility on how you can structure and architect your app, having said that, it can lead to large classes and missing architecture.
I found Flutter samples particularly useful for helping you decide on the architecture and therefore making your app more clean, scalable and maintainable.
UI Components
Supporting both Android and iOS native look and feel is very important, and Flutter did a great job there in mimicking the look and feel on both platforms.
Also, since everything in Flutter is a widget, you can easily extend and modify whatever you feel necessary.
There are also other third-party solutions coming to play, one that is gaining momentum is 2Dimentons. An online tool that allows you to create animations through their editor and use it within your flutter projects. You can also view and use other peoples artwork.
Productivity
One of the main benefits of cross-platform solutions is productivity; how can you reduce cost and speed up production?
For one, having a single programming language for either Android, iOS, Web or Desktop, you can pretty much have a pool of developers that can work on either platform, hiring becomes much more manageable.
Productivity not only has to do with technology but also with the tooling and community around it.
Flutters hot-reload feature and the combination of tooling and third-party plugins (Firebase, Redux, RxDart, internationalization, databases, routing, etc.) makes Flutter an ideal candidate for fast prototyping.
Having said that, the most challenging thing when learning a new technology is getting acquainted with the libraries, frameworks, tools, patterns and best practices.
Community
Although Dart didn’t have much success in gaining popularity, however, since the announcement of Flutter at the Google I/O 2017, the community has been multiplying, and meetups and conferences are taking place online.
As of this writing, Flutter’s Github repository has 76,282 stars compared to 81,449 of Reactive Native.
Tooling
IDE’s (Plugins) - IntelliJ, Android Studio and Visual Studio Code. Text Editors (Plugins) - Emacs, Vim and Atom.
Testing
Unit Tests:
test - Provides core framework for writing unit tests.
Widget Tests:
flutter_test - Provides additional utilities for widget testing.
Integration Tests:
flutter_driver: This is Flutter’s version of Selenium WebDriver (generic web), Protractor (Angular), Espresso (Android) or Earl Gray (iOS).
CI/CD
Fastlane with Flutter
Travis
Cirus
Gitlab - .gitlab-ci.yml sample file
Bitrise
Codemagic
Conclusion
Flutter pros outweigh the cons, and I think it is a fantastic tool for creating fast prototypes.
Startups or smaller teams can benefit from Flutters rapid development cycle and tooling to produce fast builds for both Android and iOS and reach a wider audience in no time.
I would not consider using Flutter with an existing project as the tooling around that is not great at the moment; however, if you are creating a project from scratch, I think there’s a lot of benefits there.
Since Flutter is a Google product aimed at supporting both Android and iOS, my main concern would be the long term feasibility of Apple vs Google and the likes of Apple restricting Flutter on their platform.
With that in mind, I do not believe Apple would do such a thing unless Google breaks its policies. Afterall other cross-platforms solutions do the same thing.
Another concern I have is that Google has a reputation for killing their products without caring about the community.
With the upcoming of Google’s operating system Fuchsia, aimed at running on any hardware, especially embedded systems with the help of their new micro-kernel called Zircon; Fuchsia will support Android apps and can already run on the following devices Acer Switch 12, Intel NUC, and Google Pixelbook.
Fuchsia’s user interface and apps are written with Flutter; with that in mind, I don’t think Flutter will go away anytime soon.
Will Android be replaced with Fuchsia? I don’t think so, we all know that Android is Google’s bread and butter at the moment, bear in mind that Chrome OS and Fuchsia supports Android apps.