Hello, I am Cangcang Liangliang, a front-end developer. At present, I am publishing some interesting and knowledge about front-end learning on Nuggets, Zhihu and my personal blog. Welcome to follow me.

Flutter was officially released in 2017. It is a very new technology, but thanks to Google’s investment in Flutter and the high consistency of both ends, it has quickly overtaken React Native as one of the most popular front-end technologies. Flutter has a 120K Start on GitHub so far, surpassing React Native, which launched two years earlier.

I had planned to start learning about Flutter in January, but it was shelved due to various reasons. Recently, with the release of Flutter 2, Flutter has received a lot of attention, so I decided to take this opportunity to learn about Flutter.

In my experience, learning a front-end framework involves the following steps (a Flutter is also referred to as a big front-end) :

  • Understand framework syntax and UI components.
  • Understand how components communicate.
  • Understand the routing usage in the framework.
  • Know how to make network requests.

With these four things in mind, you should have no problem developing small to medium sized applications using a single framework.

One of the most unfriendly aspects of Flutter for front-end developers is that it uses the Development language Dart. I believe that most front-end developers have never developed a project in TypeScript. When I was helping companies recruit, none of the developers who charged between 6K and 14K had ever developed a project in TypeScript. Ask is understood, but have not used.

Dart initially competed with TypeScript, but later lost out to TypeScript for a variety of reasons, and was gradually forgotten. Only a few years later, Dart came back into developers’ attention with the advent of Flutter.

1. 为什么是Flutter

There are many cross-end technologies. Why Flutter?

  1. Flutter makes the performance of both ends of development almost identical. Don’t worry about IOS rendering like this.
  2. Flutter is much closer to its native properties.
  3. Build a Flutter development environment easily. Developers can easily build the Flutter development environment on VSCode or Android Studio.

Google has taken Flutter very seriously and put a lot of work into it. Recently, They released Flutter 2, which allows Flutter to build native applications using the same code base for five operating systems: iOS, Android, Windows, macOS, and Linux. And building web experiences for browsers like Chrome, Firefox, Safari and Edge. Flutter can even be embedded into cars, TVS and smart home appliances, providing the most pervasive and portable experience for environmental computing.

2. Environment installation

The environment of Flutter is slightly more difficult to install than the convenient Nodejs. It requires the Installation of the Java environment, Android Studio, and the Flutter SDK.

It also involves configuring environment variables, which can get stuck if you don’t get it right.

With the release of Flutter 2, it is now possible to debug Flutter applications in the browser, eliminating problems such as mobile emulator installation failures.

2.1 Java environment

Direct to www.oracle.com/hk/java/tec… Download it here. Preferably a higher version, but many companies are still developing projects in Java 8.

Java environment installation is relatively simple, direct brainless next step on the line, after installation, open CMD respectively run the following two commands:

java

javac
Copy the code

If both have output, the environment is successfully installed.

2.2 Flutter SDK

There are two ways to install Flutter. One is to download the Flutter package using Git, and the other is to download the specified Flutter package directly.

Here’s how to install Git:

git clone https://github.com/flutter/flutter.git -b stable
Copy the code

Get the source code from the Flutter repo on GitHub and switch to the specified branch or tag as needed.

After pulling, configure the environment variables. As a developer, you should be familiar with the configuration of environment variables:

Configure the bin directory in the FLUTTER folder into the environment variable.

Due to domestic network problems, some environment variables need to be set after installing the Flutter SDK. Otherwise, the Download package of the Flutter may be stuck and no response may occur during subsequent use.

Using community images:

Set the following two environment variables:

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

After configuration, run Flutter Doctor and it will automatically download Dart related packages for you.

2.3 the Android Studio

Android Studio is based on IDEA. I am a JetBrains fan, so switching to Android Studio is not a big deal. The only inconvenience is that JetBrains does not support synchronization. Although it can create a repository on GitHub dedicated to configuration information, I tried many times and couldn’t keep track of the plugins you installed. Even if you do sync, you still have to install the plugins one by one in the new environment. JetBrains’ account sync will sync all of your installed plug-ins.

Download it directly from the Android Studio website, and the installation process is easy. Just go to the next step.

2.3.1 plug-in

Ctrl+Alt+S to open the Settings, find the plugin, and install the Flutter and Dart plug-ins.

The default for opening Android Studio is English, so you can choose to install a Chinese plugin:

3. The first

3.1 Creating a Project

In the era of Flutter 2, it was very simple to create a project directly by running commands in a specified folder:

Flutter Create XXXCopy the code

After a while, a Flutter project is created and opened using Android Studio.

3.2 Directory Structure

You can see the following directory information:

The only folders we need to focus on are the lib folder and the pubspec.yaml file, where lib is the source code and pubspec.yaml is the project information and dependencies, similar to package.json.

Dart is the entry file for the whole Flutter project. You can see the menu in the image below in the upper right corner of Android Studio.

The Flutter 2 can now run in Chrome. Select your preferred mode of operation and click the Debug button on the right. A console will pop up.

Note: If you run into problems with the above steps, try closing Android Studio, then go to its shortcut, right click, and select Run as Administrator.

4. The last

The Build up of the Flutter development environment is a bit more cumbersome than Web development. Web developers can download Nodejs and install NPM to get the project up and running, but it is said to be much simpler than the React Native environment.

For Flutter, I personally feel it is important to learn because there are so many small companies out there that don’t want to spend money or can’t afford to hire native developers, because native developers need at least one person on IOS and one person on Android, while one person can do the work of two people with Flutter. Although many small companies now use uni-App directly to make do with native projects.

Finally, I would like to say that I personally do not recommend using Flutter as your main means of job hunting, because I have looked on the recruitment website and found that there is not a large demand for Flutter. It may not be easy for you to find a job if you only learn Flutter in first-tier cities.

I recommend Flutter as a hybrid development solution. For example, if you are a front-end developer and your boss asks you to develop a native APP, you can either say no and say “This is not my job, find someone else to do it”. Either use the clunky Uni-app, or use Flutter, React Native, or you can just use Native development.