Flutter general report PDF

Preview

Summary

1. IntroductionFlutter is an open-source mobile SDK developer can use to build native-looking Android and iOS applications from the same code base. Flutter has been around since 2015 when Google introduced it and remained in the beta stage before its official launch in December 2018. Since then, the...

Description

Flutter

1. Introduction Flutter is an open-source mobile SDK developer can use to build native-looking Android and iOS applications from the same code base. Flutter has been around since 2015 when Google introduced it and remained in the beta stage before its official launch in December 2018. Since then, the buzz around Flutter has been growing stronger. Flutter is now the top 11 software repos based on GitHub stars. Moreover, we have already seen thousands of Flutter apps being published on app stores. One of the most notable examples is the Xianyu app created by Alibaba team, used by over 50 million people. Android provides a native framework based on Java language and iOS provides a native framework based on Objective-C / Shift language. However, to develop an application supporting both the OSs, we need to code in two different languages using two different frameworks. To help overcome this complexity, there exists mobile frameworks supporting both OS. These frameworks range from simple HTML based hybrid mobile application framework (which uses HTML for User Interface and JavaScript for application logic) to complex language specific framework (which do the heavy lifting of converting code to native code). Irrespective of their simplicity or complexity, these frameworks always have many disadvantages, one of the main drawbacks being their slow performance. In this scenario, Flutter – a simple and high-performance framework based on Dart language, provides high performance by rendering the UI directly in the operating system’s canvas rather than through native framework. Flutter also offers many ready to use widgets (UI) to create a modern application. These widgets are optimized for mobile environment and designing the application using widgets is as simple as designing HTML. To be specific, Flutter application is itself a widget. Flutter widgets also supports animations and gestures. The application logic is based on reactive programming. Widget may optionally have a state. By changing the state of the widget, Flutter will automatically (reactive programming) compare the widget’s state (old and new) and render the widget with only the necessary changes instead of re-rendering the whole widget.

CHINMAYA INSTITUTE OF TECHNOLOGY

1

Flutter

1.1. Features of Flutter ➢ Flutter framework offers the following features to developers: ➢ Modern and reactive framework. ➢ Uses Dart programming language and it is very easy to learn. ➢ Fast development. ➢ Beautiful and fluid user interfaces. ➢ Huge widget catalogue. ➢ Runs same UI for multiple platforms. ➢ High performance application

CHINMAYA INSTITUTE OF TECHNOLOGY

2

Flutter

2. History Flutter was first announced 4 years ago in 2015 at the Dart Developer Summit. It was initially called “SKY”. I think that would have been cooler. Flutter alpha (V-0.06) was released in May 2017.Later, Google launched the 2nd preview of Flutter back in September 2018.That’s when the developers around the world started to feel the heat. Even before the Flutter 1.0 was announced, many Flutter apps came into the stores. Apps like – Alibaba, Google Ads, Tencent, reflect were proof that Flutter could be so Awesome. Finally, Google launched Flutter 1.0, the stable version of Flutter on 5th of December 2018. At this launch, Google released ‘The History of Everything”. A timeline of the world from the Big Bang to the age of WWW. An app built with Flutter with a single code base that can run in any Android or IOS device smoothly. This app has smooth animations because Flutter can run apps with a of 120 Frames Per Second. (Others only can achieve a maximum of 60 FPS). To build apps with Flutter, you need to know Dart as flutter runs on the Dart virtual machine and flutter uses Dart as the Programming Language. Dart – A object oriented programming language developed by Google Dart was first released in 2011 and the latest stable version (Dart 2.2.0) was released in February 2019.Many sources mentions that Google initially released Dart as a alternative to Java-Script. But, in the official Dart website, they deny it. For dart beginners, dart devs say “You probably already know Dart, you just don’t realize it”. Why? because dart is a lot like java, C# or js. If you know any of those languages, you only need to study a few syntax changes.

CHINMAYA INSTITUTE OF TECHNOLOGY

3

Flutter

3. Brief history of flutter

CHINMAYA INSTITUTE OF TECHNOLOGY

4

Flutter

4. Why use Flutter?

