Flutter技术入门与实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.2 开发环境搭建

开发环境搭建还是非常烦琐的，任何一个步骤失败都会导致最终环境搭建不能完成。Flutter支持三种环境：Windows、MacOS和Linux。这里我们主要讲解Windows及MacOS的环境搭建。

1.2.1 Windows环境搭建

1．使用镜像

首先解决网络问题。环境搭建过程中需要下载很多资源文件，当某个资源更新不到时，就可能会报各种错误。在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

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

注意

此镜像为临时镜像，并不能保证一直可用，读者可以参考Using Flutter in China：https://github.com/flutter/flutter/wiki/Using-Flutter-in-China以获得有关镜像服务器的最新动态。

2．安装Git

Flutter依赖的命令行工具为Git for Windows（Git命令行工具）。Windows版本的下载地址为：https://git-scm.com/download/win。

3．下载安装Flutter SDK

去Flutter官网下载其最新可用的安装包。

注意

Flutter的渠道版本会不停变动，请以Flutter官网为准。Flutter官网下载地址：https://flutter.io/docs/development/tools/sdk/archive#windows。Flutter GitHub下载地址：https://github.com/flutter/flutter/releases。

将安装包zip解压到你想安装Flutter SDK的路径（如：D:\Flutter）。在Flutter安装目录的Flutter文件下找到flutter_console.bat，双击运行并启动Flutter命令行，接下来，你就可以在Flutter命令行运行flutter命令了。

注意

不要将Flutter安装到需要一些高权限的路径如C:\Program Files\。

4．添加环境变量

不管使用什么工具，如果想在系统的任意地方能够运行这个工具的命令，则需要添加工具的路径到系统path里去。这里路径指向到Flutter文件的bin路径，如图1-5所示。同时，检查是否有名为“PUB_HOSTED_URL”和“FLUTTER_STORAGE_BASE_URL”的条目，如果没有，也需要添加它们。重启Windows才能使更改生效。

图1-5 添加Flutter环境变量

5．运行flutter命令安装各种依赖

使用Windows命令窗口运行以下命令，查看是否需要安装任何依赖项来完成安装：

        flutter doctor

该命令检查你的环境并在终端窗口中显示报告。Dart SDK已经捆绑在Flutter里了，没有必要单独安装Dart。仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务。如下代码粗体显示，Android SDK缺少命令行工具，需要下载并且提供了下载地址，通常这种情况只需要把网络连好，VPN开好，然后重新运行flutter doctor命令即可。

        [-] Android toolchain - develop for Android devices
          · Android SDK at D:\Android\sdk
          ×  Android SDK is missing command line tools; download from https://goo.gl/
            XxQghQ
          · Try re-installing or updating your Android SDK,
            visit https://flutter.io/setup/#android-setup for detailed instructions.

注意

一旦你安装了任何缺失的依赖，需再次运行flutter doctor命令来验证你是否已经正确地设置了，同时需要检查移动设备是否连接正常。

6．编辑器设置

如果使用flutter命令行工具，可以使用任何编辑器来开发Flutter应用程序。输入flutter help在提示符下查看可用的工具。但是笔者建议最好安装一款功能强大的IDE来进行开发，毕竟开发调试运行打包的效率会更高。由于Windows环境只能开发Flutter的Android应用，所以接下来我们会重点介绍Android Studio这款IDE。

（1）安装Android Studio

要为Android开发Flutter应用，你可以使用Mac或Windows操作系统。Flutter需要安装和配置Android Studio，步骤如下：

1）下载并安装Android Studio:https://developer.android.com/studio/index.html。

2）启动Android Studio，然后执行“Android Studio安装向导”。这将安装最新的Android SDK、Android SDK平台工具和Android SDK构建工具，这是Flutter为Android开发时所必需的。

（2）设置你的Android设备

要准备在Android设备上运行并测试你的Flutter应用，需要安装Android 4.1（API level 16）或更高版本的Android设备。步骤如下：

1）在你的设备上启用“开发人员选项”和“USB调试”，这些选项通常在设备的“设置”界面里。

