浅谈跨平台框架Flutter的搭建与运行

作者：个推 iOS 开发工程师 伊泽瑞尔

Flutter 是 Google 推出的跨平台的解决方案，用以帮助开发者在 Android 和 iOS 两个平台开发高质量原生应用的全新移动 UI 框架。之前我们为大家介绍了《跨平台框架 Flutter 的优势与结构》，概括了 Flutter 选择 Dart 语言的必要性及其自底而上的框架结构，大家可以点击标题链接来回顾前文。在本文中，我们将带大家进一步了解 Flutter 的搭建与运行。

01Flutter 开发环境搭建（Windows 版）
一、系统环境要求：要安装并运行 Flutter，开发环境必须满足以下条件。
操作系统：Windows 7 或更高版本（64-bit）；
磁盘空间：400MB；
工具：Flutter 依赖 PowerShell 5.0 或更新的版本和 Git for Windows（Git 命令行工具）这些命令行工具。

我们可以去 Flutter 官网下载最新可用的安装包。
下载地址：
https://flutter.io/sdk-archiv…
注意：Flutter 的渠道变动频繁，请以官网为准。同时，我们也推荐去 Flutter github 项目下下载安装包。
下载地址：
https://github.com/flutter/fl…

下载完成后，请先将安装包 zip 解压到想安装 Flutter SDK 的路径（注意：不要将 Flutter 安装到需要高权限的路径，如 C:Files)。之后，在 Flutter 安装目录的 flutter 文件下找到 flutter_console.bat，双击运行并启动 flutter 命令行。

二、更新环境变量：若想在 Windows 系统自带命令行运行 flutter 命令，开发者需要添加以下环境变量到用户 PATH：“控制面板 -> 用户账户 -> 更改我的环境变量”，同时，在“用户变量”下检查是否有名为“Path”的条目：如果该条目存在，追加 flutter bin 的全路径，使用；作为分隔符。如果该条目不存在，创建一个新用户变量 Path，然后将 flutter bin 的全路径作为它的值。Flutter 的执行需要联网，还需要设置：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASH_URL=https://storage.flutter-io.cn

三、运行 flutter doctor 命令：开发者需在 Flutter 命令行运行 flutter doctor 命令来查看是否需要安装其它依赖，如果需要，则进行安装。在终端中输入 flutter doctor，如果出现和下图类似的结果，甚至得到的 x 比图示更多，主要原因是没有安装 Android studio。下面我们将列出 Android Studio 的安装步骤。

四、Android Studio 的安装：
在官网下载 Android Studio，下载地址：https://developer.android.com/；
启动 Android Studio，执行“Android Studio 安装向导”并安装最新的 Android SDK、Android SDK 工具和 Android SDK 构建工具，这些都是用 Flutter 进行 Android 开发所需要的；
打开 Android Studio 软件，找到 Plugin 的配置，搜索 Flutter 插件，出现如图所示页面。点击中间“Search in repositories”，然后点击安装，全部安装完成后需重启。


五、安装 Android 证书
安装好 Android Studio 后，再次打开终端（命令行），输入 flutter doctor，这时 x 的数量会明显减少，但可能还是会遇到 1 - 2 个，如果只有 1 个就说明没有安装证书，开发者只需在终端里执行以下命令即可：
flutter doctor –android-licenses
当提示 Y / N 选择时，请直接选择 Y 即可完成安装。

02Flutter 开发环境搭建（Mac 版）
一、系统环境要求：要安装并运行 Flutter，开发环境必须满足以下条件。
操作系统：MacOS（64-bit）；
磁盘空间：大于 700M，如果算上 Android Studio 等编辑工具，尽量大于 3G；
命令行工具：bash、mkdir、rm、git、curl、unzip、which、brew。

二、下载 Flutter SDK 包：
推荐在官网下载，网址：https://flutter.io/setup-macos/。
下载完成后，解压安装包到想安装的目录，如:cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

三、配置环境变量
压缩包下载好以后，选择位置进行解压，压缩包解压的位置在下面配置环境变量的时候仍要使用。
首先打开终端工具，使用 vim 进行配置环境变量，命令如下：
vim ~/.bash_profile
然后，在打开的文件里增加一行代码，配置 flutter 命令，使其在任何地方都可以使用。添加的代码为：
export PATH=/app/flutter/bin:$PATH
这行命令需要根据压缩包解压的位置来进行编写，内容是你的路径。配置完成后，还需用 source 命令重新加载，具体命令如下:
source ~/.bash_profile
完成以后，flutter 的安装工作已基本完成，但要进行开发，还需要使用命令来检测其是否成功安装。