4.1. Fast development Flutter engineered for high development velocity. Stateful hot reload allows you to change your code and see it come to life is less than a second without losing the state of the app. Flutter also ships with a rich set of customizable widgets, all built from modem reactive framework.

4.2. Expressive + Flexible UI Flutter moves to a widget, rendering, animation and gestures into this framework to give you to complete control over every pixel on the screen. It means you have the flexibility to build a custom design.

4.3. Native apps for Android and IOS Flutter apps follow platform conventions and interface details such as scrolling, navigation, icons, fonts, etc. That why apps built with Flutter features on both APP STORE and GOOGLE PLAY STORE.

4.4. Hot Reload In flutter, very save on the app and just as you do on the web just hit a refresh and your codes also refresh. Imaging that Facebook SDK it would be so humongous if it would have been designing android and you hit a recompile. So many things to have recompile and it would take probably days. Unmistakably, Hot reloading is tech which is kind of necessary when your applications or product goes like incense crazy like Facebook.

CHINMAYA INSTITUTE OF TECHNOLOGY

5

Flutter

4.5. High Performance Flutter doesn’t require a Javascript bridge and the speed is much faster.

4.6. Using Dart as a Programming Language Dart is an object-oriented programming language that which used for writing mobile application code for Flutter and which contributes to the efficiency and effectiveness of app development flow. It is a comfortable language and uses a lot of CSS parts as well. Dart uses for generational garbage collection which helps in creating frames for short-lived objects. It also helps to allocate the objects with a single pointer bump to avoid UI jank and shutter.

4.7. Reduce the Third Parties When using flutter, you can get complete IOS experience or Android Experience. So they are reducing the Third parties.

4.8. API. The Flutter API is very consistent AnimationBuilder, FutureBuilder, StreamBuilder,…Once you understand them you have no limit. Anything is a widget. A button can use as a screen, a full page used as a button with animation and transformation.

4.9. The customizable kit of Widgets Flutter has built with a rich and customizable set of widgets for Android, IOS and Material Design. The collaboration between Flutter and Google’s material design has rendered and easily create powerful UI experience. This help to create smooth, crisp and refined app experience as are available with a native app.

CHINMAYA INSTITUTE OF TECHNOLOGY

6

Flutter

5. The core principle of Flutter Flutter includes a modern react-style framework, a 2D rendering engine, ready-made widgets, and development tools. These components work together to help you design, build, test, and debug apps. Everything is organized around a few core principles.

5.1. Flutter architecture

Note: This picture is quoted from Flutter System Overview Traditional conventions, as long as the article about the principle of Flutter, this picture will be placed at the beginning. Regardless of whether it is good or not, it is first put forward, and most of them still rely on their own understanding. Because this picture is so easy to use. Putting this picture out, it is still simple to understand what is Flutter from the whole, otherwise it is easy to fall into the "blind person to touch the elephant" situation. The Flutter architecture uses a layered design, which is divided into three layers from bottom to top, in this order: Embedder, Engine, Framework.

1. Embedder：Operating system adaptation layer to realize rendering Surface settings, thread settings, etc.

CHINMAYA INSTITUTE OF TECHNOLOGY

7

Flutter

2. Engine◦: Realize functions such as FLutter rendering engine, text layout, event processing, and Dart runtime. Including Skia graphics drawing library, Dart VM, Text, etc., among which Skia and Text provide the ability to call the underlying rendering and typesetting for the upper layer interface. 3. Framework：It is a UI SDK implemented with Dart. From top to bottom, it includes two major style component libraries, basic component libraries, graphics drawing, gesture recognition, animation and other functions. As for more details, this picture will be better with the source code eating experience. But because this article is not a source code analysis, this work will not start. Next, I will use the Flutter drawing process as an example to explain how Flutter works. This can also help you better understand the source code.

CHINMAYA INSTITUTE OF TECHNOLOGY

8

Flutter

6. Drawing principle of Flutter

The Flutter drawing process is summarized as follows:

