MacOS installation flutter development environment

foreword

Build apps for any screen! Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.
Build apps on any screen. Flutter is a Google open source framework that can build beautiful, natively compiled, multi-platform applications with a single set of code.

Let's install the development environment first and start the learning journey.

1. Install Homebrew

Homebrew is a tool for installing software on mac.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Paste the above command into the terminal and run it.

2. Download flutter SDK

https://flutter.dev/docs/get-started/install/macos
Open the flutter official website , click the download link to download to the local: flutter_macos_v1.5.4-hotfix.2-stable.zip
unzip, open the terminal

$ cd ~/
$ mkdir development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip
# 添加 flutter到path变量
$ export PATH=/Users/wywar/development/flutter/bin

3. Add .bash_profile

Equivalent to the configuration of the environment variable path of windows

$ cd ~/
$ touch .bash_profile
$ open .bash_profile

Enter the following configuration in the opened text editor

# 这是提前安装好的java jdk
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_211.jdk/Contents/Home

# 这是安装好的 android sdk
export ANDROID_HOME=/Users/wywar/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools 
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/build-tools/28.0.3  

export PATH=/usr/local/bin:/usr/local/sbin:~/bin:$PATH

export PATH=/Users/wywar/development/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

After saving and closing, enter the following command in the terminal to make the configuration take effect

$ source .bash_profile

4. Check whether flutter is installed successfully

$ flutter doctor

Install the corresponding dependencies according to the output prompt information

wywar@wywardeMacBook-Pro ~ % flutter doctor
  ╔════════════════════════════════════════════════════════════════════════════╗
  ║ A new version of Flutter is available!                                     ║
  ║                                                                            ║
  ║ To update to the latest version, run "flutter upgrade".                    ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.4 19E266, locale zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
[✓] Android Studio (version 3.4)
[✓] VS Code (version 1.72.2)
[✓] Connected device (1 available)

• No issues found!
wywar@wywardeMacBook-Pro ~ %

ios environment configuration
1. Install the latest version of Xcode from the App Store
and configure the Xcode command-line tool. Run the following command on the terminal:

 $ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

Deploy the app to iOS devices:

$ brew update
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods
$ pod setup

Start the iOS Simulator:
Open a terminal and run:

$ open -a Simulator

5. Create and run a simple flutter app

$ flutter create my_app
$ cd my_app
$ flutter run

You can open the app in the emulator

6. Android environment configuration

First install java jdk and sdk by yourself.
Download android studio
https://developer.android.com/studio
and install it after downloading. During installation, "Unable to access Android SDK add-on list" pops up.
Do not select Setup Proxy
, or SDK tools directory is missing error message will appear when starting

When you open android studio for the first time and create a new project, you will be prompted to download the Android SDK,
click download, and wait for the installation to complete.

After creating the project, android studio will automatically use Gradle to build the project and display the project more friendly, and automatically run the app

When you run the app for the first time, if it is detected that no emulator is installed, enter the emulator management, select a mobile phone model and then select a system image and download it. After the download is complete, do simple emulator settings to open the emulator and open the app.