Sure enough, Android developer Flutter asked me how “difficult” he was!

Psychological analysis:The interviewer
The project was developed with FlutterOr is transferring the technology of Flutter. If you don’t, the interviewer at first assumes that the candidate might. To prevent this from happening, be sure to say that you’ve done your research and written the code. Actually, “using Flutter” is only a question of yes or no for most job applications. That’s not what the interviewer wants to know. How well do you understand the interviewer’s key points?

Next, you’ll be asked what you think of his principles. Its advantages and disadvantages. Why is it better than the others? Analyze it from the principle level. That’s the hard part.



This article explains their differences at the level of principle

Job seeker: Expect to be abused. If read this article, deal with down basically no big problem

in
FlutterBefore it was born, there were many
Cross-platform UI framework scheme, such as WebView-based
Cordova, AppCanEtc., and use
Render HTML+JavaScript into Native controls like React Native and WeexAnd so on.

The framework architecture

In contrast, Flutter

First take a look at the architecture of the Flutter

The Flutter has three layers

Framework


Engine


Embedder

1. Dart is used to implement the Framework, including Material Design style Widgets,Cupertino(for iOS) style Widgets, text/image/button and other basic Widgets, rendering, animation, gestures, etc. The core code of this part is: Flutter package under the flutter repository, IO, Async, UI and other packages under the Sky_engine repository (DART: UI library provides the interface between the Flutter framework and the engine).

2.Engine is implemented in C++, including Skia,Dart and Text. Skia is an open source two-dimensional graphics library that provides a common API for a variety of hardware and software platforms

3.Embedder is an Embedder layer that allows the Flutter to be embedded to various platforms. The main tasks here include rendering Surface Settings, thread Settings, plug-ins, etc. From this we can see that the platform-dependent layer of Flutter is very low. Platforms (such as iOS) only provide a canvas, and all the remaining render related logic is inside Flutter, which makes it very cross-end consistent.

As you can see from the architecture diagram, rewrite a cross-platform UI framework from start to finish, including UI controls, rendering logic and even the development language. The rendering engine relies on the cross-platform Skia graphics library to implement, relying on the system only graphics rendering related interface, which can ensure the consistency of experience on different platforms and devices to the greatest extent. The logic processing uses AOT-supported Dart language, and the execution efficiency is much higher than JavaScript

Everything has its widgets.

At present, the mainstream of the idea, all hope that each UI control coupling, slowly evolved a componentized idea.

Flutter controls fall into two main categories:

• StatelessWidget
• StatefulWidget,

The StatelessWidget is used to display static text or images, and if the control needs to be changed based on external data or user actions, use the StatefulWidget.

The concept of State is also derived from Facebook’s popular Web framework React. In the React style framework, control trees and their states are used to build the interface. When the State of a control changes, the framework is responsible for comparing the difference between the states before and after and updating the rendering results at the lowest cost.

Basic Drawing Principles

Here is the essential difference between Flutter and the React-Native crowd: While The likes of React-Native only extend to call OEM components, Flutter renders itself.

In the explanation of Flutter Architecture, Google also provides a more detailed diagram to explain how Flutter works:

This chart explains it a little more clearly: Flutter only cares about providing view data to the GPU. The GPU’s VSync signal is synchronized to the UI thread. The UI thread uses Dart to construct an abstract view structure. This data is fed to the GPU via OpenGL or Vulkan.

So Flutter doesn’t care about the display, the video controller, or the GPU. It only cares about the VSync signal emitted by the GPU, calculates and synthesizes view data between the two VSync signals as quickly as possible, and feeds the data to the GPU.

Some questions that may arise during the Flutter interview

Knowing the basic concept of Flutter naturally leaves several questions to be answered.

Why Dart? Can you explain why

• Dart performs better. Dart is almost as fast as JavaScript in JIT mode. But Dart supports AOT, and when running in AOT mode, JavaScript can’t catch up. The speed increase is helpful for view data calculation at high frame rates.
• Native Binding. On Android, v8’s Native Binding works well, but JavaScriptCore on iOS does not, so if JavaScript is used, the code pattern of the Flutter base framework is not consistent. Dart Native Binding can be implemented with Dart Lib.
• Fuchsia OS, doesn’t seem like a reason for the reason. Fuchsia OS’s built-in App browser uses Dart as the App development language. And actually, Flutter isa conceptual subset of the Fuchisa OS application framework. (The Flutter source code and compilation tool chain are also littered with numerous Fuchsia macros)
• Dart is a type-safe language with complete package management and features. Dart is built into Fuchsia OS because Google assembled so many design experts from the programming language world to create a language designed to replace JavaScript. Dart’s ability to embed applications as embedded lib, rather than being updated only with system upgrades, is another advantage.

