【flutter】0. 搭建一个多端 flutter 开发环境

1. 前言

最近在做一个智能家居的应用，可能需要用到 APP 与设备之间的交互。所以就寻思自己搞一下。

很早之前的我了解到的 APP 的开发无非就三类：

原生开发
基于 react-native
flutter

介于一些文章我了解到，原生开发毕竟还要学一门新的开发语言，所以 PASS 了。RN 的用户体验相对来说又比较差。就选了现在相对比较居中开发起来和 React 比较相似的 flutter。

以下谨以此来搭建一个简单的 demo。也希望在学习的过程中有些输出，能帮助到更多的人。

2. 环境搭建

记得提前安装 vscode，由于我用的是 mac，所以这里只展示在 macos 系统下的安装方案。

2.1 安装 xcode（ios 应用必须）

打开终端，输入以下命令

bash 复制代码

xcode-select --install

2.2 下载 Flutter SDK

访问官方站点或者国内镜像站点，下载需要的的 sdk 版本（本教程用 35.7 举例），安装目录到指定位置，比如我这里是 /dev 文件夹。安装好后解压出来会得到一个 /flutter 文件夹。记住 /dev/Flutter 这个路径，后面会用上。

2.3 下载 Android-studio（安卓应用必须）

访问官方网站下载安装即可.

2.4 安装 vscode 拓展

打开 vscode，在 vscode 上安装以下拓展插件：

Flutter
Android iOS Emulator
Flutter color （可选）

2.5 配置安卓环境

下载完 Android studio 之后，咱需要在 Android SDK 再安装以下依赖：

Android SDK Build-Tools
Android SDK Command-line Tools
Android Emulator
Android SDK Platform-Tools

把上述插件安装完成之后，在终端运行：

bash 复制代码

flutter doctor --android-licenses

此时会要求你通过协议请求，全部 Y 接受就行。当得到以下返回就配置完成了：

bash 复制代码

All SDK package licenses accepted

完成以上步骤后只需要再次执行 flutter doctor，终端提示安卓插件前面打勾，说明安装成功：

2.6 配置环境变量

针对安卓开发环境需要额外配置一些参数(参考自己的安卓 sdk 的安装位置）：

bash 复制代码

# Android SDK
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
export PATH=$PATH:$ANDROID_SDK_ROOT/cmdline-tools/latest/bin

# Android Studio Embedded JDK
export JAVA_HOME="/Applications/Android Studio.app/Contents/jbr/Contents/Home"
export PATH="$JAVA_HOME/bin:$PATH"

3 初始化项目

以上依赖安装完之后，打开 vscode 的命令面板，输入 flutter，会有以下三个选项，选择 new project 选项：

等待项目初始化完成进入下一步。

3.1 进入 web 开发模式

此时如果在未安装 xcode 和 Android studio 的情况下，只能进入 web 开发模式。输入如下命令即可：

bash 复制代码

flutter run -d web-server

终端提示端口号，即为 web 服务启动成功。

3.2 进入安卓开发模式

先启动安卓端的 emulators。如下：

然后再执行 flutter run

3.3 进入 macOS 开发模式

先提前安装好 XCode。

bash 复制代码

flutter run -d macOS

3.4 进入 IOS 开发模式

3.4.1 安装依赖程序

mac 端主要需要安装两个比较重要的依赖，一个是 Xcode，一个是 cocoapods

Xcode的安装方式很简单，直接在应用商店搜索就能下载。

这里主要讲一下 cocoapods 的安装方式。（这里最好是安装brew，效率翻倍）

由于 cocoapods 是依赖 ruby 的，但是mac 自带的ruby版本比较低，所以先安装ruby，这里我用的 brew 下载，首先执行以下代码：

bash 复制代码

brew install ruby

// 把ruby 的环境变量更新到启动脚本
echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

// 查看版本
ruby -v

然后开始安装 cocoapods，这里我们用 gem 安装(需要管理员权限）：

bash 复制代码

sudo gem install cocoapods

接下来我们就可以愉快的进入好看的 IOS 界面进行开发了。

DEBUG

既然开始开发了，难免需要知道如何 debug 和查看日志，这里需要稍微注意一下，如果想要在控制台看到对应的输出日志，你需要在 vscode 的侧边栏找到 RUN AND DEBUGS。

接下来，咱们就可以开始愉快的开发了。