Why Mobile App Developers Should Consider Flutter

Flutter Business Case

Flutter is Google’s platform for building cross-platform mobile applications from a single, compiled codebase. It uses the Dart language for development and can also target the desktop and web from a single codebase. It uses a reactive, component-based development architecture that’s easily tested and scales well, especially when used with the Bloc pattern for state management.

Productivity

We’ve been using Flutter for over 12 months, and we’ve found that there are some significant productivity gains derived from faster app development using the cross-platform single codebase to produce both Android and iOS apps simultaneously, the reduction in the amount of app testing required, and the excellent hot-reload feature.

Creating exactly the same app is on each platform simplifies QA processes, which means you test less - the same tests will run on each platform. Because Flutter’s widgets are rendered by Flutter platform rather than the underlying operating system, there are fewer complexities and compatibility issues compared with React Native. And the app UI will look the same on older Android and iOS systems, so supporting older devices is easy.

Dynamic development and hot reload

Flutter is well suited to MVP prototyping and rapid iteration - you can experiment by changing your code while the app is running (hot reload), so there’s no need for developers to waste time rebuilding the app. You can update code and see your changes reflected immediately in the app (usually less than 1 second).

You can experiment by creating new features and bug fixing without the time-consuming compile and run overhead of native iOS and Android. Collaboration with UX/designers can be more interactive and real-time (rather than working via asymmetrically via static designs).

Performance

Flutter is fast - it’s natively compiled to ARM or x86 code and therefore doesn’t require the overhead of a Javascript bridge. Other cross-platform SDKs are a wrapper around native methods, meaning slower mediated communication between the app and platform. So when dynamic languages such as JavaScript need to communicate with the platform native code they have to use a bridge which causes expensive context switches. A large amount of state has to be saved to secondary storage - resulting in slow performance and less smooth animations and transitions.

Flutter is also fast because it renders its own widgets and UI architecture,  so there is no need to access OEM widgets on Android or iOS platforms across the JavaScript native bridge. Flutter also compiles to native code. Because of all the above app startup time is also usually much faster.

By comparison, React Native actually uses interpreted JavaScript code and is forced to pass all rendering instructions through the Native Bridge to be rendered by the OEM widgets on the other side of the process boundary.

Better quality apps without cross-platform compromises

Apps created using Flutter feel smooth and fast. Compiled code doesn’t have to go through the Javascript Bridge, so 60fps animations and transitions are a lot more straightforward to implement than in apps created using other cross-platform tools. Flutter also breezes through large lists and datasets, which have always been difficult to run smoothly on React Native.

Comparison with React Native

It’s useful to do a direct comparison with React Native. it’s been around since 2015 and is due for an overhaul, but it’s one of the most commonly used cross-platform SDKs.

‍Widgets are part of the app, not the platform

In Flutter, widgets are rendered by the app and not the underlying platform. Most of the widgets are adaptive so you use the same widget across both iOS and Android, resulting in fewer or no compatibility issues on different OS versions, and so less time spent on testing. A platform-specific look and feel is still possible using the 1st party Cupertino (iOS) and Material (Android) widget sets.

React Native is best suited to simple user interfaces

Flutter natively renders and extensive widget set means that it can handle both animation and complex designs, where React Native is more suited to simple user interfaces

Reduced maintenance overhead

Our experience has found that the maintenance overhead of React Native apps can be quite high, whereas Flutter seems comparatively straightforward. Flutter and the majority of what’s needed to build an app is developed and maintained by the 1st party (Google). It’s very much batteries-included.

With React Native  you spend a lot of time managing updates to the frameworks and dependencies and tend to have hundreds of 3rd party packages. A lot of the major functionality required for modern React Native apps is actually provided by 3rd party maintainers.

npm install example

We ran npm install from the base React Native app:https://github.com/react-community/create-react-native-app

And we get:

So basically even the most basic “Hello World” React Native app includes 599 packages from 337 contributors. That’s a lot of packages to keep track of! And more importantly a lot of packages to update and test during the next iteration of the app.

Flutter pros:

Flutter feels like a modern cross-platform SDK:

• stateful hot-reloading is fast and stable, meaning you can make changes in your code and see the result almost immediately
• end-to-end testing is easier
• you get the same result on both platforms - React Native has options available on iOS but not on Android or or vice versa
• the framework is more complete with many powerful components
• you don’t have to rely on libraries that are often not maintained

Flutter cons

So are there any issues with Flutter?

• there is no built-in Continuous Integration platform support so you either have to write your own scripts, or rely on a couple of recently introduced third party tools from Codemagic and Bitrise
• although the libraries and widgets are relatively complete, native development can offer a richer solution, which means that you sometimes need to build your own functionality
• the app download size can be larger than native iOS or Android
• Dart is a new programming language - but if you have JS / Java programming experience it’s really easy to pick up

If you are considering having an app developed for your business and one built using Flutter, please get in touch with us