四、检查开发环境：如上图所示，已经成功安装了 Flutter，但是还不具备开发环境，可以用 flutter doctor 命令来检查还需安装的插件和软件。

五、安装 Xcode：要为 iOS 开发 Flutter 应用程序，需要 Xcode9.0 或更高版本。
在苹果商店安装 Xcode 9.0 或更新版本。
配置 Xcode 命令行工具以使用新安装的 Xcode 版本，命令如下：
sudo xcode-select –switch/Applications/Xcode.app/Contents/Developer
在大多数的情况下，当你想要使用最新版本的 Xcode 时，这是正确的路径。如果需要使用不同版本的 Xcode，请指定相应的路径。
确保 Xcode 许可协议是通过打开一次 Xcode 或通过命令 sudo xcodebuild –license。

六、安装 Android Studio：和 Windows 一样，在 Android 设备上构建并运行 Flutter 程序都需要先安装 Android Studio。

03 升级 Flutter
Flutter SDK 有多个分支，如 beta、dev、master、stable，其中 stable 为稳定分支，dev 和 master 为开发分支。flutter 安装完成后，可以运行 flutter channel，查看所有分支。

若想升级 flutter SDK，需要执行命令：flutter upgrade。

该命令会同时更新 Flutter SDK 和 flutter 项目依赖包。若只更新项目依赖包（不包括 Flutter SDK），可以使用以下命令：
flutter packages get 获取项目所有的依赖包。
flutter packages upgrades 获取项目所有依赖包的最新版本。

04 开发工具的配置与使用
一、Android studio 配置与使用
首先需要安装两个插件，分别是 Flutter 和 Dart 插件：
Flutter 插件：支持 Flutter 开发工作流 (运行、调试、热重载等)；
Dart 插件：提供代码分析(输入代码时进行验证、代码补全等)。
1. 安装步骤
启动 Android Studio；
打开插件首选项（MacOS：Preferences>Plugins, Windows：File>Settings>Plugins）；
先选择 Browse repositories…，再选择 flutter 插件并点击 install；
重启 Android Studio 后插件生效。

2. 创建 Flutter 应用
选择 File>New Flutter Project；
选择 Flutter application 作为 project 类型, 然后点击 Next；
输入项目名称 (如 myapp)，点击 Next；
点击 Finish；
等待 Android Studio 安装 SDK 并创建项目。

3. 运行应用程序
定位到 Android Studio 工具栏；
在 target selector 中, 选择一个运行该应用的 Android 设备。如果没有列出可用，请选择 Tools>Android>AVD Manager 创建；
在工具栏中点击 Run 图标；
如果一切正常, 在设备或模拟器上会看到启动的应用程序，如下图所示：

4. 体验热重载：Flutter 可以通过热重载实现快速的开发周期，热重载无需重启应用程序就能实时加载修改后的代码，并且不会丢失状态。对代码进行简单的更改，然后使用 IDE 或命令行工具进行重新加载，可以在设备或模拟器上看到更改。
打开 lib/main.dart 文件；
将字符串 'You have pushed the button this many times:' 更改为'You have clicked the button this many times:'；
不要按“停止”按钮，让应用继续运行；
要查看更改，请调用 Save (cmd-s / ctrl-s)，或者点击 热重载按钮 (带有闪电图标的按钮)。
二、VS Code 的配置与使用
1. 安装 flutter 插件：
启动 VS Code；
调用 View>Command Palette…；
输入 ’install’ 后选择 Extensions:Install Extension action；
在搜索框输入 flutter，在搜索结果列表中选择 ’Flutter’ 并点击 Install；
选择 ’OK’ 并重新启动 VS Code；
验证配置：首先，调用 View>Command Palette…，输入 ’doctor’，然后选择 ’Flutter:Run Flutter Doctor’action。查看“OUTPUT”窗口中的输出是否有问题。

2. 创建 Flutter 应用
启动 VS Code；
调用 View>Command Palette…；
输入 ’flutter’ 后选择 ’Flutter:New Project’action；
输入 Project 名称 (如 myapp) 并按回车键；
指定防止项目的位置，然后确认；
等待项目创建继续，并显示 main.dart 文件。

3. 体验热重载
用 VSCode 编写 Flutter 的缺点之一是需要手动加载更新应用，这在一定程度上影响了工作效率。当我们运行 flutter run 以后，会出现一段红色的文字提示，如下所示：
r 键：点击后热加载，即重新加载；
p 键：显示网格，可以掌握布局情况；
o 键：切换 Android 和 iOS 的预览模式；
q 键：退出调试预览模式。

