Mac 搭建Flutter iOS开发环境, Xcode 配合 Visual Studio Code 开发

1) 获取Flutter SDK

1 前往Flutter官网下载其最新可用的安装包

2 解压安装包到你想安装的目录,比如

$ cd~/Development

$ unzip ~/Downloads/flutter_macos_1.22.3-stable.zip

2) 配置环境变量, 使用镜像

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,将如下环境变量加入到用户环境变量中

1 $ vi ~/.bash_profile

2 按i进入编辑模式,添加

export PUB_HOSTED_URL=https://pub.flutter-io.cn  // 国内用户需要设置

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn  // 国内用户需要设置

export PATH=~/Development/flutter/bin:$PATH  // ~/Development 该路径对应的是第一步中Flutter SDK解压安装的路径

3 按esc, 按:wq, 回车退出编辑,并生效

$ source ~/.bash_profile

4 验证目录是否在已经在PATH中

$ echo $PATH

如果输出的路径中包含刚才配置的路径,则设置成功

3) 安装Android SDK

直接利用Android Studio这个软件安装就行,同时也能安装对应的Flutter插件,后期代码的编写也是用这个软件

1 前往官网下载安装最新的Android Studio

2 打开软件,会默认安装对应的SDK和配置好环境变量

3 点击 Preferences -> Plugins, 选择 Flutter, 点击安装,会关联安装对应的Dart插件

4 重启,就能在页面看见 创建Flutter项目 的选项, 其中Flutter SDK路径就选择自己对应安装路径下的SDK就行

4) 安装 brew

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

5) 分别执行下面命令

$ 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

可能在运行 $ brew install --HEAD libimobiledevice 会报错,多试几次就成功了--__--||

6) 检测是否配置完成

$ flutter doctor

至此, Flutter开发环境就配置好了,可以通过运行以下命令查看是否需要安装其它依赖项来完成安装

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了,没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务(以粗体显示)

7) 命令行工具生成 Flutter 项目

$ sudo flutter create flutterdemo

8) 修改 Flutter Sdk 目录的权限以及项目的 权限

$ sudo chmod -R /Users/darren/Development/flutter (Flutter SDK 目录)

$ sudo chmod -R /Users/darren/Desktop/VS Code projects/Flutter/flutterdemo (项目目录)

9) 运行iOS项目, 注: 打开项目之前一定得先修改权限

Xcode打开项目目录 -> ios -> Runner.xcodeproj -> Command + R 运行

10) VS Code 中安装 Flutter 插件 Dart 插件。

安装VS Codehttps://code.visualstudio.com/

设置 -> Extensions -> 搜索并安装Flutter插件Flutter Widget Snippets插件 Dart插件

11) 用VS Code 打开 flutter 项目进行开发, 执行

$ flutter run

你可能感兴趣的:(Mac 搭建Flutter iOS开发环境, Xcode 配合 Visual Studio Code 开发)