The configuration of Flutter is getting easier and easier, especially at the beginning when there are too many things to configure. Android Studio is chosen here as the tool to develop Flutter, and VC will be updated later.

1. Install the Flutter

The steps here are similar to the official ones, and you can refer to the official website directly.

1.1 Download the SDK of Flutter

1.1.1 enterwebsite

1.1.2 Selecting the corresponding system

1.1.3 Select the latest version to download

1.1.4 Decompressing the SDK package

After decompressing, select an installation path.

Because the Flutter SDK includes many command-line tools. We need to configure the environment variables, so we recommend that you install the command line tools where you normally put them! Here I put the home folder ~/flutter (just for reference, where to install flutter depending on your own habits)

1.2 Configuring Environment Variables

1.2.1 Configuring a Mirror

Because Flutter needs to download the required resources from the authorities when it is running. If you don’t have a “ladder”, you will need an image server. Here is a friendly reminder from the official documentation.

Go to your Shell’s configuration file to configure it. If you are using bash then configure ~/.bash_profile if you are using ZSH (the default is ZSH on new Mac systems) then configure ~/.zshrc

Command to view the Shell default environment:

$ echo $SHELL
Copy the code

# Flutter mirror configuration export PUB_HOSTED_URL=https://mirrors.tuna.tsinghua.edu.cn/dart-pub export End FLUTTER_STORAGE_BASE_URL=https://mirrors.tuna.tsinghua.edu.cn/flutter # Flutter mirror configurationCopy the code

1.2.2 Configuring the Flutter Environment Variables

Next, configure the path of the Flutter command line tool, again in the corresponding Shell configuration file

Export Flutter =~/ Flutter export PATH=$Flutter /bin:$PATH # Flutter environment variables are configured endCopy the code

After the configuration is complete, restart the terminal or run a command to load the configuration

Source ~/.bash_profile $source ~/.zshrcCopy the code

Next, we can see if the Flutter is configured. The Flutter has a Doctor detection command. Designed to detect your Flutter environment.

$ flutter doctor
Copy the code

The green hook means that the configuration is OK, and the Red Cross means that the configuration is not complete.

Configure the Android environment

2.1 Installing Android Studio

We will install Android Studio first and you can download it from the official website in China

2.2 configure the SDK

Follow the installation wizard to install the SDK without climbing the wall. Enter CMD + preferences and make sure to install as shown below:

2.3 Installing the Android Studio plug-in

Go to the Android Studio preferences screen and click install the Flutter plugin:

When the Dart plug-in installation screen is displayed, click Install to Install it as well:

After the installation is complete, restart Android Studio and you will see the following interface:

2.4 Resolve licensing issues

If license issues are found while running flutter Doctor.

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

$ flutter doctor --android-licenses
Copy the code

2.5 Configuring the Android Emulator

If you feel that android built-in simulator is not very easy to use, you can choose a domestic Night god simulator, in fact, there are many similar Android emulators, choose it mainly because it has a Mac version (too much trouble can also use the system built-in simulator).

2.5.1 Download and Install

Go to the download page to download the installation package. Perform the installation operation, and the following two applications are displayed:

2.5.2 use

After opening VirtualBox, NoxAppPlayer will start the Nox emulator, which will be visible in the Android Studio project.

For those that have not been successfully installed, netease MUMu simulator can also be considered.

2.6 Solving Gradle Stuck problem

When we first run it, if we find that it’s stuck (if it’s not, don’t worry about it). The reason is that Gradle’s Maven repository is located abroad…… And then you get it.

Running Gradle task 'assembleDebug'...
Copy the code

The easy way to solve this problem is to mirror it, and then configure it.

2.6.1 Modifying the build.gradle file under the project

File path: Project -> Android -> gradle -> build.gradle

Find buildScript and AllProjects:

google()
mavenCentral()
Copy the code

Change to 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

The diagram below:

2.6.2 Modifying the Flutter. Gradle file in the Flutter installation directory

File path: flutter/packages/flutter_tools/gradle/flutter gradle

The modification is as follows (add Ali mirror) :

buildscript { repositories { //google() //mavenCentral() 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. Tools. Build: gradle: 4.1.0'}}Copy the code

Run the sample project

3.1 Creating a Project

3.1.1 Default language creation

Create the project by using the following command. Note that the project name cannot be humped. Separate the project name with an underscore:

$ flutter create flutter_demo
Copy the code

Created:

3.1.2 Specify language creation

Open the iOS project and find that the language is Swift:

In fact, the language can be selected, iOS default is Swift, Android default is Kotlin, through help to see how to use:

$ flutter create --help
Copy the code

Delete the project and create a new OC project with the following command:

$ flutter create -i objc flutter_demo
Copy the code

3.2 Running the project on the CLI

3.2.1 Running items of iOS simulator

To open the iOS emulator, run the following command:

$ open -a Simulator
Copy the code

Then run the project on the emulator with the following command:

$ flutter run
Copy the code

Select iOS emulator:

Run the completed sample project:

At the same time, you can see hot update, hot restart and other related control commands:

3.2.2 Running the project on iOS real machine

In order to run the project on the real machine, we need to run it on the real machine with Xcode first, because the iOS real machine requires a signature.

One drawback of Xcode is that there are no r, r, etc control commands.

Execute the flutter run command again:

The process is slow:

I usually use Android Studio for development, which has r, R and other control commands.

3.3 Android Studio runs projects

Open the project with Android Studio, where main.dart is where we write the code:

3.3.1 Real machine running project

Next, run the project. You can choose from iOS emulator, Android emulator, iOS real machine and browser. We use iOS real machine to run the project

Take a look at the effect of successful operation:

3.3.2 An error Occurs when IProxy cannot be opened

When the real machine is running, you may encounter the following error:

Could not open iProxy because the developer could not be verified.Copy the code

We can solve this problem by using the following command:

sudo xattr -d com.apple.quarantine 
sudo xattr -d com.apple.quarantine /Users/mac/flutter/bin/cache/artifacts/usbmuxd/iproxy
Copy the code

Where /Users/ MAC /flutter is my flutter path.

Related websites

  • Website of Flutter: Flutter
  • Flutter Chinese: FlutterChina. Club /get-started…
  • Flutter development document: docs. Flutter. IO/Flutter/dar…
  • Dart: dart.cn