4. 写一个 HelloWorld 程序
当我们搭建好开放环境搭后，按照惯例我们需要写一个 HelloWorld 程序。将下面这段代码写在根目录.dart 文件中，作为 Flutter 主文件。
import ‘package:flutter/material.dart’;
// 主函数（入口函数），下面我会简单说说 Dart 的函数
void main() =>runApp(MyApp());
// 声明 MyApp 类
class MyApp extends StatelessWidget{
// 重写 build 方法
@override
Widget build(BuildContext context){
// 返回一个 Material 风格的组件
return MaterialApp(
title:’Welcome to Flutteraa’,
home:Scaffold(

// 创建一个 Bar，并添加文本
appBar:AppBar(title:Text('Welcome to Flutter'),
),
// 在主体的中间区域，添加一个 hello world 的文本
body:Center(child:Text('Hello World'),
),
),
);
}

}
结果如下图所示：

05 连接设备运行 Flutter 应用
Window 下只支持为 Android 设备构建并运行 Flutter 应用，而 macOS 同时支持 iOS 和 Android 设备。下面将分别介绍如何连接 Android 和 iOS 设备来运行 flutter 应用。
一、连接 Android 模拟器
在 Android 模拟器上运行并测试 Flutter 应用，请按照以下步骤操作：
启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device；
选择一个设备并选择 Next；
为要模拟的 Android 版本选择一个或多个系统印象，然后选择 Next。建议使用 x86 或 x86_64 image；
在“Emulated Performance”下, 选择 Hardware – GLES 2.0 以启用硬件加速；
验证 AVD 配置是否正确，然后选择 Finish；
在“Android Virtual Device Manager”中，点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面；
运行 flutter run 启动您的设备。连接的设备名是 Android SDK built for <platform>，其中 platform 是芯片系列，如 x86。

二、连接 Android 真机设备
要准备在 Android 设备上运行并测试 Flutter 应用，需要 Android 4.1 或更高版本的 Android 设备。
在 Android 设备上启用开发人员选项和 USB 调试；
使用 USB 将手机插入电脑。如果设备出现调试授权提示，请授权你的电脑可以访问该设备；
在命令行运行 flutter devices 命令以验证 Flutter 识别您连接的 Android 设备；
运行启动你应用程序 flutter run。

三、连接 iOS 模拟器
要准备在 iOS 模拟器上运行并测试 Flutter 应用，请按以下步骤操作：
在你的 MAC 上，通过 Spotlight 或以下命令找到模拟器:open -a Simulator；
通过检查模拟器 Hardware > Device 菜单中的设置，确保模拟器正在使用 64 位设备（iPhone 5s 或更高版本)；
根据电脑屏幕大小，模拟高清屏 iOS 设备可能会溢出屏幕。可以在模拟器的 Window> Scale 菜单下设置设备比例；
运行 flutter run，启动 flutter 应用程序。

四、连接 iOS 真机设备
如果要将 Flutter 应用安装到 iOS 真机设备，除了需要一些额外的工具和一个 Apple 账户，还需要在 Xcode 中进行一些设置。
1. 安装 homebrew(如果已经安装了 brew，跳过此步骤)；
2. 打开终端并运行如下这些命令：

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

如果这些命令中的任何一个失败并出现错误，需要运行 brew doctor 并按照说明解决问题
3. 遵循 Xcode 签名流程来配置项目：
在你 Flutter 项目目录中通过 open ios/Runner.xcworkspace 打开默认的 Xcode workspace。
在 Xcode 中，选择导航面板左侧中的 Runner 项目。
在 Runner target 设置页面中，确保在 General > Signing > Team 下选择你的开发团队。当你选择一个团队时，Xcode 会创建并下载开发证书，向你的设备注册你的账户，并创建和下载配置文件。
如果要开始你的第一个 iOS 开发项目，需要使用你的 Apple ID 登录 Xcode。任何 Apple ID 都支持开发和测试，但若想将应用分发到 App Store，就必须注册 Apple 开发者计划。
当你第一次使用 attach 真机设备进行 iOS 开发时，需要同时信任你的 Mac 和该设备上的开发证书。iOS 设备首次连接到 Mac 时，选择信任。然后转到 iOS 设备上的设置菜单，选择常规 > 设备管理并信任您的证书。
运行 flutter run，启动 flutter 应用程序。

个推技术团队基于 Flutter 平台也进行了不少开发和探索，其中消息推送插件 Getui Flutter Plugin，作为一个特殊的 Package，可以为 Android 和 iOS 提供底层封装，在 Flutter 底层提供组件功能，使 Flutter 可以较为方便地调用 Native 模块。借助 Getui Flutter Plugin，开发者可以快速构建稳定高效的消息推送系统，满足日常的工作需求。
下载链接：
https://github.com/GetuiLabor…