2）使用USB线将手机与计算机连接。如果你的设备出现提示，请授权计算机访问你的设备。

3）在终端中，运行flutter devices命令以验证Flutter识别出你连接的Android设备。

4）用flutter run启动你的应用程序。

提示

默认情况下，Flutter使用的Android SDK版本是基于你的adb工具版本。如果你想让Flutter使用不同版本的Android SDK，则必须将该ANDROID_HOME环境变量设置为SDK安装目录。

（3）设置Android模拟器

要准备在Android模拟器上运行并测试Flutter应用，请按照以下步骤操作：

1）启动Android Studio→Tools→Android→AVD Manager并选择Create Virtual Device，打开虚拟设备面板，如图1-6所示。

图1-6 打开虚拟设备面板

2）选择一个设备并点击Next，如图1-7所示。

图1-7 选择模拟硬件设备

3）选择一个镜像点击download即可，然后点击Next，如图1-8所示。

图1-8 选择系统镜像

4）验证配置信息，填写虚拟设备名称，选择Hardware-GLES 2.0以启用硬件加速，点击Finish，如图1-9所示。

图1-9 验证配置信息

5）在工具栏选择刚刚添加的模拟器，如图1-10所示。

图1-10 在工具栏选择模拟器

6）也可以在命令行窗口运行flutter run启动模拟器。当能正常显示模拟器时（如图1-11所示），则表示模拟器安装正常。

图1-11 Android模拟器运行效果图

提示

建议选择当前主流手机型号作为模拟器，开启硬件加速，使用x86或x86_64 image。详细文档请参考：https://developer.android.com/studio/run/emulator-acceleration.html。

（4）安装Flutter和Dart插件

IDE需要安装两个插件：

Flutter插件：支持Flutter开发工作流（运行、调试、热重载等）。

Dart插件：提供代码分析（输入代码时进行验证、代码补全等）。

打开Android Studio的系统设置面板，找到Plugins分别搜索Flutter和Dart，点击安装即可，如图1-12所示。

图1-12 Android Studio插件安装

1.2.2 MacOS环境搭建

首先解决网络问题，参见上节“Windows环境搭建”。

1．命令行工具

Flutter依赖的命令行工具有bash、mkdir、rm、git、curl、unzip、which。

2．下载安装Flutter SDK

请按以下步骤进行下载安装Flutter SDK：

步骤1：去Flutter官网下载其最新可用的安装包。

注意

Flutter的渠道版本会不停变动，请以Flutter官网为准。另外，在中国大陆地区，要想获取安装包列表或下载安装包有可能发生困难，读者也可以去Flutter GitHub项目下去下载安装Release包。

Flutter官网下载地址：https://flutter.io/docs/development/tools/sdk/archive#macos

Flutter GitHub下载地址：https://github.com/flutter/flutter/releases

步骤2：解压安装包到你想安装的目录，如：

        cd /Users/ksj/Desktop/flutter/
        unzip /Users/ksj/Desktop/flutter/v0.11.9.zip.zip

步骤3：添加Flutter相关工具到path中：

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

3．运行Flutter命令安装各种依赖

运行以下命令查看是否需要安装其他依赖项：

        flutter doctor

该命令检查你的环境并在终端窗口中显示报告。Dart SDK已经捆绑在Flutter里了，没有必要单独安装Dart。仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（以粗体显示）。如下代码中粗体提示表示，Android SDK缺少命令行工具，需要下载并且提供了下载地址，通常这种情况只需要把网络连好，VPN开好，然后重新运行flutter doctor命令。

        [-] Android toolchain - develop for Android devices
          · Android SDK at /Users/obiwan/Library/Android/sdk
          ×  Android  SDK  is  missing  command  line  tools;  download  from  https://goo.gl/
    XxQghQ
          · Try re-installing or updating your Android SDK,
            visit https://flutter.io/setup/#android-setup for detailed instructions.

注意

