Preface
This article is a personal record of the process of building a flutter development environment from scratch to running the project using fvm on the macOS system. It is not a tutorial and is for reference only. If you have any questions or suggestions, please leave a message in the comment area.
Attached is the development equipment configuration.
1. Install vscode
Use vscode as the encoding tool
Download address: Download Visual Studio Code - Mac, Linux, Windows
After downloading, unzip and install
2. Install Xcode and Android Studio
Xcode
To run Flutter applications on iOS real devices or simulators, you need to install Xcode
Install the latest stable version of Xcode from the Mac App Store
Android Studio
To run Flutter applications on real Android devices or emulators, you need to install Android Studio.
在 Download Android Studio & App Tools - Android Developers
Download and install the latest stable version of Android Studio
Choose the installation version according to your mac chip type
3. Configure the IOS simulator
Enter the command code in the terminal to run the iOS simulator
open -a Simulator
PS：
Q: Where is the terminal?
Answer: Command key + space bar to call out the search pop-up window, search terminal, usually the first one
4. Install Homebrew
Homebrew is a package management tool for macOS, or package manager. It can be understood as a software store similar to the App Store. It is used here as a tool to install FVM.
Copy the following instructions to the terminal and press Enter to execute
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"The picture below shows the execution result after pressing Enter
Select the source yourself, enter the corresponding serial number and press Enter, enter Y to execute the script
Wait for a moment. Homebrew installation is completed as shown in the picture below. If the installation fails, try again from another source.
Here you are prompted whether you need to install Core, Cask, or services. You can decide whether to install them by yourself.
PS：
Q: What are Core, Cask and services?
Answer: Homebrew Core is the Homebrew core software repository
Homebrew cask is an enhanced tool based on brew, used to install Gui program application packages (.dmg/.pkg) on Mac, such as qq, chrome, etc. It first downloads and decompresses it into a unified directory (/opt/homebrew-cask/Caskroom), eliminating the need to download, decompress, drag and drop (install), etc. Likewise, uninstalling is quite easy and clean. Then soft link to the ~/Applications/ directory, which is very convenient and contains many commonly used software that are not found in the AppStore.
Homebrew Services is a launchctlsuite of services that can be used to manage installed services. macOS useslaunchctl commands to load services that run automatically at startup, whichbrew servicecan simplify the operation of lauchctl.
References:
Homebrew Core source usage help — USTC Mirror Help documentation
Homebrew and Homebrew-cask on Mac_Schuyler_yuan's blog-CSDN blog
homebrew learning (5) homebrew cask and homebrew services - Aima.com
The picture below shows the display after selecting installation and completing the installation.
The installation process here took a long time~
Homebrew installation reference:
How to automatically install Homebrew in China (domestic address) (Mac & Linux) - Zhihu
Homebrew usage reference:
Detailed explanation of using Homebrew, the second Mac App Store for macOS - Zhihu
5. Install FVM
Enter the following command in the terminal to copy the fvm library to the local
brew tap leoafarias/fvmAfter completion, enter the following command to install fvm
brew install fvmThe installation is completed as shown below
PS：
Q: What should I do if I want to uninstall them?
Answer: Enter the following corresponding commands into the terminal respectively
brew uninstall fvm
brew untap leoafarias/fvmReferences:
6. Configure SDK and dependent package resource environment variables
Enter the following command in the terminal to configure the Chinese image
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn FLUTTER_STORAGE_BASE_URL specifies the flutter sdk download source
export PUB_HOSTED_URL=https://pub.flutter-io.cnPUB_HOSTED_URL specifies the pub get (dependency package) download source
PS: There may be cases in China where the download cannot be made, so you can specify the mirror address by setting this variable. The mirror of the Shanghai Jiao Tong University Linux User Group is provided here as a backup.
export FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn
export PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cnReferences:
Configuring Flutter China Image – Jianshu-Mikel
7. Configure fvm and flutter environment variables
fvm
export FVM_HOME=$HOME/fvmflutter
export PATH=$HOME/fvm/default/bin:$PATH8. Flutter sdk version query and download
fvm -h gets all fvm instructions
fvm releases gets the installable sdk version
fvm install version number installs the specified version of sdk
The figure below takes the installation of version 3.10.2 as an example
fvm list to view the installed sdk version
Because version 3.10.3 was installed before, there are two versions in the list
fvm global version number sets the global default sdk version
After setting the global default sdk version, you can use fvm list to check whether it takes effect.
9. Flutter self-check
Enter flutter doctor in the terminal to check whether the current environment needs to install other dependencies (if you want to see more detailed output, -v just add a parameter)
PS：
This command will check your current configuration environment and generate a report in the command line window. Installing Flutter will come with the Dart SDK installed, so there is no need to install Dart separately. You need to read the report generated by the above command carefully to see if you have missed any dependencies that need to be installed or commands that need to be executed later (this will be displayed in bold text ).
If you follow the steps in this article, you should get the following report
As shown in the picture above, there is 1 error and 2 warnings. Next, we will solve them one by one.
[✗] Android toolchain - develop for Android devices
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from:
https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK
components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup
for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
Open Android studio. When opening it for the first time after installation, you need to configure and download some resources. Just click Agree and follow the next step.
Finally walk to finish
As shown below, select SDK Manager
Copy the path of the red box
Enter flutter config --android-sdk copied path in the terminal
Return to the interface shown below, select Android SDK command-line Tools in the list of SDK Tools , and click OK in the lower right corner to install it.
After the installation is complete, enter the command flutter doctor --android-licenses in the terminal and press Enter to execute
There will be several questions after execution. Just enter y and press Enter.
[!] Xcode - develop for iOS and macOS (Xcode 14.3)
[!] Xcode - develop for iOS and macOS (Xcode 14.3)
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin
code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install see
https://guides.cocoapods.org/using/getting-started.html#installation for
instructions.Enter the following command in the terminal to install cocoapods
sudo gem install cocoapodsAfter execution, the following error may appear
Follow the prompts and execute the following commands in the terminal
sudo gem install activesupport -v 6.1.7.3After the execution is completed, enter the following command again in the terminal
sudo gem install cocoapodscocoapods installation completed
[!] Network resources
[!] Network resources
✗ A network error occurred while checking "https://maven.google.com/": Operation timed outFind the files in turn (you can first search for flutter_toolsflutter/packages/flutter_tools/lib/src/http_host_validator.dart in the search bar of Finder and then enter step by step. I have two sdk versions here, so there will be two flutter_tools)
Open http_host_validator.dartthe file with vscode and https://maven.google.com/ modify it tohttps://dl.google.com/dl/android/maven2/
Search in the Finder's search barflutter_tools.snapshot，删除该文件，再重复执行本文的第六步，即在终端中再次配置sdk和依赖包资源环境变量
Execute flutter doctor again in the terminal to perform self-check
Shows no problem found
References:
Flutter Learning Journey (1)_Asuka Asuna is my wife’s blog-CSDN blog
10. Create and run the flutter project
First create a folder to store the project, open the folder with vscode, use the shortcut key control + ` to call out the terminal, enter the fvm flutter create project name in the terminal and press Enter to create the project
Running on iOS
Execute open -a Simulator in the terminal to open the iOS simulator (refer to step three of this article), then execute cd project name in the vscode terminal to enter the project folder, and finally execute fvm flutter run to run the project
Project runs successfully
Running on Android
Run Android Studio, open the project folder, and click Device Manager in the upper right corner (as shown below)
Then click Create device, select the device according to your needs and click Next (if you have already created the device, you can skip this step)
Select the system and click Next
Click Finish to complete device creation
Click the small triangle to run the device
Click the Window button to display the virtual machine window separately
Execute cd project name in the vscode terminal to enter the project folder, and then execute fvm flutter run to run the project (the first execution may take a long time)
Project runs successfully
End of article