TigerChain address: juejin.cn/post/684490… This article is from TigerChain’s Whole Flutter series

Tutorial introduction

  • This tutorial is intended for beginners and will be skipped by experienced readers
  • 2, the difficulty of the tutorial is elementary, my level is limited, the content of the article will inevitably appear problems, if there are any questions welcome to point out, thank you

The body of the

What is Flutter

1. Several development modes of mobile terminal

Before we get into what Flutter is, let’s take a look at how many modes are currently being developed on mobile

  • 1. Pure native development “native development”
  • 2. Pure WebApp
  • 3, Hybrid development

In addition to the first native development, the other two now basically have two schemes, one is based on the native WebView to do extension and development, the second is to use jsBridge scheme to directly call native controls to render

Cordova, Appcan, mui, etc., is based on webView extension to use HTML and JS to complete the interface effect. This solution is a hard business, and if some functions of Cordova cannot be satisfied, we need to customize the native extension function. This is where all the shortcomings of webView come into play

Jsbridge is represented by ReactNative and Weex. Without WebView, rendering work is directly handed over to the system, which greatly improves performance. However, the cross-platform features are not thorough, and sometimes different codes need to be written for different platforms. In addition, if the developer is a person who needs to master the native development of IOS/Android platforms, but JsBridge also needs to pay for this part, which also has performance problems, then can you have native experience without webView and JsBridge? Of course, there is. This is the idea behind the Creation of Flutter

2. What is a flutter

Flutter is Google’s open source mobile UI framework for high quality IOS/Android writing. Flutter has been rewritten with a set of UI bars, Not based on WebView, not based on JSBridge, but completely rewritten from top to bottom including his development language “Dart is more efficient than JS anyway”, its rendering engine is based on the cross-platform Skia graphics library, It is easy to understand that the interface of flutter is drawn directly on canvas

Ii. Flutter development environment

Flutter can be developed on Mac/Windows/Linux. Since the PC is a Mac, there are three general steps to describe flutter as “similar to other platforms” in the Mac environment

1. Download the Flutter installation package for Mac

IO /docs/get-st…

Click download

2. Decompress the installation package and configure environment variables

Unzip the downloaded.zip installation package to a specific directory such as installSoftWare to add environment variables to.bash_profile or.zshrc

export PATH="$PATH:/`pwd`/installSoftWare/flutter/bin"
Copy the code

PWD is the command that comes out of the default interface of the command line, usually /User/XXX, and then saves the file. Basically, the flutter can be used. We can try the flutter command on the command line

Install flutter dependencies

After the above two steps, the Flutter installation is complete, but some dependencies still need to be installed. After configuration, we run the Flutter Doctor to check the missing dependencies

As shown in the figure, I have installed all the required dependencies, not the original state, you can run directly will report a lot of X can choose to install according to your own needs, For example, install the dependencies of AndroidStudio to install the flutter plugin in your AS Plugins, and install the flutter plugin in Vs Code. As long as there is no problem with the first one, you can configure an Android/IOS environment and add a development IDE dependency, which is nothing to say, if there is x will prompt you how to solve

Give it a try

Here we use two ways to create a FlutterDemo project

1. Use the command line

For demonstration purposes we create a FlutterDemo project in Destop using the Flutter create XXX “project name” to create the project

cd ~
cdDesktop flutter create flutterdemo create a flutter projectCopy the code

Thus we created the first Flutter project, during which I also secretly installed “Heh heh” on the IOS environment.

IO /community/c… “, domestic users also need to configure the following content in the environment variable “How sweet?”

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

As prompted, let’s go into the project and run it and see what happens

cd flutterdemo
flutter run
Copy the code

Unfortunately, it didn’t run, which means we didn’t start the emulators or the real machine. Follow the prompts and run the Flutter emulators to see which emulators are available

flutter emulators
Copy the code

