Quick Introduction To Flutter
Table of content :
A. What is Flutter?
B. How Flutter works?
C. What are the advantages of using Flutter?
D. What are the disadvantages of Flutter?
E. What are the prerequisites before start learning Flutter?
F. Summary
What is Flutter?
Where it comes from and for what goal? :
Flutter is an open-source and free cross-platform UI toolkit introduced by Google for creating high-quality native apps with an engine that is written in C++. Flutter was presented in December 2018 as the first stable version 1.0 at the Flutter Live Event. in other words, Flutter is a guest framework that is responsible for building beautiful and pixel-perfect UI.
“Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.”-Google, flutter.dev.
Flutter Uses Dart Language :
You can create your application by Flutter framework with the help of a powerful language named Dart, Dart is a typed object-oriented, client-optimized, and general-purpose programming language created by Google in October 2011.
The main idea behind Flutter :
The main idea of Flutter is that developers can build an entire user interface by simply combining different Widgets, in Flutter everything is a Widget and in the general, the whole application is a widget itself created by smaller Widgets, Flutter often uses the composition approach to create the bigger widget by combining the smaller widgets.
Flutter offers many ready-to-use Widgets to create a modern application, A Widget can be a unique Button, Text, Input, Style element, or a pop-up screen, etc.
A Sample Flutter Application (Everything is a Widget) :
Widget Tree Of Above ☝️ Sample Application:
One piece of code in Dart :
Flutter Power :
Flutter is fast in rendering and it renders 60 fps in all devices and 120 fps for capable devices.
The application logic is based on reactive-programming, Widgets may optionally have a state (there is two types of widget, StatelessWidget for static UI and StatefulWidget for dynamic UI) and by changing the state of widgets, Flutter will automatically (reactive-programming) compare old Widget state with new Widget state and render the widget with only necessary changes instead of re-rendering the whole widget.
Below are two types of reactive-platform architecture :
More description about this picture will be described in the How Flutter Works section, so memorize this image🤯.
What Flutter Consist Of? :
Flutter consists of an SDK (Software Development Kit) and a Framework.
- Flutter SDK is a collection of tools that are going to help you develop your application. this includes tools to compile your code into machine code (code for mobile(iOS, Android), desktop(macOS, Linux, Windows), Web,device-embedded).
2. Flutter Framework is a collection of reusable UI elements (Buttons, Text, Inputs, Sliders,…) that you can personalize for your own need.
“Our vision for Flutter is something that many of us have been dreaming of for years, a powerful, general purpose, open UI kit for building stuning experience on any device-embeded,mobile,desktop and beyond”-Tim Sneath,Group Product Manager At Google.
How Flutter Works?
- Declarative UI and Reactive-style
As I mentioned before the main idea of Flutter is Widget, this means you can create every UI in a Declarative and reactive-style by combining different widgets, so Flutter doesn’t use native UI controls which available on each platform because it has a rich set of widgets by itself that are built to replicate native controls with high fidelity.
Flutter is responsible for drawing the whole UI by itself (Skia Engine), and it controls every single pixel on the screen, rendering is completely controlled with Flutter SDK which is composed of Flutter Framework and Flutter Engine.
2. Ahead Of Time (AOT) Compilation
Flutter uses “Dart Ahead Of Time (AOT)” compilation in release mode which compiles Dart codes into the native codes for every platform(Native iOS, Android, Web, …), this is a very great thing and causes high performance of the application production as same as a native app.
3. Just In Time Compilation (Hot Reload)
Flutter uses a “just-in-time” compilation in debug mode for creating a Dart virtual machine to run on platforms such as Windows,macOS, and Linux. and this causes fast compilation after the first compile of the app, when we do some modifications in the source file, it will inject to running application very fastly (some seconds or some milliseconds depends on your Widget size). this feature is named “Hot Reload” in Flutter.
4. Generational Garbage Collection
Dart uses a “generational garbage collector” which is very efficient for rendering the UI, it refreshes the UI for every frame and accomplishes this by creating many objects which may be alive for no more than one frame.
5. Tree Shaking
Dart has a “Tree Shaking” compiler that only includes the code you need in your app, for example, if you need just a widget or two, you can use its large library of widgets freely and when you compile your app the unused codes will be ignored.
6. Platform Channel
Flutter has no direct access to the platforms specific hardware API (Native APIs) by itself, for example, if you want to access the specific hardware API and OS capability (like the Battery, Wifi, Bluetooth, Services,…) you must use Platform Channel in your Dart code, Platform Channel is used for communicating with platform-specific APIs.
Platform channel is an API that provides a simple mechanism for communicating data between your Dart code and the platform-specific code of your host app (such as Android, iOS, Web,…), and it lets you write your code in Java, Kotlin, Swift, etc, if you want, and sometimes is required to do that to achieve your goal.
For accessing every platform-specific APIs like Bluetooth, Wifi, Notification, etc, there is a package created for that and everything else that comes to your mind someone else created a package for that on the official website of Flutter packages named pub.dev.
What are the advantages of using Flutter?
- Save time and money
You can save money by writing a single code base in Flutter and make an App for multiple platforms at the same time. and you can save time by creating expressive and complex UI using widgets (there are many widgets for everything) in a Declarative and Reactive style (Dart is very powerful at creating complex widgets with animations and custom design).
2. Quick development
Flutter makes the development process very faster than usual with the help of “Hot Reload”. you can quickly change the UI or business logic without restarting the app. and this makes the programming very fast and interactive, for example, if you working beside a designer or an end-user you can do suggested changes quickly and get instant response from your development partner.
3. High performance
Flutter has its own Widget and no need to access OEM (Original Equipment Manufacturer)ones so there is less communication between the Flutter app and specific Platform, also Flutter uses Dart AOT which compiles Dart code directly into the native code and finally machine code.
4. Compatibility
As I mentioned above Flutter uses Widgets for creating UI and rendering it on every platform by a 2D graphics rendering engine named Skia, so rendering UI is the responsibility of Flutter Engine and this good feature confident that Flutter applications can work on every OS version (no matter an old OS version or future OS version) with more compatibility.
5. Open-source
Both Flutter and Dart are free and open-source. open-source has very good advantages like big community support, technology agility, fast development speed, solid information security, reliability (because there are more eyes on it), faster time to market, and more.
6. Great UI
With Flutter, you can create beautiful and custom designs so you don’t need the platform-specific component to render its UI, and the only thing that Flutter needs is a canvas to draw the whole application UI on it.
What are the disadvantages of Flutter?
- Large file size of installing the app (greater than 4MB).
- Difficult maintaining of code because the framework and Dart language is updating rapidly.
- Doesn't support Android TV and Apple TV.
What are the prerequisites before start learning Flutter?
- Familiar with at least one of the OOP (Object Oriented Programming) languages like Java, C++, Swift, PHP, Python,…
- Familiar with at least one of the application frameworks like Android, iOS,… or web frameworks like Laravel, Django, React.js,…
Summary
Flutter is different from other cross-platform frameworks because of the specific architecture that I described for you. learning Flutter is very easy and fast, and if you are a developer and you come from other frameworks you can fastly map your knowledge from that frameworks to the Flutter framework here.
If this article was useful for you, please press and hold 😊 the clap 👏🏻 button to motivate me to write new articles🙏🏼 , I will write many articles about different challenges in Flutter Applications. follow me on LinkedIn if you want to notify when i published a new article.
