Flutter is an open-source software development kit (SDK) created by Google in 2015 with the name "Sky". Its alpha version was on May 2017 and it came to light on December 11, 2019 with its release version Flutter 1.12. It's used to build application for multiple operating systems like Android, iOS, Windows, Mac, Linux and Google Fuchsia by using a single codebase.
Besides, flutter is based on Google’s programming language called Dart. In fact, it is a typed and object-oriented programming language that can be compiled to machine code or transpiled to JavaScript. Moreover, Dart can be run as like an interpreted language on its own VM using JIT Compilation. In reality, JIT compilation holds both of the speed of compiled code and the flexibility of interpretation. In fact, the source code is compiled at runtime as bytecode, then it is interpreted (executed) using the Dart virtual machine.
What makes flutter a good choice?
•Open Source
Flutter is an open source framework surrounded with vast documentation provided by Google that contains what any beginner needs to find such as tutorials, samples, and more. Also, you can simply open the Flutter GitHub repo, view the source code, or look for existing issues. Besides, Flutter has a growing community that became increasingly active by developing helpful resources.
•Maximum productivity thanks to hot reload
Thanks to Flutter, you can change your code and see the results on emulators, simulators immediately using Hot reload feature. In fact, the changed code is reloaded in less than a second without restarting the app or wasting time.
•Better time-to-market speed
Generally, Flutter app needs almost fewer man-hours than building the same app separately for Android and iOS. In fact, it is rich with its own various components which can be used on several platforms. In this case, the developer doesn't need to create every platform specific code to attain the desired UI of the application which reduces the number of working hours.
•Single code base and native performance
With Flutter you only have to write a single code base to build cross-platform applications that perfectly perform like a Native app especially in UI/UX and functionality. This performance is due to the Dart's programming language compiler that builds the application directly into machine code, which eliminates any bugs of the interpretation process. In this case there’s no need for a JS bridge in the middle like other cross platform (React Native ...) for parsing and executing.
•Flutter Widgets catalog
Whether you are a client or an enterprise, your biggest concern is the performance of the application while investing in the mobile app development process. However, Flutter has all the fantastic widgets that look native to Android or iOS apps (following Material Design or Cupertino). Moreover, developers can create their own widgets as well.
How Does Flutter Work?
1. Flutter Framework Architecture
•Flutter Framework
Flutter framework is built based on Dart programming language, it holds a vast support of Material design and Cupertino style which help to create native UI for different platforms. Its main role consists of rendering widgets, state management, animations and many more.
•Flutter Engine
Flutter engine is written in C++. It implements Flutter core libraries which include text layout, file and network I/O, Dart runtime for compiling and executing applications. As well, it uses Google's graphics library Skia for rendering graphics.
•Flutter Platform Layer
The Platform layer is considered as the glue between the host OS and Flutter. In fact, it is responsible for the lifecycle of any app, including window sizing, thread manipulation and platform messages.
2. Flutter Base Component
What is a widget?
The major idea behind flutter framework is the use of widgets for building apps. In fact, it is regarded as the primary building blocks of every UI in Flutter app.
What are the different types of widgets?
a-Stateless Widget
Stateless widgets are immutable, so they don't require mutable state. In fact, those widgets cannot change their appearance and properties during the runtime of the app. In result, the build () method called only one time while the app is in activity.
Example of stateless Widget: Text, Icon, ...
b-Stateful Widget
Stateful widgets are dynamic. In fact, they can update their appearance based on a user triggered event or data change. To create a stateful widget, it is required to override the createState () method which returns the state of that widget.
Example of stateful Widget: Checkbox, Radio Button, ...
Flutter Widget Lifecycle
a-Stateful widget Lifecycle:
•CreateState():
The flutter framework calls this method immediately after creating a stateful widget. In fact, it's used to create a state object of the mentioned widget. Besides, once the state object was produced, a build Context is assigned to that widget. This build Context is used to specify the location of any widget inside the widget tree.
Moreover, this method can be called multiple times when we use the same widget in multiple places.
•initState():
This flutter method is called only once after creating the widget. In fact, this method is considered as the best place to initialize data or proprieties, even to subscribe to things that could change data like streams, changeNotifer and others.
•didChangeDependencies():
This method is called right away after initState (). Besides, it will be called when an object that this widget depends on changes.
•Build():
This method holds the tree of widgets. It's called every time when the UI needs to be rendered, for example, when we use a setState () method.
•didUpdateWidget(currentWidget oldWidget):
This method is called because of any changes within the parent widget. In fact, it has the currentWidget and the old one as a parameter so you can compare them to do some extra logic. Besides, in turn this method calls the build () method so no need to use setState () to rebuild the UI.
•setState():
The setState () method called by the framework and even from the developer itself. Its main role is to notify the framework that it should rebuild the widget.
•deactivate():
This Flutter method is rarely used. In fact, it's called when the state is removed from the widget tree, but it can be replaced before the current frame change is finished, which is the opposite of dispose () method.
•Dispose():
This method is called when the current object and its state are removed from the tree forever. Dispose method is the best place to unsubscribe to streams, cancel animations and more.
b-Stateless widget Lifecycle:
As mentioned above, stateless widgets only depend on their own configuration information. In other words, they don't care about any changes while the app is running. As a result, the stateless widget does not have the same lifecycle as the stateful widget, in fact it only calls the build () method once while the application is in action.
How does flutter render their widgets?
According to the documentation, "widget is an immutable description of part of a user interface". Then, a widget is an object whose state cannot be changed after its creation. However, UIs are not immutable and they can't be, therefore, how does Flutter represent change and handle the state of the UI?
In fact, Flutter framework composed of three trees: Widget tree, Element tree and Render Objects tree. The combination of those three trees allows Flutter to render UIs and display any state change.
a-What is an Element?
Refer to documentation Element is "An instantiation of a Widget at a particular location in the tree". In reality, the Element is considered as the changeable piece of the UI, which control the lifecycle of any widget. In fact, every element has a reference to a Widget.
b-What is a Render Object?
Render Object contains different protocols for painting and performing layout. In fact, it manages the tree of elements by rendering every single element.
Then, how does those three trees work together?
Example 1:
What happens here?
•Step one:
Flutter will create a widget tree which contains the center () and Text () widgets.
•Step two:
Every single widget called createElement method which generate an Element object in Element tree.
•Step three:
Each render object will be produced when an Element calls createRenderObject ().
Example 2:
In this example, we try to update the UI with the new text when we press the “change” Text widget.
What happens here?
The Render Object is considered as an expensive one, so instantiate it is a very sensible option. Therefore, how can we update the UI?
In reality, we will use the help of the Element tree which considered as the link between the two other trees and it hold the task of comparing the runtime type of both. If there is no difference, then, Render Object does not need to recreate it, just call updateRenderObject () method to update the value in question. If not, then new Element and Render Object trees will be produced.
This feature is one of several advantages of Flutter framework, indeed, every app contains various widgets, then rebuilding the whole tree for every modification is quite costly. For that reason, Flutter applies the concept of those three trees to minimize the processing which donates more optimal performance.
Top comments (3)
Thank you for writing such relevant content. It was explained in a very well-mannered and easy language. I was searching for this type of introduction on flutter. I work as a mobile App Developer. It helped me a lot.
Nice article, thanks for sharing. I am also writing articles on Flutter. Keep it up.
👏 Thanks for sharing!