最全面的Flutter开发环境搭建

前言

Flutter由于跨平台、支持快速开发、富有表现力和灵活的UI、高性能，测试版本一发步就备受关注。从2018年12月正式版本发布以来，在不到一年的时间里，在GitHub上的star就已经超过了78700，与已经发布4年多的React Native的差距非常小。在今年的移动者开发大会上，美团、阿里、腾讯都分享了其在Flutter上的实践。

学习任何一门语言，都从搭建环境开始，本文主要介绍Flutter开发环境的搭建过程以及开发工具的介绍，在后面会通过一个示例讲解如何运行。

准备工作

Flutter下载

官网下载Flutter SDK压缩包

官方地址：https://flutter.dev/docs/get-started/install，选择电脑系统后，机会跳转到下载界面，选择最新的稳定版本即可。（实测下载速度很快）

image.png

通过git下载，按照官方的建议，选择beta分支

git clone -b beta [email protected]:flutter/flutter.git

配置环境变量

把下载的flutter_macos_v1.9.1+hotfix.6-stable.zip解压，解压后会有flutter的文件夹，打开可以看到flutter目录结构如下：

image.png

接下来，我们需要配置镜像站点的环境变量，Mac系统可以通过终端去配置，命令如下：

vim ~/.bash_profile

在我们的环境里面增加两行：

export PUB_HOSTED_URL=https://pub.flutter-io.cn  
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

然后点击ESC键，shift+冒号，然后wq保存退出。这个时候flutter的环境已经配置好了，为了能够在其它目录也能够运行flutter的命令，需要将flutter的路径添加到全局变量中，需要在~/.bash_profile里面添加flutter的路径：

#路径需要替换成电脑flutter文件夹的路径，查看文件夹可以通过
#pwd
#/Users/CodingSnail/Documents/workspace/flutter
export PATH=$PATH:/Users/CodingSnail/Documents/workspace/flutter/bin

然后，我们可以通过flutter_doctor命令来执行flutter的诊断，查看当前的环境是否满足flutter程序运行的要求，结果如下图所示：

image.png

从诊断信息可以看出来：

• flutter的版本号和渠道
• flutter运行所需的Android环境有问题
• flutter运行所需的iOS环境有问题
• 摸机器或者真机没有连接上
  因为XCode包太大，电脑已经安装了Android Studio的环境，故不考虑iOS环境的修复，只进行Android环境的修复：

flutter doctor --android-licenses

修复完以后结果如下：

image.png

在安装的过程中会提示输入Y/N，全部输入Y就可以，修复完如下所示：

image.png

如何运行Flutter程序

image.png

1.在工程目录下面，通过命令行flutter_run即可

image.png

2.通过IDE来运行程序，目前支持的有Android Studio、XCode、Visual Studio Code、IntelliJ，通过IDE工具打开项目，点击run就可以。

如何开发Flutter程序

使用Android Studio来开发和调试Flutter程序，首先需要安装如下两个插件：

• Flutter插件：提供程序的运行、调试和热重载等功能
• Dart：提供Dart语言的支持

启动 Android Studio，打开菜单项 Preferences > Plugins，搜索 Flutter 插件并点击 install 进行安装。安装完毕后重启 Android Studio，Flutter 插件就生效了，Dart安装方式一样。

image.png

用 Android Studio 打开flutter目录下面的example文件夹，选择 flutter_view 工程（Open an existing Android Studio Project），然后定位到工具栏：

在 Target selector 中，我们可以选择一个运行该应用的设备。如果没有列出可用设备，你可以采用下面的两种方式：参考我在前面讲到的方法，也就是打开 AVD Manager 并创建一台 Android 模拟器；或是通过 open -a Simulator 命令，在不同的 iOS 模拟器之间进行切换。直接插入 Android 或 iOS 真机。
hello_world 工程稍微有点特殊，因为它提供了两个 Dart 启动入口：一个英文版的 hello world-main.dart，和一个阿拉伯语版的 hello world-arabic.dart。因此，我们可以在 Config selector 中进行启动入口的选择，也可以直接使用默认的 main.dart。在工具栏中点击 Run 图标，稍等 10 秒钟左右，就可以在模拟器或真机上看到启动的应用程序了。运行结果如下所示：

image.png