Tech

Flutter: The New Emerging Framework for Cross-Platform Development in 2020

Flutter, What Is It?

Flutter is a cross platform application development solution.
It currently allows the creation of mobile applications on Android and iOS, and will in the future be able to generate these same applications on the web and “desktop” operating systems (Windows, MacOS, Linux).

The first “stable” version of the platform was released in December 2018 and has seen many fixes and improvements since.


Still, Flutter isn’t brand new. Indeed, the project has existed at Google since 2015 under the code name Sky and Dart. The Dart language on which Flutter is based was created in 2011 and has continued to evolve since.


While the solution is therefore rather young, it has been around in various forms for a while.

Today there is a real “hype” around Flutter.


The project is very followed by the community and, thanks to its orientation resolutely turned towards the performances and the graphic quality of the applications produced, it is also starting to attract the eye of professionals.

Our Feedback

After developing a few applications using Flutter, we saw very good performance on the screen, with a visual result close to native.


The animations provided by default already allow the user to enjoy a fun experience.
Getting started, as a developer, was pretty straightforward. You have to learn a new language, but the latter draws its inspiration from Java and Javascript, so you are not disoriented, whether you come from the native world or the Web / hybrid.


If access to certain features is not offered by an existing plugin, their development is quick and easy.

It may however be noted that the applications produced are larger in size than the same application developed natively, or even in hybrid (CORDOVA).


In addition, the youth of the platform implies, in particular at the level of plugins, a possible change in the implementation of the latter, and therefore requires significant monitoring.


However, the promise to create Android and iOS applications from mobile app development services with the same code base has been fulfilled.

The REX Flutter (Guaranteed without dinosaurs)

Flutter [fluht-er]

A newcomer to the world of hybrid applications, Flutter has quickly established itself as a tool to follow and to rely on in the years to come. Currently ranked 16th among popular GitHub repositories, we can notice that Flutter is more popular, technically, than React Native or Ionic for example.

Supported by Google, Flutter is currently aimed at players in mobile development wishing to maintain a unique code between iOS Android applications and allowing rendering and performance very close to native.

You should also know that Google’s desire is to extend support to the generation of “Desktop” and “Web” applications from the same code, to support respectively macOS / Linux applications (Windows port still in development) and the standard Web (HTML, JavaScript, CSS) but that these features are not yet stable (Alpha & Beta) and therefore cannot be used in production.

The Technique

Before launching into the details of our experience, and in order to better understand the rest, it is advisable to recall some technical points specific to Flutter.

The Framework

Flutter is a Framework (compatible with Android 4.1.X and iOS 8) which is based on its own Skia rendering engine (OpenGL or Metal for Apple) and therefore does not simply provide an overlay (wrapper) to the native components but indeed a library of Widgets which “emulates” (draws) the rendering of the various native components and even goes beyond what exists today in the iOS / Android catalogs. The construction of an interface therefore revolves around these customizable Widgets which have the particularity of succeeding one another and thus creating a hierarchical rendering.

Regarding the currently recommended architecture, there is mainly one pattern: “BLoC”. This concept is based on an essential component of Flutter: streams;it is used to manage different states in the application from events and to build a dynamic interface in response to a set of business rules.

Finally, be aware that knowledge of native environments (XCode / Swift, Android Studio / Kotlin) is required for project implementation because, like any hybrid project, you will sometimes need to configure a manifest or add “capabilities” directly to your project. application.

Language

It is interesting to note that to develop Flutter, Google chose the Dart language but that this choice was not made only out of interest but indeed as a result of a study involving more than ‘a dozen languages.

Here are the main reasons for this choice:

  1. Dart is AOT (Ahead of Time), therefore a high level language compiled into a machine language, which allows a Flutter application to be optimized for the architecture it targets.
  2. Dart is also JIT (Just in Time), which allows you to compile on the fly (used especially in the development phase) and instantly reload a modification without having to restart the application for each modification.
  3. Dart facilitates the creation of animations and transitions running at 60fps thanks to its management of memory allocations, garbage collector and the absence of shared memory (and therefore of locks)
  4. Dart is easy to learn because it is a modern language close to TypeScript for example and which has many similarities with Kotlin or even Swift.

The Ecosystem

Flutter has a very active community, as evidenced by the many updates (1 to 2 per month) of the Framework, and even has a platform dedicated to the inventory of its plugins called Pub.dev (like Packagist or Cocoapods). We will therefore find on this platform the official plugins as well as those developed by the community classified by popularity.

During our development, we were also pleasantly surprised by the quantity of articles / tutorials / videos available online and by the fairly large panel of subjects that are covered despite the relative youth of the solution.

And if, despite your research, you do not find what you are looking for, know that it is possible with Flutter to easily create a Dart plugin including an interface to native code (either iOS or Android, or both) and that the development can be done in a standalone, testable and debug-able module from your favorite IDE before being integrated into your main project.

Our Project Experience

Following the study of Flutter, we therefore decided to use this solution to produce 2 new applications (Android 7+ and iOS 10.3+) for the ambitious update of a project lasting several months comprising 4 developers.

This project being a game, its specificity was to have a common interface between iOS and Android with a fully personalized design as well as atypical navigation (no push / pop of standard view as we can see in native).

