Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Before learning about Flutter, we need to install the development environment of Flutter first, so we will start with the environment installation;

Installation environment

I am a Mac computer, so this demo demonstrates the installation of Flutter environment under Mac.

Computer System: macOS Big Sur 11.6

Flutter: 2.5.1

Because Flutter is a programming language developed by Google, we cannot develop Flutter using Only Xcode. In addition to Xcode, we also need to install other development tools. Android Studio is more powerful with a lot of plug-ins, but it takes up a lot of memory and is cumbersome, so we can choose the development tools we use.

Flutter installation

Download the SDK

As for the installation process of Flutter, we can refer to the official website directly, which can be opened directly in China.

Click Get Started to enter the install screen and select the platform to download:

After that, the environment can be installed step by step according to the process;

The latest version is flutter_macos_2.5.2- stables. Zip. Stable means stable

The SDK decompression

After the compressed package is downloaded, it can be directly decompressed to a certain path.

Note that multiple users can access the directory if the directory is decompressed to the opt directory. However, the access permission of the opt directory may cause some problems.

Configuring the Image File

After the decompression, because we need to use the command in the bin directory, we also need to configure the environment variable;

Because Flutter needs to download some resources from the authorities when it is running, we need to use scientific tools at this time, but Flutter is friendly and humanly provided with a mirror image: portal

The new Mac terminals use ZSH, whose configuration file path is ~/.zshrc.

Older Macs use bash for interrupts and its configuration file path is ~/.bash_profile.

We need to configure the image in the configuration file:

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

There may be a part of the old computer whose configuration information is stored in the bash_profile file. Now after updating to the new system, the default is ZSH. In this case, we will have two configuration files, so we just need to add the following command at the end of the ZSHRC file: You can import all the environment variables from the BASH_profile file directly into ZSHRC:

if [ -f ~/.bash_profile ]; then . ~/.bash_profile;
fi
Copy the code

Configure the Flutter environment variables

Add the following configuration to the configuration file:

#flutter environment variable export PUB_HOSTED_URL=https://pub.flutter-io.cn FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn # domestic Users need to set up the export PATH = / Users / * * * * * * / development/flutter/bin: $PATHCopy the code

The instructions for Flutter are in the bin directory, so you should specify the bin directory when configuring environment variables

After the configuration is complete, restart the terminal, or directly enter the command in the terminal to reload the configuration:

Source ~/.zshrc # bash source ~/.bash_profileCopy the code

Android Environment Configuration

Install the Android Studio

Go to Android Studio’s Chinese website to download Android Studio

Click to go to the download interface, check the terms, there are two download buttons, respectively for the two chips of Mac Intel and M1, please download according to the computer chip:

Configure the SDK

After downloading, install Android Studio. During the installation process, follow the installation wizard to install the following SDKS:

  • Android SDK
  • Android SDK Command-line Tools
  • Android SDK Build-Tools

Installation process without scientific Internet;

If you have installed Android Studio before, go to preferences (CMD +) to install the SDK:

Installing a plug-in

Here we need to install two plug-ins for Flutter and Dart:

Plugins can be searched and installed in preferences:

After installation, when you restart Android Studio you can see the entry to create a Flutter project:

validation

Once the configuration is complete, we need to verify it

flutter doctor

Terminal input flutter doctor:

flutter doctor -v

These two results indicate that the environment configuration is pretty much resolved……

If there is an error message, solve the problem as prompted.

Other problems solved

JDK Troubleshooting

Even if we have Android Studio installed, we may have JDK version issues at this point. The JDK is currently 10+ and 1.8 is required, so we need to specify a soft link:

cd /Applications/Android\ Studio.app/Contents/jre ln -s .. /jre jdk ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdkCopy the code

License issue Resolution

Permit problems occur when the FLUTTER Doctor command is executed. The solution is as follows:

Execute instructions:

flutter doctor --android-licenses
Copy the code

Enter YES for all;