一旦你安装了任何缺失的依赖，需再次运行flutter doctor命令来验证你是否已经正确地设置了，同时需要检查移动设备是否连接正常。

4．添加环境变量

使用vim命令打开～/.bash_profile文件，添加如下内容：

        export ANDROID_HOME=～/Library/Android/sdk //android sdk目录
        export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
        export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
        export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
        export PATH=/Users/ksj/Desktop/flutter/flutter/bin:$PATH // 直接指定flutter的bin
                                                                      地址

注意

请将PATH=/Users/ksj/Desktop/flutter/flutter/bin更改为你的路径即可。

完整的环境变量设置如图1-13所示。

图1-13 MacOS环境变量设置

设置好环境变量以后，请务必运行source $HOME/.bash_profile刷新当前终端窗口，以使刚刚配置的内容生效。

5．编辑器设置

如果使用Flutter命令行工具，可以使用任何编辑器来开发Flutter应用程序。输入flutter help在提示符下查看可用的工具。但是笔者建议最好安装一款功能强大的IDE来进行开发，毕竟开发调试运行打包的效率会更高。由于MacOS环境既能开发Android应用也能开发iOS应用，Android设置请参考1.2.1节“Windows环境搭建”中的“安装Android Studio”，接下来我们会介绍Xcode使用方法。

（1）安装Xcode

安装最新Xcode。通过链接下载：https://developer.apple.com/xcode/，或通过苹果应用商店下载：https://itunes.apple.com/us/app/xcode/id497799835。

（2）设置iOS模拟器

要准备在iOS模拟器上运行并测试你的Flutter应用。要打开一个模拟器，在MacOS的终端输入以下命令：

        open -a Simulator

可以找到并打开默认模拟器。如果想切换模拟器，可以打开Hardware下在Device菜单选择某一个模拟器，如图1-14所示。

图1-14 选择iOS模拟器

打开后的模拟器如图1-15所示。

图1-15 iOS模拟器效果图

接下来，在终端运行flutter run命令或者打开Xcode，如图1-16所示选择好模拟器。点击运行按钮即可启动你的应用。

图1-16 Xcode启动应用

（3）安装到iOS设备

要在苹果真机上测试Flutter应用，需要一个苹果开发者账户，并且还需要在Xcode中进行设置。

1）安装Homebrew工具，Homebrew是一款MacOS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。下载地址为：https://brew.sh。

2）打开终端并运行一些命令，安装用于将Flutter应用安装到iOS设备的工具，命令如下所示：

        brew update
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller ios-deploy cocoapods
        pod setup

提示

如果这些命令中有任何一个失败并出现错误，请运行brew doctor并按照说明解决问题。

接下来需要Xcode签名。Xcode签名设置有以下几个步骤：

步骤1：在你Flutter项目目录中通过双击ios/Runner.xcworkspace打开默认的Xcode工程。

步骤2：在Xcode中，选择导航面板左侧中的Runner项目。

步骤3：在Runner target设置页面中，确保在General→Signing→Team（常规→签名→团队）下选择了你的开发团队，如图1-17所示。当你选择一个团队时，Xcode会创建并下载开发证书，为你的设备注册你的账户，并创建和下载配置文件。

图1-17 设置开发团队

步骤4：要开始你的第一个iOS开发项目，可能需要使用你的Apple ID登录Xcode。任何Apple ID都支持开发和测试。需要注册Apple开发者计划才能将你的应用分发到App Store。请查看https://developer.apple.com/support/compare-memberships/这篇文章。登录界面如图1-18所示。

图1-18 使用Apple ID

步骤5：当你第一次添加真机设备进行iOS开发时，需要同时信任你的Mac和该设备上的开发证书。点击Trust即可，如图1-19所示。

图1-19 信任此电脑图示

步骤6：如果Xcode中的自动签名失败，请查看项目的Bundle Identifier值是否唯一。这个ID即为应用的唯一ID，建议使用域名反过来写，如图1-20所示。

图1-20 验证Bundle Identifier值

步骤7：使用flutter run命令运行应用程序。

上一章目录下一章