How Flutter is transforming Mobile App development – Features and Challenges

Flutter is an open-source mobile application development SDK created by Google. It is used to develop hybrid applications for Android and iOS, as well as being the primary method of creating applications for Google Fuchsia.

In essence, Flutter is a framework that allows one to create native apps on both Android and iOS without the usual compromises that come from cross-platform frameworks. This basically works on the principle, “write once, run anywhere,”.

Flutter vs other Cross-platform apps

The main compromises that one has to do when building cross-platform apps is that these apps are often slow because they run through a code interpreter (often JavaScript) instead of just being compiled native ARM code. Another big one is that these apps don’t often look or feel native because they use different buttons or widgets, etc.

Flutter has some innovative ways to avoid those problems. The most important one is that it compiles to native code - i.e. we can write to platform-specific code by either executing different code after checking Platform.isIOS and Platform.isAndroid or writing our own native plugins. Another is that the apps made with it can look and act like any other native app — in fact, they’re “pixel-perfect” when compared to what is seen on the development environment’s emulator window and what shows up on an actual phone. 

Flutter uses the same codebase to create both iPhone and Android app, yet they can look different, so we don’t have something on an iPhone that feels like it belongs on Android (or vice versa).

The Framework architecture of Flutter includes major components such as:

• Dart platform
• Flutter engine
• Foundation library
• Design-specific widgets

Dart platform

Flutter apps are written in the Dart language and make use of many of the language's more advanced features running on just-in-time execution engine.

Flutter engine

Flutter's engine, written primarily in C++, provides low-level rendering support using Google's Skia graphics library. In building our enterprise app, we interact with Flutter via the Flutter Framework, which provides a modern, reactive framework, and a rich set of platform, layout and foundation widgets.

Foundation library

The Foundation library, written in Dart, provides basic classes and functions which are used to construct applications using Flutter, such as APIs to communicate with the engine. We have leveraged an extensive set of these, rapidly developing our own as needed, to integrate a complex set of varied applications to our app.

Design-specific widgets

UI design in Flutter typically involves assembling and/or creating various widgets - Material design for Android and Cupertino Widgets imitate Apple's iOS design. Our app uses complex widgets that we have created by leveraging the combining many simpler ones. We have also used the option of leveraging the Foundation library's methods directly, interfacing with "canvas" commands to draw shapes, text, and imagery directly to the screen.

A key feature in the Flutter framework that has boosted our app development is the 'Stateful Hot Reload feature'. This feature lets us build UIs more quickly and easily. It injects updated code into running Dart Virtual Machine, enabling quick reflection of the changes and fixing of bugs.

Challenges while using Flutter

Use of Product Flavors – One of the major challenges that we faced in building our multi-market Flutter App was in the implementation of 'Product Flavors' in Flutter. Product Flavors is a technique used to localize the various version of the app. This was a major requirement for our App and the cons of using Product flavors with using Flutter were, 

• limited support for flavors
• implementation as a workaround only, 
• lack of support to build extensive features etc. 

Lack of Continuous Integration Support - For now, flutter it is not widely supported by CI platforms like Travis or Jenkins. So, to achieve automatic building, testing, and deployment, we had to build and use custom scripts.

Large File Sizes even for an MVP – We noticed that even including the bare minimum of widgets, that support our MVP, the app size was approximate 17MB

Lack of Plugin Support – It’s probably just because Flutter is much newer and with a smaller community but that’s how things are now. Choices are limited, and many plugins are old, not maintained, and maybe don’t even work anymore with the current Dart/Flutter versions. We also noticed that the components library was smaller and non-inclusive when compared to React Native.

Troubleshooting – We noticed that the error screen or logs that you get when there’s a layout error (or something else at a lower level) can be very confusing and obscure and required quite some troubleshooting time to understand and resolve.

If you want to know more on Flutter, schedule an appointment with our Solutions consultant today.