You can see that I have an Android emulator and an IOS emulator locally, so now we can start the emulator, of course you have to have the emulator, if you haven’t created it you can create it from the command prompt or you can create it in AndroidStudio/Xcode, Of course, you can also use the real test

Use the Flutter emulators –launch to start the emulator on my machine

flutter emulators --launch Nexus_5_API_25
Copy the code

You can turn it on for your own emulator

Run flutter Run again

flutter run 
Copy the code

It’s going to run without any problems, so this is what the Demo we created on the Android emulator looks like, right

This is what an IOS emulator looks like

If both Android and IOS emulators are running, flutter Run will prompt you to choose which emulator to use to run the project

flutter run -d <deviceId> 
Copy the code

Use this command to select which emulator to run where deviceId corresponds to the value indicated by the red arrow in the figure above. Run Flutter Run and it will automatically prompt you if there is no emulator and so on. Just follow the prompt

Create a project using VsCode

Open vscode to create a flutter. Press CTRL/Command + Shift + P to enter flutter and you will see some commands related to flutter. “If you want to install the Flutter plugin in VScode”

We create a flutter Project directly using New Project and then select a directory or create a directory to place the flutter Project. Here I create a vscoDeflutter directory on the desktop. Then automatically create the project for Flutter, zhang looks like this

We have successfully created a flutter project in vscode. Now we can use CTRL /command +shift +p to enter the flutter command

We can see that when we create the project there will be several more commands. We can select the corresponding commands such as load emulator etc. Then we can open vscode’s command line and enter flutter run to run the project

Again, the project can run

3. Other development environments

In addition to the above two methods, we can also create a Flutter project using AndroidStudio. I also installed a Flutter project in the Android plugin to create a Flutter project. “It will have a flutter creation project template”. Very similar to creating a normal Android project, you can also create it after AndroidStudio starts, or open a project and select

Or open a project to create it

All are the same. Then the next step is all. This concludes the configuration and creation of flutter

Fourth, summarize and expand

This section, we say that the flutter environment configuration, basically do not have what problem, according to the official step by step is to pay attention to may appear a dependency or plug-in installation “stuck” on the issue, which requires scientific online or use flutter basically to domestic development to provide the configuration of the channel can be configured successfully all the way, To summarize

1. Flutter is high-performance and cross-platform

Flutter is a high-performance cross-platform solution. “Completely cross-platform”, completely rewritten with no webView, no JsBridge, canvas drawing interface and GPU rendering. This is also different from RN, Weex and webView-based H5 development, The Flutter takes a completely different approach

2. The development environment of Flutter

Support command line, VScode /AndroidStudio/IDE development environment, installation and configuration is also very simple, we can choose their own favorite IDE to configure and development

3. Current status of Flutter

(1) No large-scale use

At present, flutter is not widely used. It is only investigated and used by some big companies, such as Google abroad and BAT in China. In particular, Alibaba is promoting the use of Flutter. The use of Flutter to develop certain interfaces or modules “is basically a trial of water, which has both objective and subjective factors”. For example, Ali reconstructed several interfaces of Flutter with “research and trial water, which is said to be ok”. It is not difficult to understand that a new thing takes time to develop

(2) Less community and third-party plug-ins

Because the community of Flutter is not as large and active as that of RN and others, there are few solutions and third-party plug-ins. Specific functions may have to be written by ourselves, and problems may also have to be filled in by ourselves. I believe that this will improve over time

4. Should or should not use flutter

Only after you have learned it can you know whether you should use it or not. There is no best frame and the most awesome technology. Only by combining the actual situation of the company, you can choose the most suitable frame and technology for the company.

It doesn’t hurt to be awed and curious about new technologies. It doesn’t hurt to learn how to add a solution to the technology selection and master Flutter in the context of a big front end. Pushing flutter in a company the size of Google, believing that Flutter will get better and better

This completes the construction of the Flutter environment

TigerChain this article is from the beginning of the whole Flutter public id: TigerChain