Version information

This article is for iOS developers to start the Journey of Flutter. MacOS Big Sur 11.4 Flutter SDK 2.2.3 Xcode 12.5.1 Android Studio 4.1

I choose to use Android Studio as a development tool. After all, I am my own, and there are many convenient advantages. I installed Android Studio earlier, and now the version may be higher, but there are fewer problems. There’s a path problem, which I’ll talk about later, but I don’t think there’s a path problem anymore.

1 installation Flutter

Download the Flutter SDK

1.1.1 enterFlutter website

1.1.2 Selecting MacOS

1.1.3 Download the latest package

1.1.4 Decompressing the SDK package

When the download is complete, put the decompressed flutter package into the location of your own command line tool. There is no requirement for this path, but it is not a Chinese path. The path of my flutter SDK is /opt/flutter. The following configuration uses this path as an example. You can install the flutter using your own path.

Opt is the hidden directory of the system. Command + shift +. Show/hide Hide files.

1.2 Configuration Environment

1.2.1 Configuring a Mirror

When the Flutter is running, you need to download the required resources from the official website. If you don’t have a ladder, you will need an image server, such as me at 😄. Here are some helpful tips from the official document.

If you use bash by default, configure ~/.bash_profile. If you use ZSH by default, configure ~/.zshrc. Add the following to the configuration file:

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

1.2.2 Configuring the Flutter Environment Variables

Next, configure the path to the Flutter command line tool, again in the configuration file corresponding to the shell in the previous step.

Export Flutter =/opt/ Flutter /bin export PATH=$Flutter :$PATHCopy the code

After the configuration is complete, save and close the configuration file, and run the following command on the terminal to load the configuration for it to take effect. If you are in a Bash environment, just change to the bash configuration file.

source ~/.zshrc
Copy the code

Then you can see if the Flutter configuration is complete. Flutter has a doctor detection command. Designed to detect the flutter environment.

$ flutter doctor
Copy the code

Check is OK, x is not configured. We end up with the picture below

2 Install Android Studio

2.1 Installing Android Studio

Let’s first install Android Studio, you can go to the official website to download.

2.2 configure the SDK

The first boot will remind you to install the SDK. The installation process does not require a ladder, but there is one tool that we need to install manually.

Note: License errors will be reported when the flutter doctor detects a later flutter if not installed. You’ll also be prompted to upgrade the SDK,

Once we’ve installed the SDK, open Android Studio

  • command + ,Enter preferences
  • As shown below, manually installAndroid SDK Tools (Obslete)Tool.

2.3 Installing the Flutter Plug-in

  • So let’s installflutterPlug-in andDartPlug-in;

Go to the Flutter preferences, search the Plugins for the Flutter plugin and click Install. Since I have already installed it, it is installed.

The Dart plug-in installation screen will pop up during installation. Click Yes to install the Dart plug-in.

  • After the installation is complete, restart the systemAndroid StudioIf the dialog box is displayed, the plug-in is successfully installed.

2.4 Resolve licensing issues

A license issue will be found when executing Flutter to detect Flutter Doctor again! Since I didn’t have a screenshot, I got one.

Open the terminal, enter the following command, then as prompted, both type Y, enter.

$ flutter doctor --android-licenses
Copy the code

2.5 Solving Gradle stuck problems

The first time you run Gradle, you will find that you are stuck in the following place. The reason is that Gradle’s Maven repository is abroad…… And then you get it.

Running Gradle task 'assembleDebug'
Copy the code

The simple operation to solve it is mirroring. The configuration is as follows:

2.5.1 Modifying thebuild.gradlefile

  • File path: Project -> Android -> build.gradle
  • Modified content: Findbuildscript å’Œ allprojectsTo the insidegoogle() å’Œ jcenter()Comment out, add ali cloud mirror.
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
Copy the code

2.5.2 Modifying the flutter. Gradle file in the Flutter installation directory

  • Path to the file: / opt/flutter/packages/flutter_tools gradle/flutter. Gradle
  • Modified contents:buildscriptJoin Ali Mirror
buildscript { repositories { //google() //jcenter() maven { url 'https://maven.aliyun.com/repository/google' } maven { url 'https://maven.aliyun.com/repository/jcenter' } maven { url 'http://maven.aliyun.com/nexus/content/groups/public' } } dependencies {classpath 'com. Android. View the build: gradle: 4.1.0'}}Copy the code