Why we Chose Flutter as One of Our Cross-platform Development Toolkits

“Please, I’ve already heard all the marketing stuff from other agencies. Could you tell me how exactly Flutter can ensure the stability and high performance of my app?” – said the client at the very beginning of our first meeting.

That was a conversation from two years ago when Google’s Flutter was new in the mobile development world. Sometimes I heard the opinion that Flutter would be just one more “flash in the pan” solution in the cross-platform world. Fortunately, that didn’t happen. 

This article describes why we chose Flutter as one of the cross-platform development toolkits, and what components make it an optimal choice.

Single Codebase for Any OS

Based on my experience, the cross-platform app development approach is commonly used in three cases:

1. If it is required to develop an app within a short term. 
2. If the app logic is frequently being changed. For example, when business requirements are dynamically adapting to the market.
3. If native app development has any limitations.

As most cross-platform solutions, Flutter allows having a single codebase for all chosen operating systems, but it’s not the principal value. Since everything in Flutter is a widget, the code is a markup. 

We had a case when the client addressed us with the proof of concept solution for iOS and Android. Having no documentation, but a focus group, he aimed to test the app’s concept before building a full-fledged system. We chose Flutter as an optimal solution allowing him to change the app’s logic dynamically.

The cycle was as follows: we built a specific part of the functionality, then the client tested it with the focus group, and got back with the number of changes or next steps. Since the code was changed only in one place for all operational systems, we rapidly reacted to new requirements. Thus, the client got the PoC solution based on users’ needs within four weeks.

Flutter Stability

Flutter’s code is compiled into the ARM code for the CPU. With its own rendering engine, Flutter apps are not affected by any OS update or system customization. They will still look the same in terms of the interface even after an iOS or Android system update.

Version compatibility is another aspect of influencing stability. As a rapidly growing toolkit, Flutter does not change its API and development approaches. The code written two years ago might be reused in newly created apps.

Smooth Development Cycle – Rapid Results

There are many features in Flutter app development toolkit that simplify the development process for engineers, but depending on the experience of Flutter-based projects, I’d emphasize the following:

Business Logic Components (BLoC)

Flutter’s ideology is based on the reactive programming that supposes streams. This architecture pattern is called BLoC (Business Logic Components). Such architecture allows separation of the app’s user interface from the business logic by using streams.

It looks like this:

The core value of BLoC architecture pattern is its reactivity, and independence of UI from data. Compared to other architecture patterns, where UI may be loaded with delays, the BLoC pattern prevents delays in the app’s performance by utilizing structuring, async methods, and streams. It means that animations and screen scrolls will work smoothly, while data is loaded from the server. 

We have been using BLoC pattern architecture for two years. It is the best fit for apps with complex architecture and a significant amount of data. But in those cases, when the app’s architecture is simple, we also use the Provider pattern that gives lazy-loading, simplifies the resource allocation, and increases scalability for classes.

Hot Reload

The Hot Reload feature works on a virtual machine, and then Flutter compiles the Dart code into a Native one. When changing anything in the code and making a reload, your app is not reloaded entirely. Since all the widgets are immutable, the reloading process is undertaken only for those screens you are currently working on. Therefore, according to our calculations, the total development time can be reduced by 30%.

Code architecture

The amount of nested objects in the Flutter code does not influence the final performance and responsiveness. It’s because there are no recursive calls when processing layout. 

For example, if there are plenty of widgets compiled in the native app – it probably would affect the app’s performance. But with Flutter, it is possible to implement UI/UX design of any complexity, stylization, and onboard plenty of widgets.

Being one of the cross-platform languages, Dart is object-oriented and strongly typed. By checking types matching, it uses algorithms to control the correctness of code. Since the infrastructure includes the garbage collector, thus, there is no need to monitor the memory storage. It is done automatically.

Flutter supports multithreading, where threads are called Isolates. When starting to code in Dart, only one primary Isolate is referred to as the UI Thread. It is the right solution for long-running tasks that should be processed along with the smooth running of the whole application.

Dart can be compiled into the native code in order to enhance app performance. When making builds, it is not only being compiled into the code for ARM and x86 processors (Ahead of Time), but also can be translated into JavaScript and support dynamic compilation during the runtime (Just in Time).

DartPub

Since Flutter utilizes Dart programming language, mobile developers commonly use the DartPub as a package manager because it contains many reusable packages and libraries. When choosing any plugin, you can see not only its popularity but also the code’s health and maintenance. It is valuable when developing custom features – it’s not as important to choose plugins by the popularity rate as to see that the code is being regularly updated and checked. The plugin itself may not be that popular, but if you have some unique software features, it is possible to choose it depending on the code’s health. 

The concept of libraries in Flutter – it’s a strong side. There’s no “magic” hidden inside: even using external lib, engineers keep full control and ability to adjust it. Moreover, sometimes there’s a need to develop own libraries with custom functions. An example of such a case was the educational project where we developed the plugin to play audio files in the background.

The golden rule for app development, whether Flutter-based or any other alternative, is always to explore and double-check any library before using it.

Flexible Customization of Flutter-Based Apps

UI kit for every need 

Google introduces a robust widget catalog for UI development, including Material, Cupertino, and Foundation specific widgets, that are useful when you want to develop custom themes.

The UI is adaptive to version updates because the standard Flutter’s kit includes a wide range of elements enough to build an app without any third-party libraries integration. Any UI element can be easily changed at any time, which is especially useful when developing PoC solutions. 

Pixel perfect match

Once developed, features will look exactly like in a simulator. Flutter uses the Skia rendering engine, which supports iOS, Android, macOS, Windows, and Ubuntu. It means that the app will look identical on all devices.

By working directly with the GPU canvas, Flutter does not have an OEM widget and dependency on native code, thus, ensuring a pixel perfect match between the desired UI and rendered one. The app will look as the designer and client intended, but how the platform allows it to be created.

Flutter App Development for Web

Since the Flutter code can be compiled into Javascript, it is possible to have the same codebase for Android, iOS, and for the web version of an app. As I see it, there are three cases when Flutter is the best fit for web applications: 

1. When porting some mobile apps into the web because you have almost 100% code sharing. 
2. When having non-standard web interfaces. 
3. When it is required to create an extensive functionality for complex enterprise solutions within a short period of time.

Although Flutter provides many tools for creating web applications, its web support is still in the early stages. Thus, when deciding whether to build a web-based app with Flutter, it is important to understand that there are still possible issues with stability.

The Flutter’s feature list is not limited to those described above. I decided to tell you about these features because they have been proven with our experience at MobiDev. And real practice, as we know, is often more important than just theory.

Written by Yuriy Luchaninov, JavaScript Group Leader MobiDev. This article is based on our technology research and experience providing software development services.

Previously published at https://mobidev.biz/blog/flutter-app-development