Imagine you have to submit an article for the 3 Editors-in-Chief of the Axiom, the Scientific Etonian and Etonet. One of whom only speaks English, the other only speaks French and the last one only speaks Spanish. You can clearly see the disadvantage. You must be trilingual and spend triple the amount of time authoring the same article. Now, if there was one language which can be understood by all these Chief Editors, that would immediately alleviate the problem, even if each Chief Editor new that language less well.
First released in May 2017, Flutter has grown exponentially in popularity and usage. Many developers believe that Flutter will take over all existing app development frameworks because of the speed at which it is growing. One of the chief problems that currently occurs in app development stems from the almost dichotomic divide between customers who use the iOS operating system, and those who use the Android one. This bipolar market is unlikely to shift drastically, and thus any app which can only be deployed in one system instantly has a huge competitive disadvantage. Thus, as a developer, startup, or enterprise, you would need to invest twice as much time maintaining two codebases, one in Swift and one in Java/Kotlin/C++.
This is significant for a multitude of reasons. Firstly, apps are often the best source of advertisement for an emerging startup. People spend 90% of their mobile time on apps, and 80% of their time online is spent on their phones. Thus, for an entrepreneur who needs customers to be attracted to their idea, the best way revolves around building an app. However, they obviously cannot ignore all the people using a different operating system, and therefore they must spend their precious time and capital developing two different apps. At the point which Flutter provides a single codebase for all operating systems (including web, macOS and Windows), they have a high degree of desirability. Furthermore, even for large tech enterprises, they would much rather not hire as many software engineers with diverse expertise just to build the same app for different systems. Hence why top tech companies such as Groupon, eBay and Tencent are launching their product through Flutter.
The mechanisms for this single-codebase function can, expectedly, be quite interesting. Flutter renders the app itself, instead of letting the device do it for them. All it requires from the device is a canvas on which the User Interface (UI) is displayed, and access to surfaces like touchscreen and audio. This means that maintains both high performance and speed. Let us contrast this with other approaches which use only one codebase. It often either involves WebViews, which entails your app creating HTML and displaying it in a web view on the platform, or building a bridge that joins the native code to the platform with a common language like JavaScript. The problem here is that every time a UI element is accessed, the app must communicate the code through the bridge to the platform. When modern apps have up to hundreds of such elements accessed per second, performance can be greatly compromised.
Another innovation of Flutter is the hot reload button. This feature allows you to quickly experiment with new features and widgets and fix bugs without completely restarting the app (which takes a lot of time). Hot reload works by injecting the changed code files into a running Dart Virtual Machine. After this updates the changes, the Flutter framework automatically rebuilds the widget tree so that you can immediately view your changes.
Now to analyse some Flutter code, written in the language Dart, see the below.
Line 1 simply imports the main package. This contains most of the main widgets used later.
Lines 3 to 5 contain a function which runs the main loop of the app (the function is defined as void, so it does not return a value).
Lines 7 and 8 declare the main widget that is run in the main loop. It is a stateless widget, and thus it is constant and immutable.
Lines 10 and 11 creates the function that this widget must have – a build function which tells the UI how to display this widget based on the smaller widgets inside it.
Line 12 onwards displays the Material App. The main body is a Scaffold widget which provides a default app bar and body. The Center widget aligns its text child widget to the centre of the screen.
We now compare Flutter to its main competitor – React Native, which is another framework that only employs one codebase for cross-platform apps. The latter definitely has some advantages: JavaScript in and of itself is more complex and powerful, which results in React Native apps often having more features. Moreover, JavaScript is useful not only in app development; it is something of a monopoly in making websites interactive and responsive. However, Flutter developers can code everything in one central location. React Native developers often require external libraries to develop their apps. The main difference is in the architecture of the app.
The problem is that although React Native apps are built on JavaScript, they need a bridge to interact with native components in the devices like touchscreen. The impact is already mentioned previously – where modern apps depend on speed, Flutter holds the advantage. We need to understand that Flutter is still in its infancy, and a team of the world’s best software engineers are constantly improving it, turning potential into reality. In spite of this, large corporations are unlikely to ditch their already developed native apps to pursue a still underdeveloped framework – not in the near future at least.
At this point, one would naturally be yearning to find resources to learn Flutter such that in a future which may well be dominated by it, they will have a place in that future. There are many resources which will aid you along your way. First, the flutter documentation contains many learning resources and articles far more comprehensive. Visit ‘flutter.dev’. Second, ‘dart.dev’ is the documentation for the language Flutter uses, Dart. Third, Flutter is a heavily Object-Oriented language, so any video explaining main concepts such as inheritance and mixin will be particularly useful. Finally, the ultimate best possible resources are Google (who is the parent company developing Flutter as well) and YouTube.