Flutter

Mac环境下 搭建 Flutter iOS环境以及让 Flutt

2020-08-11  本文已影响0人  XieHenry

一、准备工作

1、升级 Macos 系统为最新系统
2、安装最新的 Xcode
3、电脑上面需要安装 brew https://brew.sh/(也可以用另外的一个源,安装方式在我的简书里有写,安装比较快)

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

1、下载 Flutter SDK
https://flutter.cn/docs/get-started/install/macos

2、把下载好的 Flutter SDK复制到你想安装 SDK的目录下:如
/Users/admin/flutter_mac/flutter

image.png

备注:电脑上直接下载下来就是解压过的,因此直接将下载的包复制过来即可(flutter_mac是自己又建了个文件夹。)

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

vim ~/.bash_profile
export PATH=/Users/admin/flutter_mac/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

备注:第一条路径需要根据自己的环境配置,如果不知道怎么配置,就直接将flutter这个文件夹拖拽到终端,就可以显示路径。

source ~/.bash_profile 

以上操作完成之后,初步完成。另外需要检查一下是否安装成功。命令如下:

flutter -h
安装成功.png

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

有的设备第一次运行 flutter doctor 的时候会提示下面错误,就进入四进行安装


出错结果.png

我的运行之后是下图:


image.png

我安装了VSCode,提醒我安装一个东西,将提示的地址复制到浏览器,会有一个install按钮,点击之后自动跳转到VSCode安装。

四、 配置 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 ios-deploy cocoapods
pod setup

执行完成上面命令后然后重新运行: flutter doctor 如果出来下图表示 ios 的环境配置完成。(我还未安装安卓的环境,因为会有部分错误)


成功.png

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

进入自己的代码目录下,命令行创建项目

sudo flutter create flutterdemo
image.png

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

先cd到项目的文件夹,然后

sudo chmod -R 777 flutterdemo

顺便再修改一下flutter SDK的权限。

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

可以双击运行了.png

8.在 Vscode 中配置 开发 Flutter 项目

1、Vscode 中安装 Flutter 插件 Dart 插件。
2、Vscode 中打开 flutter 项目进行开发。

在这里进行搜索安装.png image.png

等一会就可以运行成功了。

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

上一篇 下一篇

猜你喜欢

热点阅读