MacOS安装flutter开发环境

MacOS安装flutter开发环境封面

文章目录

前言

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.
在任何屏幕构建apps。Flutter是一个谷歌开源框架，用一套代码就可以构建优美的，本地编译的，多平台应用。

我们先来安装好开发环境，开启学习之旅。

一、安装Homebrew

Homebrew是mac 上用来安装软件的一个工具。

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

将以上命令粘贴至终端运行。

二、下载flutter SDK

https://flutter.dev/docs/get-started/install/macos
打开flutter官网，点击下载链接下载到本地：flutter_macos_v1.5.4-hotfix.2-stable.zip
解压，打开终端

$ 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

三、添加.bash_profile

相当于windows的环境变量path的配置

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

在打开的文本编辑器中输入以下配置

# 这是提前安装好的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

保存关闭后，在终端输入以下命令让配置生效

$ source .bash_profile

四、检测flutter 是否安装成功

$ flutter doctor

根据输出的提示信息安装相应的依赖

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环境配置
1、从App Store安装最新版本Xcode
配置Xcode命令行工具，终端运行以下命令：

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

把app部署到iOS设备：

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

启动 iOS模拟器：
打开终端运行：

$ open -a Simulator

五、创建并运行一个简单的flutter app

$ flutter create my_app
$ cd my_app
$ flutter run

即可在模拟器打开该app

六、安卓环境配置

首先把 java jdk 和 sdk自行安装好。
下载 android studio
https://developer.android.com/studio
下载后进行安装，安装时弹出“Unable to access Android SDK add-on list”
不要选择 Setup Proxy
不然启动就会出现 SDK tools directory is missing错误提示

初次打开android studio在创建新项目的时候，会提示下载Android SDK
点击下载，等待安装完毕。

在创建好项目后，android studio会自动使用Gradle构建项目并且把项目显示得更友好，且自动运行app

首次运行app, 检测到未安装任何模拟器，则进入模拟器管理，选择一个手机型号然后选择一个系统镜像并下载，下载完成后做简单的模拟器设置就可打开模拟器打开app。