Flutter : Future ‘Bread & Butter’ of the Hybrid Mobile AppLication Development

On 4th of December,2018 Google hosted Flutter Live event to celebrate Google’s mobile SDK, Flutter and its first stable version.
Google’s own open-source mobile application development framework, which builds applications for Android and iOS. Initially being a
lab tool for creating applications on Google Fuchsia(Google’s Desktop applications) was made available as a hybrid platform for all.
Flutter produces apps based on Dart Language, offering apps with high performance that run at 120 frames per second. Flutter offers
a Vulkan-based graphics rendering engine called "Escher", with distinct support for "Volumetric soft shadows", an element that Ars
Technica wrote "seems custom-built to run Google's shadow-heavy 'Material Design' interface guidelines". The first version of Flutter
was named as "​Sky​" and ran on the Android OS.

What is Flutter ??? What it is made of ???

Flutter are mainly split into 4 major components.

Dart Platform:
Flutter apps are written in the Dart language, which was built from many of
the programming language with more advanced features. ​Primarily targeted
for Android and then for Windows, macOS and Linux via the semi-official
Flutter Desktop Embedding project, Flutter runs in the Dart virtual machine
(​DVM​) which features a just-in-time execution engine. Due to restrictions on
dynamic code execution by App Store (apple), Flutter apps use
ahead-of-time (AOT) compilation on iOS.
A notable feature of the Dart platform - "​hot reload​" where any change to
source files can be injected into a running application seamlessly. Flutter
additionally support stateful hot reload, where changes made in source code
reflects immediately in the running app without restarting or any loss of state
in most scenarios. This feature brought in a lot of appreciation for Flutter in
the world of mobile development.
Flutter Engine:
Flutter's engine, provides low-level rendering support with the help of Google's Skia graphics library , written primarily in C++. Also, it
stands as the interfaces between platform-specific SDKs provided by Android and iOS. The Flutter Engine acts as a portable runtime
for hosting Flutter applications. It also includes Flutter's core libraries such as file handling, network I/O, accessibility
support,animation,graphics, plugin architecture, and a Dart compile & runtime toolchain. Developers mostly interact with Flutter via
the Flutter Framework, which provides a modern, reactive framework, with a rich set of platform, layout and foundation widgets.

Foundation Library:
The basic classes and functions such as APIs to communicate with the engine​ ​are provided by the foundation Library act as a base
to build applications using Flutter.

Widgets:
In Flutter, UI design is simply assembling or creating various required widgets. A widget in Flutter is nothing but an immutable
description of part of the user interface; all graphics elements such as text, shapes, and animations are created using widgets. More
advanced widgets can be recreated by bringing many simpler ones together.

What’s happening in Current market ?

There are around 2.6 million apps in Google’s PlayStore and 2 million apps in Apple’s App Store as of the third quarter of 2018.
Surprisingly, there is no decline for the popularity of mobile apps seems over the recent time. There a lot of apps that are being
developed and deployed on the leading app stores day-by-day. Apart from native app development, cross-platform app development
and hybrid app development has become prominent among the app developers and business professionals.
Each framework has its own unique architecture to build apps with their own pros and cons. While native apps deliver superior user
experience, cross-platform and hybrid apps designed are to save time and cost along with providing faster time-to-market.
Who are the Game Changers in market ?
The below chart explains who all are the hybrid application development game changers in the market in a comparative manner

Xamarin Apache Cordova

Flutter React Native
(Xamarin.Forms) (formerly PhoneGap)
Language Dart JScript C# HTML, CSS3, Jscript
Developers Google Facebook Microsoft Adobe
Initial Release Late 2018 Mid 2015 Late 2012 Late 2009
Current Release 1 0.59 Xamarin.Forms 3.6 CorDova 9.0.0
Release date 30 Nov 2018 12 Mar 2019 5 Mar 2019 18 Mar 2019
Native
Superior Better Good Good
Performance
Time taken to
Launch app in Faster Fast Slower than React Native Slower than React Native
Market
Up to date and clear But Up to date and clear But Not Up to date and clear
Documentation Precise, clear, up to date
not Precise not Precise But not Precise

