其实通读一下文档后的感觉就是还蛮复杂的,起码比windows下配置要复杂一下,可能也是我平时windows用的比较多吧,今天这篇文章就以最简单直接的方式引导在macOS
上配置Flutter开发环境
文章目录
准备
下载SDK
先配置一下镜像
下载sdk
设置sdk路径
解压sdk
添加`flutter相关工具`到`path`中
开始配置
运行 flutter doctor 检测本机当前环境
装插件
新建项目
运行项目
更新环境变量
ios配置:
打开xcode
Windows下配置Flutter开发环境
准备
- 操作系统: macOS (64-bit)
- 磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间)
- 工具: Flutter 依赖下面这些命令行工具
bash
,mkdir
,rm
,git
,curl
,unzip
,which
下载SDK
- 先配置一下镜像
由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
- 下载sdk
下载地址:https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos
选择最新的正式版本就行。
设置sdk路径
我在user目录下新建了一个FlutterSDK文件夹来存放:
解压sdk
执行命令:
cd ~/development unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip
就是进入存放sdk的目录,然后解压。
比如我的就是:
开始配置
- 运行 flutter doctor 检测本机当前环境
flutter doctor
执行完会看到一堆报错,别慌,都好解决的。
直接从下面的Android Studio开始看,提示flutter插件和dart插件没安装,还有就是没有设备可以连接,先一步一步来。
装插件
打开Android Studio,安装flutter插件,也会提示安装dart插件,装就完事了,然后会提示重启。
运行项目
新建项目之后会有一个默认的小demo模板,可以直接运行。
先选择一个模拟器,点击运行不会帮你自动启一个模拟器,要自己先手动启一个。
然后运行看看效果。
第一次运行初始化会有点慢,但是后面就快了,而且还有热重,如果不是特别大的项目,基本上不到1s就能看到效果了。
可以看到一个默认的项目 。
然后我们来改一下title 和 加一个 hello flutter。
这一步主要是体验一下热重载
代码就不贴了,改好直接按command+s就行。
可以看到是相当的快,不到1s,可以说是非常提升效率了。
看效果:
可以看到标题改了,而且中间也多了一行红色的hello flutter。
更新环境变量
上面基本上都没有什么难度,但是到这里可能就会遇到坑了,比如我就遇到了。。
为什么会有这一步呢,是因为上面我们执行export PATH=pwd/flutter/bin:$PATH的时候,只是暂时把flutter相关工具加入到path中,这一步呢,就是永久的加入到path,以便可以运行flutter命令在任何终端会话中。
官方的3步骤:
- 确定您Flutter SDK的目录,您将在步骤3中用到。
- 打开(或创建) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不同.
- 添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆Flutter的git repo的路径:
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置 export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
第一步sdk路径是我们自己知道的,ok直接执行第二步:
$HOME/.bash_profile
ok,爬坑之路开始了,别慌,直接带你跳坑。
你可能会遇到:
Permission denied
没有权限,然后搜解决办法,参考https://blog.csdn.net/qq_16525279/article/details/80245350
按照操作执行,但是又提示 sudo: chmode: command not found, 一直找不到原因。
注意了,我们其实可以直接打开.bash_profile文件的(一般在Mac的当前用户目录下):
open .bash_profile
没有的话就创建:
touch .bash_profile
然后再打开。
打开是这样的:
然后编辑,把镜像和flutter加进去:
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置 export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
PATH_TO_FLUTTER_GIT_DIRECTORY就是你flutter存放的路径。
比如我的就是这样的:
保存。
然后执行刷新:
source $HOME/.bash_profile
然后来验证一下是否成功,输出path:
echo $PATH
可以看到第一个就是新增的flutter路径,到此更新环境变量就完成了。
ios配置:
上面是基于Android Studio进行配置的,现在看一下ios的配置。
我们重新执行以下 flutter doctor 看一下:
这时候可以看到只剩下xcode和ios的报错了。
配置也可以,按照提示 安装cocoapods、libimobiledevice、ideviceinstaller等等就行。
实际上开发环境只有一个就行了,主要是xcode不识别dart文件,as中有flutter和dart插件,毕竟都是google的亲儿子,所以相对来说是最佳开发环境,但是还是可以运行到ios模拟器上看效果的。
打开xcode
终端执行:
$ open -a Simulator
打开一个ios模拟器。
然后as也能识别到并运行到ios模拟器中:
然后运行到ios模拟器上看看效果:
ok,到此就全部配置结束了,可能篇幅较长,但是图文的形式更容易理解些。
写作不易,点个赞支持一下呗 ^ _ ^