Flutter is a new mobile SDK by Google for creating cross-platform mobile apps and it also has some other powerful capabilities. This article offers an in-depth look at Flutter’s advantages and disadvantages, its usage of Dart as the main language, and various development characteristics.
Unlike React Native and NativeScript, Flutter doesn’t use OEM widgets. Instead, Flutter uses a low-level graphics engine called Skia which manually draws a UI from scratch. This approach has its pros as well as cons.
- All UI of you create looks the same anywhere
In React Native it is a common problem. It is difficult to implement 100% equivalent UI, not only in different platforms but also within one platform. For example elements in TouchWiz (Samsung launcher) and MIUI (Xiaomi launcher) have different styles. Supporting old phones with old OS is another case. We don’t need to add more compatibility libraries to support new functionality.
- Supported Platforms
Flutter was created as an SDK for mobile platforms supporting iOS and Android.
Since the Flutter architecture is very flexible, the Flutter team is already working on compatibility with Desktop embedded (Windows, MacOS, Linux) and Web embedded. After the release of Fuchsia, a new mobile OS from Google, Flutter will also support it. And of course, you can also write your own embedded. (Example of custom embedded for Raspberry Pi. Video of Flutter running on an Nvidia Shield TV).
For development teams such as ours at Sphere, the multi-platform capabilities of Flutter give us a great opportunity to write code once or effectively share it between platforms.
- Cannot Reuse Existing Ecosystems
Flutter can’t show* (but will be able to in future) native views / OEM widgets in his “canvas”. As a result, it’s not possible to reuse all of the already existing components/modules created by those in the Android and iOS dev communities. In some cases (Charts for example) these are very difficult or time-consuming to implement from scratch in a pure Dart.
In React Native and NativeScript, it is easy to reuse existing iOS or Android components.
More about Native views*
Google is currently working on a mechanism for embedding native view (AndroidView, UiKitView) into Flutter’s “canvas”. This mechanism is for example used in a Google Maps plugin. It’s currently in release preview and there are some issues being worked out.
Flutter has one more interesting mechanism called Texture. Texture can help developers show some images that can be applied to the Flutter “canvas”. This technique is used in Camera and VideoPlayer plugins, OpenGL APIs and other similar image sources. This mechanism requires an additional layer (i.e. additional work for a developer who uses it) in the native side for both platforms – Texture Backend (Android, iOS) to control this image (e.g. transform camera buffer to images and apply to texture).
Flutter uses Dart as the main language, which is also created by Google. This usage of Dart is a strong plus for Flutter.
Dart is a flexible and high-quality language for several reasons:
- Simplicity and similarity to other languages
- Optional static typing
Dart has optional static types. Developers can use all of the benefits of static types in a big project, but also can quickly create some prototypes for presentation without using static types.
If developers need more operators, then RxDart is also presented.
Dart has an AOT (Ahead of Time) compilation. In comparison with React Native, it means Flutter don’t have additional costs in communication between the runtime and native side. In React Native limitations in “Bridge” are still a problem.
Flutter uses AOT only in production mode by default and JIT in dev mode => pass all performance tests and formulate an opinion about it only in prod mode.
- Runtime / JIT
Dart can also be a JIT compiled. It gives developers a hot reload and other features meet the needs of a fast development cycle.
Here is a great article about why Dart is so suitable for Flutter.
The core principle of Flutter is the same as in React – everything is a component (or widget in Flutter terminology) and UI is just a function of a state.
(state) => UI.
If a developer is familiar with React they already know these conceptions and can migrate to Flutter easily.
- Application architecture
Because people who use Flutter come from different platforms (React Native, NativeScript, iOS, Android), Flutter offers many ways how to build an app and manage its state.
Here a list of available approaches with examples.
Flutter is very young and can’t compete with React Native in terms of the size of the user community, existing modules and knowledge base, but it is already very popular and growing exponentially.
Overview of activity at StackOverflow in comparison with other frameworks:
Flutter has exemplary documentation. During development, most users do not have any issue with documentation. Also because Flutter is written in Dart developers can open source code and see implementation in a clear view to fully understand how it works.
Flutter has a great CLI, integrations with the most popular IDEs, and a large list of instruments for debugging your app.
From version 1.2 there is also a web-based toolkit.
Some important points during usage
- (+) It is easy to set up.
- (+) Offers smooth migration from version to version SDK (this is also a weakness of React Native).
- (-) It features hot reloading but developers can’t fully reload the app (like Cmd+R in React Native debugger).
- (-) Sometimes error messages on a screen not very useful and difficult to understand.
Read more about instruments here.
Navigation in React Native always a choice between flexibility and performance.
In Flutter the are no performance problems, and it is quite flexible. Also, we have some great features out of the box like shared element transitions (Hero animations in Flutter terminology). But standard navigation has limited standard functionality. It means you need to write many cases manually.
For example separate stack for each tab in bottom navigation. Here is an explanation of how to do it, but it looks like a hack and likely needs to be a part of core navigator.
Animations are another advantage in Flutter. It is pretty powerful and flexible. You can transform your app as you want because it just functions as a canvas. If compared to Flutter there are some limitations with React Native. For example, you can natively (why is it an important read here) animate only specific properties and can’t control width, height, and other important props.
- Over the air / dynamic updates
In React Native there is a great tool called
Here’s a summary in “plus/minus” format of Flutter’s key traits and capabilities.
- (+/-) Architecture – will be a plus after fully completed a native view part for extending existing libs from Android and iOS
- (+) Dart – great flexible language
- (+) Development
- (-) Ecosystem – only because it is young
- (+) Documentation – exemplary
- (+) Tooling
- (+/-) Navigation
- (+) Animations
- (-) Over the air updates
Flutter isn’t recommended for some projects, such as those based on a map – because native views (and Maps plugin based on it) are currently in release preview with issues.
Flutter is a powerful tool and is available for immediate use for multiple types of projects including:
- Small and medium-sized projects – for experience and obtaining expertise.
- Projects with rich UI, many animations, and equivalent UI in all platforms.
Flutter is very likely to grow quickly in the future due to its strong environment and capabilities.