write in front

Today, people want apps on their phones to have beautiful designs, smooth animations, and great features. To do this, developers need to push new features faster without compromising on quality and performance. Research and development, this is the core of Flutter.

insert image description here

What is Flutter?

Introduction to Flutter

FlutterIt is Google's open source building user interface (UI) toolkit, which helps developers efficiently build multi-platform beautiful applications through a set of code bases, supporting mobile, web, desktop and embedded platforms. Flutter is open source, free, and has a loose open source protocol, making it suitable for commercial projects. Flutter has launched a stable version 2.0.
insert image description here

Installation of Flutter

Installation Environment

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

## 检测环境是否安装成功
$flutter doctor
## 开发工具
android studio
visual studio code

sample code

We will use the simplest Hello World!example to give you an example"

import 'package:flutter/material.dart';
void main() {
    runApp(new Center(
        child: new Text('Hello World!')
    ));
}

After Dart 2.0, new can be omitted.

import 'package:flutter/material.dart';
void main() {
    runApp(Center(
        child: Text('Hello World!')
    ));
}

When writing an app, it's common to create standalone components, inheriting either a stateless StatelessWidget or a stateful StatefulWidget, depending on whether your components need to manage state. The main job of a component is to implement a build function, which uses other low-level components to build itself. The Flutter framework will build these components in turn, eventually arriving at the component that represents the underlying render object - the RenderObject, which computes and describes the geometry of the component.
insert image description here

Framework

Let's take a look at the Flutter framework diagram officially provided by Flutter, as shown in Figure 1-1:

Picture 1-1

In short, Flutter can be divided into three layers from top to bottom: the framework layer, the engine layer and the embedded layer. We will introduce them separately below:

1. Framework layer

Flutter Framework, the framework layer. This is a pure Dart SDK that implements a set of basic libraries. From the bottom up, let's briefly introduce:

The bottom two layers (Foundation and Animation, Painting, Gestures) are merged into a dart UI layer in some Google videos, corresponding to the dart:ui package in Flutter, which is the underlying UI library exposed by Flutter Engine, providing animation, Gesture and drawing ability.
The Rendering layer, the rendering layer, is an abstract layout layer that depends on the Dart UI layer. The rendering layer will build a rendering tree composed of renderable objects. When these objects are dynamically updated, the rendering tree will Find out what changed, then update the rendering. The rendering layer can be said to be the core part of the Flutter framework layer. In addition to determining the position and size of each rendering object, it also performs coordinate transformation and drawing (calling the underlying dart:ui).
The Widgets layer is a set of basic component libraries provided by Flutter. On top of the basic component library, Flutter also provides two visual style component libraries, Material and Cupertino, which implement the Material and iOS design specifications respectively.

The Flutter framework is relatively small, as some of the higher-level functionality that developers might use has been split into different packages, implemented using Dart and Flutter's core libraries, which include platform plugins such as camera(opens new window)and webview (opens new window), and Platform independent functions, eg animations(opens new window).

When we develop Flutter, most of the time we are Flutter Frameworkdealing .

2. Engine layer

Engine, the engine layer. There is no doubt that it is the core of Flutter. This layer is mainly implemented in C++, including Skia engine, Dart runtime, text typesetting engine, etc. When the code calls the dart:ui library, the call will eventually go to the engine layer, and then realize the real drawing and display.

3. Embedding layer

Embedder, the embedding layer. The final rendering and interaction of Flutter depends on the operating system API of the platform on which it is located, and the embedding layer mainly "installs" the Flutter engine on a specific platform. The embedding layer is written in the language of the current platform, such as Java and C++ for Android, Objective-C and Objective-C++ for iOS and macOS, and C++ for Windows and Linux. Flutter code can be integrated into existing applications in a modular way through the embedding layer, or it can be used as the main body of the application. Flutter itself includes the embedding layer of each common platform. If Flutter wants to support a new platform in the future, it needs to write an embedding layer for the new platform.