【Flutter】在MacOS上的配置(Android Studio+VSCode)

2,547 阅读2分钟

大部分参考自:官方中文网,虽然写得很清晰了,不过难免还是有点坑要踩。

1. 安装开发工具

安装Flutter的SDK

Flutter SDK下载地址 下载好了解压后会有个flutter的文件夹,里面就是sdk的文件。 我的云盘分享,密码:tv6i

安装Xcode

直接去AppStore下载Xcode,然后安装即可,这里不多做赘述了。

安装Android Studio

Android Studio官网下载地址 翻不了墙就去猴哥推荐的这里(感谢)下载

安装VSCode

VSCode官网下载地址

2. 配置环境变量

  1. 打开终端去根目录:cd ~
  2. 打开bash_profile:open -e .bash_profile
  3. 如果没有就创建:touch ~/.bash_profile,接着再打开
  4. 编辑bash_profile:
// Flutter SDK路径
export PATH=/Users/用户名/你的flutter文件所在目录/flutter/bin:$PATH
// 由于众所周知的原因,需要设置镜像路径
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

5. 保存关闭,运行bash_profile:source $HOME/.bash_profile

3. 配置Android环境

最麻烦这个了,先打开Android Studio。

1. 下载Android SDK和SDK Tools

2. 安装Flutter插件(好像顺便也会装好Dart插件)

3. 下载模拟器

这里是我已经下载好了的,没装过的点这个进去下载

4. 配置VSCode

1. 安装Flutter插件(好像顺便也会装好Dart插件)

2. 确认Flutter SDK路径

这时候右下角会有个弹窗,点击Locate SDK选项,然后选择放置解压后的flutter文件夹里面的bin文件夹的路劲即可,可能还是会显示错误,重启一下VSCode再来确认一次就好了(坑)。

5. 更新环境变量(主要安卓的)

  1. 打开终端回到根目录:cd ~
  2. 打开bash_profile:open -e .bash_profile,更新bash_profile:
// Flutter SDK路径
export PATH=/Users/用户名/你的flutter文件所在目录/flutter/bin:$PATH
// Android SDK路径
export ANDROID_HOME="/Users/用户名/Library/Android/sdk"
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
// 由于众所周知的原因,需要设置镜像路径
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

3. 保存关闭,运行bash_profile:source $HOME/.bash_profile 4. 检查环境变量:flutter doctor 全部OK了~ PS:如果Connected device错误,那就去到flutter文件的目录下,运行指令:flutter config --android-sdk /Users/用户名/Library/Android/sdk,确定好Android SDK的位置,再进行flutter doctor确认。

6. 立马创建运行Flutter工程吧!

Android Studio

点击创建 在这里选择设备,然后点击右边的启动图标就好了 运行效果

VSCode

command+shift+p,输入Flutter: New Project创建工程 在这里切换设备 启动运行 运行效果

真机运行的问题

其实就是证书问题,去到iOS工程添加再运行即可(Android Studio里面点击这个即可直接跳转) 每个flutter工程都会有对应的android和ios项目 另外,在VSCode上用Start Debugging真机运行工程会出现白屏的情况,目前发现只能在VSCode的终端中使用flutter run运行。

Done.