This article is edited and output jointly by Aixueyuan platform

Original author: Love School – Mobius Ring

Flutter has been around for a while, but it hasn’t really entered the developer world until The 2018 Google Developer Conference in Shanghai. The emergence of Flutter has opened up a new direction for cross-platform development, but there are not many corresponding Chinese learning documents. Therefore, for this consideration, we will continue to publish a series of practical learning documents on Flutter and accompanying demos for everyone to learn. A journey of thousands of miles begins with a single step. Now we will begin the first chapter of Flutter into the pit — Build a Flutter development environment.

Flutter installation

About the installation of Flutter, this article takes macOS as an example to explain the details of Flutter installation in macOS. For other platforms (Windowns and Linux), see the official documents.

Prepare a ladder or use a domestic mirror

Those who have done development know that domestic access to Google is not possible, so we need to do some pre-configuration here, and those who have a ladder can skip by themselves. Don’t worry if you don’t have a ladder. The official Flutter will not give up our important users. They have created a temporary mirror for Chinese developers to add environment variables to the current user environment.

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

Note: This image is a temporary image and is not guaranteed to be available all the time. Readers can follow Using Flutter in China to get the latest information about the image server.

Access to Flutter the SDK

There are several ways to obtain Flutter:

  1. Go to the Flutter website to download a stable and available installation package and go to the Download page
  2. The first method may involve scaling the wall, or downloading the Flutter installation package directly from Github.Go to the Download page. Corresponding to the instructionsgit clone -b dev https://github.com/flutter/flutter.git(The command can be adjusted for the current version)

The first one requires decompression and the second one does not, so put them where you want them

Updating environment variables

We all know that flutter is not a global variable at this time. To facilitate future calls, we need to configure flutter globally as follows:

export PATH= ~/developer/flutter/bin:$PATH// Replace the location of the flutter with your ownexport ANDROID_HOME="~/Library/Android/sdk"// Android SDK directory, replace with your ownexport PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Copy the code

Open (or create) the ~/.bash_profile file and paste the following command into it. Note: here the path of Flutter and Android SDK needs to be replaced with your own. Save and runsource $~/.bash_profileRefreshes the current terminal window.

Run the flutter doctor

After the above steps, we can now run the following command to see if we need to install additional dependencies to complete the installation. This process may take a while the first time, but the next time will be much faster:

flutter doctor
Copy the code

This command relies on checking your environment and displaying the report in a terminal window. Here is the output from my run:

Abnormal operation:

[-] Android toolchain - develop forAndroid devices, the Android SDK at/Users/obiwan/Library/Android SDK ✗ Android SDK is missingcommandline tools; Download from https://goo.gl/XxQghQ, the Try re - installing or updating your Android SDK, visit https://flutter.io/setup/#android-setup for detailed instructions.
Copy the code

Common errors are that the xcode or Android Studio version is too low, or there is no ANDROID_HOME environment variable, etc. Please follow the instructions.

Normal operation:

Here we only focus on the red box, there are four parts to explain one by one (Android, not considering the case of IOS for the moment, treat the same) :

  • The first part monitors the results of dependencies related to Flutter. If Flutter is run for the first time, it will be downloaded first.
  • The second part goes into the detection of Android SDK and Java. If those items go missing, the red mark can be displayed in front of those items. Those items can be configured according to those missing items.
  • The third part is about the installation of the Android Studio plug-ins (Flutter and Dart). The installation of the plug-ins will be explained in detail in the next chapter.
  • The fourth part is the detection of connected devices. If there is no startup device, it shows no available device.

Install the compiler for the Flutter plugin

There are many compilers suitable for Flutter (IDE, VSCode, Xcode). Here I will use Android Studio as an example to demonstrate how to install Flutter plug-ins (note: Android Studio requires 3.0 or later) :

  1. Start Android Studio and open the Plugins Preferences (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
  2. Select Browse repositories… , select the Flutter plugin and click Install.
  3. The plug-in takes effect after you restart Android Studio.

Experience the Flutter

After the above steps, the environment required by Flutter has been basically configured. Now we will create an engineering practice to determine whether our configuration is feasible:

Create an

  1. Open Android Studio and select File>New Flutter Project
  2. Select Flutter Application as the Project type and click Next
  3. Enter a project name, such as MyApp, and click Next
  4. Click Finish
  5. Has been created

The following is the directory structure of the default Flutter project:

In the project directory, the code for your application is locatedlib/main.dart.

run

Dart Not Support or flutter Not found SDK may occur if you click on the green triangle to execute the application. Check that the flutter is properly configured in the following two places:
Enable Dart support:

Flutter SDK path configuration:

Then run it again, that is, the execution process of the log interface is as follows:

–HelloWorld:

Note: In the next article we will walk you through how to create our first Flutter application and the related code structure analysis

Dear readers, from today on, we will continue to publish Flutter practical learning documents and problem analysis. If you have any questions about Flutter that we have not yet published, you can also leave a message to us! We will give priority to output according to your requirements, thank you!