The first is the user operation, which triggers the update of the Widget Tree, and then builds the Element Tree, calculates the redraw area and synchronizes the information to the RenderObject Tree, and then implements component layout, component drawing, layer composition, and engine rendering. As a pre-knowledge, let's take a look at the data structure involved in the rendering process, and then analyze the specific aspects of rendering.

6.1. Flutter data structure during rendering

The key data structures involved in the rendering process include three trees and a layer, where RenderObject holds the Layer. Let's focus on the relationship between the three trees. For a chestnut, for example, there is such a simple layout:

CHINMAYA INSTITUTE OF TECHNOLOGY

9

Flutter

Then the relationship between the corresponding three trees is shown below:

6.1.1 Widget Tree

The first tree is the Widget Tree. It is the basic logical unit of control implementation, and is how users describe the interface UI.

CHINMAYA INSTITUTE OF TECHNOLOGY

10

Flutter have to be aware of is, Widget is immutable When the view configuration information changes, Flutter will rebuild the Widget to update it, and it is simple and efficient to build in a data-driven UI. So why is Widget Tree designed to be immutable? Flutter interface development is a kind of responsive programming, advocating "simple is fast", and re-creating the Widget Tree from top to bottom to refresh, this idea is relatively simple, without additional relationship data changes will affect which nodes. In addition, the Widget is just a configuration with a data structure, the creation is lightweight, and the destruction is optimized, so you don’t have to worry about the performance problems caused by the entire tree rebuilding. 6.1.2. Element Tree

The second tree, Element Tree. It is the instantiated object of Widget (as shown below, Widget providescreateElementFactory method to create Element), which persists in the Dart context at runtime. It carries the constructed context data and is the bridge connecting the structured configuration information to the final rendering. The reason why it persists in the context of Dart instead of rebuilding like Widget, because the cost of re-creating and re-rendering of Element Tree will be very large, so Element Tree to RenderObject Tree also has a Diff link to calculate the minimum redraw area .

CHINMAYA INSTITUTE OF TECHNOLOGY

11

Flutter

It should be noted that Element holds both Widget and RenderObject, but neither Widget nor Element is actually responsible for the final rendering, they are just "ordering", and it is the RenderObject that actually renders the configuration information. 6.1.3. RenderObject Tree

The third tree, RenderObject Tree, is the render object tree. RenderObject is created by Element and linked toElement.renderObjectOn (as shown below), it accepts Element's information synchronization. Similarly, it is also persistently stored in the context of Dart Runtime, and is mainly responsible for implementing view rendering.

CHINMAYA INSTITUTE OF TECHNOLOGY

12

Flutter

The display process of RenderObject Tree in Flutter is divided into four stages:

1. layout 2. draw 3. synthesis 4. Rendering Among them, the layout and drawing are done in RenderObject. Flutter uses a depth-first mechanism to traverse the rendering object tree, determine the position and size of each object in the tree, and draw them to different layers. After drawing, the task of compositing and rendering is left to Skia. So the question is, why are three trees instead of two? Why do I need the Element Tree in the middle, is it not possible to construct the RenderObject Tree directly from the Widget Tree? It is possible in theory, but not practical. Because if you build the RenderObject Tree directly, it will greatly increase the performance loss caused by rendering. Because Widget Tree is immutable, but Element is mutable. In fact, the Element layer abstracts the changes of the Widget tree (similar to React/Vue's VDOM Diff), and only synchronizes the parts that really need to be modified into the RenderObject Tree, thereby minimizing the redraw area and improving rendering effectiveness. It can be found that Flutter's ideas are largely based on the front-end reactive framework React / Vue.

CHINMAYA INSTITUTE OF TECHNOLOGY

13

Flutter

In addition, expand and add VDOM. We know that several advantages of Virtual DOM are:

1. Diff algorithm to ensure that as few DOM nodes as possible. This is reflected in Flutter's Element Tree. 2. UI declarative programming, strong code maintainability. This can be reflected when Dart writes UI components declaratively. 3. Abstracting real nodes can facilitate cross-platform. This is not reflected on the Flutter side, because Flutter itself is a cross-end selfdrawing engine. But to change the way of thinking, can we build Element's Widget Tree without Dart, and use other languages that support runtime compilation (such as JavaScript), then can't it be dynamic? Yes, MXFlutter is currently dynamic with this idea.

CHINMAYA INSTITUTE OF TECHNOLOGY

14

Flutter 6.1.4. Layers

Finally,

take

a

look

at

Layer,

which

is

attached

to

RenderObject

(throughRenderObject.layer(Acquisition) is the carrier of drawing operations, and can also cache the results of drawing operations. Flutter draws on layers that are not used separately, and then overlays these layers with cached drawing results according to the rules to get the final rendering result, which is what we call an image.

As shown in the code above, there are two attributes on the base class of Layer_needsAddToScene with _ subtreeNeedsAddToSceneThe former indicates that the scene needs to be added, and the latter indicates that the subtree needs to be added to the scene. Usually, only when the state is updated, it needs to be added to the scene, so these two attributes can be intuitively understood as "I need to update" and "Subtree needs to be updated." Layer providesmarkNeedsAddToScene()Come and mark yourself as "need to update". Derived classes call this method when their state changes, marking themselves as "needs to be updated", such as the addition and deletion of child nodes of ContainerLayer, the transparency of OpacityLayer, the change of PictureLayer, and so on.

CHINMAYA INSTITUTE OF TECHNOLOGY

15

Flutter

7. Who is Flutter for?

Designers converge on a brand-driven experience on Android and iOS Prototypers enjoy a high-fidelity and fast way to build working prototypes. Developers benefit from fantastic developer tools, an easy-to-use language, a rich set of widgets and great IDE support. Flutter frees up valuable time for working on features and delightful experiences. cross-platform applications are a long-standing dream of any business, because separate native iOS and Android apps are more expensive to develop and maintain. Flutter offers a quick way to create visually attractive apps for both operational systems, desktop computers, and the web from a single codebase. It is actively used and promoted by Google, and we expect that it will become universally popular in the near future.

7.1. Low-cost app development An ideal cross-platform should meet two requirements: provide a high-quality user experience (smooth animations, native UI elements without slowing down), and be cost-friendly from the development perspective. The advantage of Flutter is not only in making one application instead of two. With this framework, you will also have fewer problems when adapting your app to each of the platforms. Most frameworks can cope, but that’s only if to consider them in the context of simple applications. The real problems begin when an application becomes “overgrown” with functions and inevitably gets complicated (it is about most products during the development stage).

7.2. Similar to native app performance While a Flutter app is built directly into the machine code, that will exclude any performance bugs during interpretation. A Flutter application will be ultimately indistinguishable from the

CHINMAYA INSTITUTE OF TECHNOLOGY

16

Flutter native app, since it doesn’t rely on any intermediate code representations or interpretation, in contrast to most other cross-platform frameworks.

7.3. It goes beyond mobile As we mentioned, the technology appeared as Flutter 1.0 in December 2018. Since then, Flutter has demonstrated its ability not only to work as a toolkit for mobile platforms but also for web and desktop browsers. In May 2019, its development team announced a Flutter preview version for the web which was first called Hummingbird. However, it was later renamed Flutter Web.

7.4. Own rendering engine Flutter promises absolute freedom in creating a user interface regardless of the platform. This is achieved by the fact that the framework uses its own rendering engine to draw widgets. The problem with many cross-platform solutions is that they look the same on iPhone and Android. But what about the companies that need to use Material Design for Android and Human Interface for iOS? For such companies, Flutter is the most suitable solution. It is equipped with packages that contain a set of custom widgets for both operating systems.

7.5. Simple logic implementation Flutter provides advanced OS features like GPS coordinates, sensor data collection, permission handling, Bluetooth, credentials, and other features in ready-to-use plugins that are supported by Google. If your app is reliant on an OS-level feature not available as a plugin, Flutter can establish communication between its Dart programming language and the native code using platform channels.

7.6. Amazing design Two powerful things were originally laid in the foundation of Flutter: an excellent programming language (Dart) and a fast, high-performance rendering engine (Skia). Such a choice was a well-thought-out solution that saves users from further ...