Google Ads, Alibaba, Pacifica , Sworkit ,

Facebook , Facebook Ads, Storyo, Just Giving,The
Reflectly,Birch Finance, FanReact, JustWatch,
Walmart , Bloomberg, World Bank, Olo, Insightly,
Hamilton Musical, Coach Gudog , Series Seven,
Instagram, SoundCloud FreshDirect,Skulls of the
Who uses them Yourself, Hookle, Keepe ,Clever Baby,
Pulse, Townske , Shogun,SuperGiant
Watermaniac, Buildr,Graded,
Gyroscope , Wix , Games,APX, Thermo
Cryptograph, SG One Verse BIBLE,
Delivery.com Fisher Scientific
BusTracker SparkChess

Open Source/ Visual

Pricing Open Source Open Source Studio for commercial use For Corporate $900/Year
$599 - $2999/Year
Why Flutter ?
Its architecture is very simple and powerful when compared with its predecessors. Let us see them now.
Virtual DOM came into existence thru Libraries for reactive web views. DOM is nothing but HTML Document Object Model, an API
used by JavaScript to manipulate an HTML document, represented as a tree of elements. JavaScript is used as Virtual DOM , an
abstract version of the DOM created by objects in a programming language.
In ​Reactive web views (implemented by systems like ReactJS and others) the virtual DOM is immutable, and is built again from
scratch each and every time any changes are done. The virtual DOM is differentiated to the real DOM to generate a set of minimal
changes, which are then executed to get updated in the real DOM. Finally, the platform re-renders the real DOM and paints it into a
canvas(screen).
This looks like a lot of extra effort, but it is worth
because manipulating the HTML DOM is very costly.
React Native does a similar thing in mobile apps. It
processes the native widgets on the mobile platform.
Instead of a virtual DOM, It builds a virtual tree of
widgets and compares it to the native widgets and
only updates those tree that have changed.

In Mobile Development the ​ReactNative​ works as shown below.

It has to communicate with the native widgets through

the bridge every time when change happens, so the
virtual tree of widgets helps keep passes over the bridge
to a least possible, while still allowing the use of native
widgets. Finally, once the native widgets are synced, the
platform then renders them to the canvas.
React Native is a big win for mobile development, and
was an inspiration for Flutter, but Flutter takes one leap
further.
 In ​Flutter​, both the widgets and the renderer are embedded into the
user’s app. There are no native platform widgets to manipulate, so
what was a virtual widget tree is now the widget tree itself.
Flutter renders the widget tree and reproduce it to a platform canvas.
This is nice and simple (and fast). In addition, animation happens in
user space, so the app (and thus the developer) have more control
over it and works seamlessly

Advantages Of Flutter Disadvantages Of Flutter:

● Clean, clear, and smooth documentation
● Google’s support and strong community
● The reliably faster speed of development
● Amazing native app performances
● A wide range of expressive and flexible UI components
● Stateful Hot Reloading for faster change implementation
● Accessibility of native SDKs and their features
● Modern, enhanced, and flexible approach to the coding
● API support for 2D effects, animation, and gestures
● Though Dart is an easy-to-learn and use
programming language, Investment in learning Dart is
required for Flutter.
● Difficulties in styling the components as there is no
use of JavaScript
● Lifecycle management is a bit Complex when
compared with React Native
● Market age of Flutter’s is less than a year and it isn’t
as matured like React Native

Conclusion​:
When it comes to picking the right hybrid tool to develop an app it depends on many criteria such as budget, requirements, features ,
timeline and the set of Resources/Developers who are well versed in the tool. On one hand when you see ReactNative it does not
support high rendering graphics and seamless animation while the other option Flutter does both. Also the license and terms are not
that clear with ReactNative and so security issues arise when doing projects with high reliability. Though Flutter is not that matured
and lack IDE for development , it still has very high potential for outgrowing every hybrid/Cross platform mobile application
development tool. For being new to market , Flutter has good amount of support widgets in their native library than that of other
hybrid mobile app development tools in the market.