Flutter Review – Cross-Platform Technology from Google

Typical mobile app development in itCraft is a dual process. Two teams o developers work consecutively on preparing the app for iOS and Android platforms. Current alternatives to this process are multi-platform developments the likes of Xamarin, React Native or PhoneGap. They allow the building of apps for both Android and iOS with the use of the same code. Facebook’s own React Native is becoming increasingly popular with a growing community and good support from its creators. It allows writing of the app’s code in JavaScript, and then build the software using native components prepared for each of the systems. It allows developers to write their own elements of the app, according to needs. It is a huge step forward when compared to eg. PhoneGap which, in essence, simply shows the UI as an HTML site.

React Native is not the ultimate tool and still falls short when competing with native technologies.  Low efficiency, large file sizes, poor choice of standard libraries, issues with managing the look of UI across the systems make it a choice for specific, low requirement developments.  You can read  about pros and cons of react native in our blog.

Table of contents

1. New player on the market
2. Before you set off…
   – Technology comparison
   – Hi, I’m new here
   – Features of new cross-platform technology from Google
   – The block architecture
3. The downside
4. Flutter app vs React Native app
5. Bottom line

New player on the market

Flutter is one of the younger players among the cross-platform technologies. Google, the creator of this new open source solution, promises beautiful apps, developed quickly without compromising on efficiency when compared to native developments. Having finished a React Native project recently, I decided to review how Google’s offering manages to deliver on these promises.

Before you set off…

Flutter is doing best it can to encourage the app developers to learn the new technology. The official website contains assurances of the framework’s ability to bring beautiful, responsive apps to life in record time. You will find broad documentation on how to configure your environment, lessons on the basics and plenty of useful examples.

Technology comparison

A special section clarifying and explaining the technology by comparing it to others, like native iOS and Android, React Native or Xamarin is a positive surprise here. The articles show similarities and differences between Flutter and its known peers and can provide valuable insight for first-timers.

As an Android developer,  I learned a new approach to asynchronicity, component cycle management and UI building with Flutter. The Flutter team’s presentations for Google I/O conference are also available. Integration with popular IDEs gives your Flutter quick start an extra boost. For all Xcode, Visual Studio Code and Android studio users can start their work seamlessly using their usual tools. The ease with which you can start working with this new platform and build Flutter apps comes as quite a surprise. Usually starting an adventure with new technology is an arduous process, but Google seems quite aware of this and takes great care to make the process as comfortable as possible.

Hi, I’m new here

What can you expect from Flutter coming from the native, Kotlin and Java based Android environment? The apps’ code is written in Dart, a programming language also developed by Google.

Asynchronous programming is a bit of a surprise. The program created in Flutter works on a single thread, and the execution of timed operations uses the async/await model, which doesn’t move the task outside of the thread but only suspends it without blocking other parts of the program. This saves you the trouble of switching between threads, writing code to service the operations and helps avoid errors.

Features of new cross-platform technology from Google

Switching from Java may come as a bit of a shock at first, as traditionally, in Android, you just moved long-term operations into the background and after completion, moved it back to the UIThread. For all those familiar with Kotlin, the similarity with Coroutines will be quite obvious.

In Flutter some tasks, like image compression or saving to file will require separate threads. For this, Dart uses Isolates, utilizing other CPU  cores. Isolates separate given code from the main memory and disable it from changing the UI state. This lets us avoid errors resulting from dividing memory between multiple threads.

Another interesting difference (to Android) is the use of declarative UI building in Flutter. Android uses the imperative style by default – defining of actions that will change the internal state of the program. First we define the view structure in XML file, from which the system creates mutable view objects. If we want to eg. change a piece of text on the screen, we need the element reference and then we can change the field containing the text. We do the same for each attribute – color, size etc.. We define what needs to be done to get the desired effect.

nameTxt.text = user.name
nameTxt.color = user.statusColor

In the declarative approach, we directly define the look of the interface depending on the state. In Flutter, the Widget objects representing interface elements, are not mutable. This means that to change an element shown on screen we need to build the corresponding widget anew. The framework manages the state of the RenderObject elements, storing them in the memory and changing their state based on newly constructed Widgets. With this approach, the developer’s task is to describe the look of the screen at a particular state, not to write methods to modify them.

return Text(
  text: user.name,
  color: user.statusColor
)

The block architecture

Using legible architecture is crucial when working on large projects. Flutter documentation refers to various examples created by the community.  In terms of UI building, Flutter is strongly influenced by React, and developers familiar with this framework will most likely use Redux for managing internal states of the application.  Although not my personal favorite, Redux is a popular lib and easy to use with Flutter.

ReactiveX is a popular solution used by mobile developers for managing the events’ flow in the app using streams. We can use those when writing in Flutter thanks to RxDart library and the StreamBuilder Widget. The documentation contains examples implementing BLoC layout. It similar to the MVVM – the UI emits user input data via streams. The data is then received by BLoC, which is responsible for the business logic. Here, the data is saved to memory, sent to the backend and processed to generate a new state. It’s a collection of data that flows further to the UI elements in order to show the effects of a given operation.

The community prepared examples of implementing both these patterns for web and mobile apps to speed up the onboarding process of working with this framework.

The downside

So far, so good, but Flutter is not yet the perfect tool. In my review, the first issue I noticed is the lack of a component for communicating with a local database. We get the access to plugins allowing saving of files, key-value pairs, but when needing to save data in a relational DB, an external tool is required. So far I found the sqflite project which simplifies execution of CRUD operations and DB version management. It does not contain a DAO mechanism though. Base building commands must be written, and synchronizing with classes representing table inputs must be done manually.

Flutter app vs React Native app

Flutter is the first cross-platform technology I had closer contact with. Working on a React Native-based project has made me rather cautious towards this type of a tool. Since Flutter is largely inspired by React Native, I was expecting to be disappointed. Few things make Flutter appear more attractive at initial contact. RN doesn’t offer much in terms of documentation – Flutter rectifies this on a very satisfying level. Environment configuration for Rect Native is complex and there’s a rather poor choice of standard libraries forcing developers to look for 3rd party, external solutions.

Flutter offers ready UI elements, adjusted to Cupertino and Material Design standards. The catalog of default Widgets is impressive and well described in material.io. These make it a more attractive alternative to React Native.

Bottom line

First impressions working with Flutter are largely positive. I like the level of Google’s support, with solid documentation and well designed onboarding process. For all developers familiar with popular mobile technologies, tutorials made by their peers will make adopting Flutter much easier. You can plainly see that Flutter is a serious project and its creators are trying hard to encourage developers to try it. This solid base, accompanied by growing community writing tutorials and building libraries, puts Flutter app development quite high among the emerging cross-platform technologies.

Read more:

Flutter vs React Native – cross-platform frameworks comparison
Top 4 technologies to develop your app in 2022