What is Skia? Why does Flutter introduce Skia

As mentioned earlier, Flutter only cares about how to build a view abstraction to provide view data to the GPU. Skia is the way that Flutter provides data to the GPU.

• Skia is a 2D drawing engine library, the predecessor of vector drawing software, used by Chrome and Android as a drawing engine Skia. Skia provides a very friendly API and provides friendly and efficient performance in graphics conversion, text rendering, and bitmap rendering. Skia is cross-platform, so it can be embedded into the iOS SDK of Flutter without having to explore iOS closed source Core Graphics/Core Animation.
• Android comes with Skia, so the Flutter Android SDK is much smaller than the iOS SDK.

What is the architecture of Flutter, how do you understand the architecture of Flutter

We may only know what Flutter does, but we have not yet looked sideways at the whole architectural design of Flutter and understood how Flutter does it.

Those of you who know about Flutter have probably seen it in many places. Here is a detailed explanation:

The Flutter Framework: This is a pure Dart implementation SDK, similar to what React does in JavaScript. It implements a basic set of libraries for handling animations, drawings, and gestures. We’ve packaged a library of UI components based on graphics, and we’ve differentiated them according to the Material and Cupertino visual styles. The SDK for this pure Dart implementation is packaged into a Dart library called Dart: UI. When we use Flutter to write apps, we import this library directly to use functions such as components.

The Flutter Engine is a pure C++ SDK that includes the Skia Engine, Dart runtime, text typography Engine, and more. It is simply a Dart runtime that can run Dart code in JIT, JIT Snapshot, or AOT mode. Dart: UI library Native Binding implementation is provided when code calls dart: UI library. Don’t forget, however, that this runtime also controls VSync signal passing, GPU data filling, and so on, and is responsible for passing client-side events to the code in the runtime.

After understanding the fundamentals of screen drawing and an overall concept of Flutter, let’s look at the general implementation of Flutter in detail.

To understand how a Flutter works, we start with the entry point and look at the Flutter code. Because the application Framework is similar, the code that refers to Flutter below refers to the Flutter Engine, not the Flutter Dart Framework code.

Here is my brief summary of the order of Flutter execution after startup

• After the application’s View Controller is initialized, an abstraction of the Flutter Project is instantiated. Project initializes an abstract instance of the Platform View that is responsible for creating the Runtime of Flutter (engine).
• When the View Controller is about to be displayed, project is called to find and combine the application resource bundles of Flutter and provide the resources to engine.
• The Engine creates the environment for Dart execution (lazy loading, Dart Controller) when it actually needs to execute the resource bundle, and then sets some properties of the view window, etc. (this is required by the drawing engine).
• The Dart Controller in engine then loads the Dart code and executes, calling the Dart: native binding implementation of the UI to supply data to the GPU.

Why is the Flutter SDK very large? Do you know this

• The volume of the Flutter application consists of two parts: the application code and the SDK code. The application code is compiled for Dart, and if it is dynamically deliverable, this part is not included.
• Dart VM, Dart standard library, libwebp, libpng, libboringSSL and other third-party libraries, libskia, Dart UI library, and ICU_data. It is possible that under single ARCH (iOS), the SDK volume reaches 40+MB. The Dart VM alone (without the standard library) reaches 7MB.
• The Flutter SDK is the dynamic framework. Such a large binary size may cause dynamic linking to take a long time. However, if the static link, the original large App is likely to cause excessive TEXT segment.

Can a Flutter run multiple instances? (Rapid-fire)

You can.

• Dart is definitely a great programming language, and I’ve tried to make Dart a universal SDK in its own right.
• The Dart SDK is hosted in the Chromium project and provides the option to cross building. The Android Build script is available in the original. But on iOS the original didn’t work, and the assumption was that the standard library was mostly a problem.
• In the Flutter iOS project, the Dart standard library provides a completely different implementation. Also, it is too difficult to separate the Dart VM and the standard library from Flutter. And under a single ARCH, Dart VM