preface

Flutter is a cross-platform mobile UI development framework developed by Google to quickly build high-quality native user interfaces on iOS and Android. Flutter can work with existing code. Flutter is being used by more and more developers and organizations around the world, and Flutter is completely free and open source.

From today, I will enter the study of Flutter. This paper mainly records the environment construction of Flutter.

Computer Environment: iMac (24-inch, M1, 2021)

Computer system: Mac OS 11.3

FlutterSDK: 2.5.1 – stable

The configuration of Flutter is much simpler than before. Android Studio was chosen as the tool to develop Flutter. There will be opportunities to update Visual Studio Code later.

A: the installationFlutter

The steps here are similar to the website of Flutter. You can also refer to the website of Flutter directly.

1.1 downloadFluttertheSDK

1.1.1 Get started

Go to the Website of Flutter and select Get Started.

1.1.2 Selecting the corresponding system

1.1.3 downloadSDK

Download the latest stable version package.

1.1.4 Decompression and ConfigurationSDK

After downloading, it is time to configure the SDK path.

Because the SDK of Flutter contains many command line tools, we need to configure the environment variables, so we recommend that you install the Flutter tools where you normally put them!

After unpacking this article, place it in the 🏡 directory ~/flutter (fyi, where to install flutter depending on your own habits).

1.2 Configuring Environment Variables

1.2.1 Configuring a Mirror

To run Flutter, you need to go to the official website to download the necessary resources. For well-known reasons, if there is no “ladder”, you need an image server. The Official Website of Flutter provides a reminder where to download the SDK.

Go to the corresponding Shell configuration file for configuration. ZSHRC is configured by default in the new system. ~/.zshrc is configured in the old system. ~/.bash_profile is configured in the old system.

ZSHRC hides the file while holding Shift + Command +. Hidden files can be shown or hidden.

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

1.2.2 configurationFlutterThe environment variable

Next, configure the path to the Flutter command line tool. Or in the configuration file of the corresponding Shell.

# Flutter configurationexport FLUTTER=~/flutter
export PATH=$FLUTTER/bin:$PATH
Copy the code

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

# zsh
source ~/.zshrc

# bash
source ~/.bash_profile
Copy the code

Next detect the Flutter environment using the Doctor detection directive.

flutter doctor
Copy the code

If the result is ✅, the configuration is OK, and ❎ is not configured.

The Flutter environment has been configured. The next step is to configure the Android environment.

Two: configure the Android environment

2.1 installationAndroid Studio

Download the latest installation package from the official website of Android Studio in China.

Select Mac with Intel Chip and Mac with Apple Chip for Apple M1 chip.

2.2 configurationSDK

According to the installation wizard, we need to install Android SDK, Android SDK Tools, Android SDK Command-line Tools, Android SDK platform-tools and Android SDK build-tools can be installed without climbing a wall.

You can also press Command + at the same time to enter the preference Settings, as shown below.

2.3 installationAndroid StudioThe plug-in

  • command + ,Open theAndroid StudioPreferences, installFlutterPlug-ins (welcome interfacePluginsModules can also be installed).

When you need to install the Dart plug-in, click Install to install it.

  • After the installation is complete, restart the systemAndroid Studio.

  • You can see in the welcome screen, it’s already thereNew Flutter ProjectOptions.

2.4 solveJDKThe problem of

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

2.5 Resolving license Issues

  • Run againflutterTest command offlutter doctorLicense issues will be found!

  • Terminal input the following command, and then allyCan.
flutter doctor --android-licenses
Copy the code

2.6 Configuring the Android Emulator

If you’re an M1 iMac, stick to the Android Emulator that comes with Android Studio and switch to the Nighthian emulator later. Just like the author. 😂

Android’s built-in emulator is ugly and slow, so we chose a domestic “Night God” emulator. There are many emulators like this, and this one was chosen mainly because it is available on the Mac.

  • Log in to the official website and download the latest installation package.

  • Install the emulator.

  • After installation, start inAndroid StudioIt’s going to be displayed.

If you encounter any problems during startup (such as getting stuck at 99%), please visit the Nighthgod Simulator For Mac Version FAQ.

2.7 solveGradleSticking problem

When the Flutter project runs for the first time, you will find that the Flutter project is stuck (if not, skip 2.7) because Gradle’s Maven repository is outside the country. You know (if you have a ladder, of course, forget I said 🤐).

This can be solved by configuring a mirror image (note: this is required for every Flutter project). The configuration is as follows:

2.7.1 Modifyingbuild.gradlefile

  • File path: Project –>Android –> build.gradlefile
  • Modified content: FindbuildscriptandallprojectsWill the inside of:
google(a)mavenCentral(a)Copy the code

Change the value to Ali Cloud Image

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.7.2 modifyFlutterIn the installation directoryflutter.gradlefile

  • File path:~/flutter/packages/flutter_tools/gradle/flutter.gradle

  • Modified content (added Ali mirror) :

Once configured, the Flutter project can be started normally and quickly.

conclusion

The setup for The Flutter development environment is now complete and relatively simple.

The next article will document the running and debugging of the sample project. Stay tuned.