前言:
各位同学大家好 在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
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 的时候会提示下面错误
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-raygcrpQ-1591611320802)(https://upload-images.jianshu.io/upload_images/6865547-b4cf3a3c29675e6b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
✗ 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)"
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
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install ideviceinstaller ios-deploy cocoapods
pod setup
注意：
如果运行命令失败请运行 brew doctor 并按照说明解决问题。
执行完成上面命令后然后重新运行：
flutter doctor 如果出来下图表示 ios 的环境配置完成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nufd2g8T-1591611320811)(https://upload-images.jianshu.io/upload_images/6865547-78464e1e4f99ce09.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
五、命令行工具生成 Flutter 项目
sudo flutter create flutterdemo
六、修改 Flutter Sdk 目录的权限以及项目的 权限
七、Xcode 打开 flutter 项目 模拟器运行项 目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wOAPTIGw-1591611320812)(https://upload-images.jianshu.io/upload_images/6865547-ac4a600ea2d8c44d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
注意：打开项目之前一定要修改权限
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RNxdausx-1591611320813)(https://upload-images.jianshu.io/upload_images/6865547-42ec8270027e43d1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
八、在 Vscode 中配置 开发 Flutter 项目
1、Vscode 中安装 Flutter 插件 Dart 插件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SGE8xWHV-1591611320814)(https://upload-images.jianshu.io/upload_images/6865547-333729516b84184e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
2、Vscode 中打开 flutter 项目进行开发
3、运行 Flutter 项目
flutter run
各种快捷键
r 键：点击后热加载，也就算是重新加载吧。
p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
o 键：切换 android 和 ios 的预览模式。
q 键：退出调试预览模式。
最后总没弄好感觉
我也是个初学 flutter 的新手 个人觉得dart语言和flutter 混编UI框架 对于有原生开发经验的同学还是比较容易上手 ，有兴趣学的的同学可以私下多多交流 ，如果绝对文章还不错麻烦给个star 和转发 谢谢 （个人qq/微信：1693891473）
QQ交流群：
