如何在macOS下启动第一个Flutter应用

Flutter介绍 - 图片来自简书App

Flutter是谷歌推出的一个基于Dart语言的跨平台开发框架，可以构建漂亮的原生应用。

Flutter特点

• 快速开发
• 富有表现力和灵活的UI
• 接近原生应用性能

Flutter安装

系统要求

• 操作系统 - macOS (64-bit)
• 磁盘空间 - >=700MB
• 工具
  • bash - 执行Flutter命令的终端软件
  • curl - 使用URL传输数据的命令行软件
  • git - 免费开源的分布式版本控制软件
  • mkdir - 创建目录或者文件夹的命令
  • rm - 删除目录或者文件的命令
  • unzip - 解压由zip压缩的命令
  • which - 查找并显示给定命令的绝对路径的命令

软件要求

• Flutter SDK
• Android toolchain
• iOS toolchain
• Android Studio
• IntelliJ IDEA
• VS Code

安装步骤

• 下载Flutter SDK

curl -O https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.0.0-stable.zip

• 解压文件

unzip flutter_macos_v1.0.0-stable.zip

• 设置环境变量

$ export PATH="$PATH:`pwd`/flutter/bin"

• 验证Flutter环境变量是否成功
  在终端执行flutter命令有如下输出则表明Flutter SDK安装成功。

SDK环境变量配置验证 - 图片来自简书App

• 运行 flutter doctor命令

flutter doctor

执行以上命令可以诊断当前系统中的Flutter开发环境是否配置完成，如果配置成功那么会看到如下的输出。

你的Flutter开发环境是否安好 - 图片来自简书App

Doctor环境诊断解读

我们知道要完成Flutter跨平台开发，需要配置iOS开发环境、Android开发环境和Dart开发环境，针对每一项的开发环境我相信有经验的朋友都会轻松的搞定，那么我就说一下大家常用的开发环境的基本配置吧。

• iOS开发环境
  • 集成开发环境 - Xcode（可能需要安装Command Line Tools）
  • iOS设备或者模拟器
  • CocoaPods
• Android开发环境
  • 集成开发环境 - Android Studio 和 IntelliJ IDEA
  • Android设备或者模拟器
  • Gradle

我们从Dart语言的官网上可以看到支持Dart语言开发的工具如下：

集成开发环境或者编辑器 - 图片来自简书App

那么我们选取目前比较流行的VS Code作为Dart开发环境，此时我们只需要安装VS Code并通过扩展安装Dart语言插件即可进行Dart开发。

上图中的环境诊断中Android Studio和IntelliJ IDEA集成开发环境表示的对勾是指安装了Flutter插件，flutter doctor识别了该插件，而VSCode也是同样的道理。
对于连接到的设备也就是Connected device选项是指启动了模拟器或者通过USB连接了物理设备。

在不启动Xcode的前提下，可以使用open -a Simulator快速启动一个iOS模拟器

在这里我就赘述Android开发环境和iOS开发环境的搭建了，我相信凭借大家的智慧肯定能搞定开发环境的搭建，在这里我只就Flutter官网上提到的部署应用到iOS设备的章节说一下注意事项。

部署应用到iOS设备 - 图片来自简书App

在上述第三步通过brew安装cocoapods时，暂时通过gem install cocoapods进行安装，而不使用brew install cocoapods命令安装。

通过brew安装的cocoapods的版本比gem安装的版本低，当然我们也可以使用brew进行快速安装，其中的原因得看Flutter在构建应用时使用的cocoapods的版本，我暂时没有去看flutter命令的相关代码，因此不敢在此妄言。

Flutter创建项目并启动

上面我们说了环境搭建过程中的注意事项，接下来我们需要创建一个新项目并启动，有两种方法可以创建新项目：

• 通过flutter命令进行创建 - 你有没有去看看flutter命令的子选项并了解其中的含义，我们要知其然知其所以然，不是么
• 通过Android Studio或者IntelliJ IDEA创建 - 我们安装Flutter插件是干嘛的，你知道么😆

对于项目的创建我就不一一赘述了，我给大家来几张iOS模拟器和Android模拟器运行成功的截图吧，大家可以自行探索Flutter的强大功能。

iOS运行截图 - 图片来自简书App Android运行截图 - 图片来自简书App

参考

• macOS Install

总结

通过以上内容的梳理，我知道了Flutter开发环境是如何搭建的，也对Flutter这个跨平台框架有了一个更加直观的认识，我相信这仅仅是开始，要探索更多关于Flutter框架的信息请移步Flutter官方文档浏览更多的资源，我相信越来越多的跨平台开发框架的流行不仅仅是对原生应用开发的补充，而是颠覆了一些传统软件开发的流程，我更坚信社会的进步离不开科学技术的不断普及和发展，让我们一起迎接科学技术的更新迭代吧。