前言:
各位同学大家好 在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