Major Features

All of the features below have been integrated with either the official plugin or a community plugin and for some you will find more details.

  • InApp Purchases – Play Store / App Store:  This feature is one of the few that required a specific code per platform from the plugin. In spite of everything, the code remained on the Dart side and a simple if (Platform.isIos) makes it possible to distinguish the cases and to process the catching up of purchases according to the specificities of the platforms (indeed the plugin provides a wrapper on the purchase objects specific to the OS).
  • AdRewards Firebase
  • Live2D:  Management of 3D models in the game using WebGL, inclusion of a fork of the Webview plugin to manage transparency.
  • Push & local notifications:  Use of the Firebase Cloud Messaging plugin.
  • Tracking:  AppsFlyer & Google Analytics
  • Unzip packages (3D models)
  • Read / write REST API (JSON):  The Dio library allows you to make HTTP calls and use Retrofit as well as a JSON module to generate code from annotations and thus retrieve ready-to-use classes. Note that the use of generator is very common with Flutter because introspection (reflection) is not possible with Dart.
  • Facebook & Apple authentication
  • Music / sounds: Integration of interface sound effects as well as music from Web services after downloading.
  • i18n: (6 languages) We started with a plugin allowing to include translations in JSON format and managing the change of language from the application.
  • Need to have a lot of entertainment
  • Build on different environments: (dev & prod) solution developed via a library that we created for environment management by JSON configuration file.
  • User preferences:  We have developed our own plugin for this part because the proposed official plugin prefixes all the keys and therefore does not allow to recover the already existing data of the previous application.
  • Google Play Games & Apple Game Center:  we also developed our own needs, this time from an existing plugin fork that allowed connection but not data backup on native clouds.

As you can see above, we had to integrate a lot of features and for none of them we got stuck or encountered any particular difficulties.

Architecture Adopted

The scope of our project pushed us to adopt a modular division in order to better separate the tasks and allow the reuse of certain modules in future games. One will thus find the following diagram to represent the total division:

On the functional architecture side, we started with the implementation of the BLoC pattern on our various modules, all orchestrated by filters on event streams to simplify the general workflow and to allow the different modules to subscribe to particular events. and react accordingly while ignoring the rest of the system.

Also note that the multiplication of modules revolving around the main application did not have a noticeable impact on performance during development, and that the support for changes in a module was well taken into account during hot reloading in the application launched.

Regarding the UI part, as indicated previously, we did not use standard navigation for the simple reason that the screens were not constructed in this way. We therefore ended up with a stack of views allowing us in turn to give priority to display of certain elements of the game over others without disturbing the progress of the game. To summarize, this gives the following diagram:

where we see that the errors are displayed at the highest level, followed by possible modals, then blocking of the login part if necessary; and finally the different game interfaces, from the menu through the dialogues to the Live2D representation as a visual root.

Our Results

The Most

The points that excited us the most:

  1. The fast learning curve of the Dart language.
  2. The immediate hot reloading of the code is a great strength for the construction of the screens and the development phase.
  3. The automatic management of several animations has allowed us to offer a better user experience than usual.
  4. The extreme customization of components without difficulty.
  5. Richness of the Widgets catalog that surpasses native support.
  6. The technical environment (Visual Studio Code, Android Studio) and the very powerful and easy-to-use Dev Tools.
  7. A free architecture to design (unlike some frameworks like Angular to name but one).
  8. Rich documentation and numerous written and video materials.
  9. An active community.
  10. Perfect homogeneity between the iOS and Android platforms thanks to the use of a rendering engine.
  11. Regular updates (e.g. release the day of the release of iOS 14 to alleviate a build problem).

The Lesser

The mixed points:

  1. Compilation times are linked to native commands (gradle, cocoapods, XCode) and it is therefore better to have an i7 processor so as not to waste too much time on each build
  2. The community although active, is still not mature in terms of content and will therefore not systematically offer a plugin adapted to your most specific needs.
  3. Still requires a native referent for the implementation of the project see the configurations of certain plugins
  4. Watch out for the hot reload which tends to lose its hierarchy when you change a Widget from “Stateless” to “Statefull” and vice versa, or when you add blocks after displaying a screen; sometimes you have to restart the application before concluding that the produced code does not work.
  5. We encountered crash issues that we were unable to resolve on iOS with phones not supporting 64bits architecture and therefore excluded them from support (concerns iPad Retina, iPhone 5 & 5c for versions 10.3 +)

Neutral

Finally, two points on which we had no particular expectations in terms of efficiency and which in the end are neither disappointments nor clear successes:

  1. Responsive management on our project, being compatible with phone and tablet, was like on all platforms, carried out on a case-by-case basis and required choosing breakpoints to adapt fonts, element sizes or other.
  2. The final weight of the application is also very respectable since it is very close to the final size observed on native platforms, so no bad surprises on this side.

Conclusion

Despite our past as a developer on different technologies (mix of back Php, front JS, Android, iOS, or hybrid developers) it was unanimous that development on Flutter was a real pleasure and a real success. Add to this a simplified management of schedules and tasks due to the fact that Flutter is hybrid and you will understand then will continue to support and propose projects around this tool.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close
Close