Flutter mac os 开发环境搭建

前言:

各位同学大家好 在flutter 官网也有环境搭建的教程 ，我现在最近在学习flutter，所以就按照自己的安装过程 整理一下环境搭建的整个流程 分享给大家

一 准备工作:

1、升级 Macos 系统为最新系统
2、安装最新的 Xcode
3、电脑上面需要安装 brew https://brew.sh/

二、下载 Flutter、配置 Flutter 环境变量、配置 Flutter 镜像

1、下载 Flutter SDK

https://flutter.dev/docs/development/tools/sdk/releases?tab=macos

2、把下载好的 Flutter SDK 随便减压到你想安装 Sdk 的目录如

/Users/aisheng/flutter_mac/flutte

QQ截图20200608150609.png

3、把 Flutter 安装目录的 bin 目录配置到环境变量，然后把 Flutter 国内镜像也配置到环境 变量里面

vim ~/.bash_profile

export PATH=/Users/aishengwanwu/flutter_mac/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 -h 如果能出来一些命令说明 flutter sdk 配置成功。
注意如果配置完成后输入 flutter -h 告诉你 flutter 不是内置命令之类的错误的话，可能 sdk 没有配置成功，也可能 sdk 下载的时候没有下载全

三、运行 flutter doctor 命令检测环境

第一次运行 flutter doctor 的时候会提示下面错误

QQ截图20200608152837.png

✗ libimobiledevice and ideviceinstaller are not installed. To install with
 Brew, run: 
brew update 
brew install --HEAD usbmuxd
 brew link usbmuxd brew install --HEAD libimobiledevice
 brew install ideviceinstaller 
✗ ios-deploy not installed. To install: brew install ios-deploy
 ✗ CocoaPods not installed. 
    CocoaPods is used to retrieve the iOS platform side's plugin code that 
    responds to your plugin usage on the Dart side. 
    Without resolving iOS dependencies with CocoaPods, plugins will not work 
    on iOS.
    For more info, see https://flutter.dev/platform-plugins 
   To install: 
    brew install cocoapods pod setup

四、 配置 Flutter Ios 环境

1、如果电脑上面没有安装 brew 的话首先第一步需要安装
brew https://brew.sh/

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

QQ截图20200608160316.png

2、分别执行下面命令

 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
 brew update 
 brew install --HEAD usbmuxd
 brew link usbmuxd 
 brew install --HEAD libimobiledevice 
 brew install ideviceinstaller 
 brew install ios-deploy 
 brew install cocoapods
 pod setup

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

QQ截图20200608173543.png

brew update

QQ截图20200608173614.png

brew install --HEAD usbmuxd

QQ截图20200608173820.png

brew link usbmuxd

QQ截图20200608173914.png

brew install ideviceinstaller ios-deploy cocoapods

QQ截图20200608174133.png

pod setup

QQ截图20200608174605.png

注意：

如果运行命令失败请运行 brew doctor 并按照说明解决问题。
执行完成上面命令后然后重新运行：

flutter doctor 如果出来下图表示 ios 的环境配置完成

QQ截图20200608174718.png

五、命令行工具生成 Flutter 项目

sudo flutter create flutterdemo

QQ截图20200608174905.png

六、修改 Flutter Sdk 目录的权限以及项目的 权限

QQ截图20200608174959.png

七、Xcode 打开 flutter 项目 模拟器运行项 目

QQ截图20200608175044.png

注意：打开项目之前一定要修改权限

QQ截图20200608175117.png

八、在 Vscode 中配置 开发 Flutter 项目

1、Vscode 中安装 Flutter 插件 Dart 插件。

QQ截图20200608175230.png

QQ截图20200608175301.png

2、Vscode 中打开 flutter 项目进行开发

3、运行 Flutter 项目

flutter run

各种快捷键

r 键：点击后热加载，也就算是重新加载吧。
 p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
 o 键：切换 android 和 ios 的预览模式。
 q 键：退出调试预览模式。

最后总结:

我也是个初学 flutter 的新手 个人觉得dart语言和flutter 混编UI框架 对于有原生开发经验的同学还是比较容易上手 ，有兴趣学的的同学可以私下多多交流 ，如果觉得文章还不错麻烦给个star 和转发 谢谢 （个人qq/微信：1693891473）

QQ 交流群:

92437359.png