移动端跨平台APP之项目实战 —— 用 Flutter 开发APP

用 Flutter 开发APP（开发环境篇）

文章结构如图

文章结构

Flutter 终于出 1.0.0 稳定版了，让我们来尝尝鲜，做个交互功能少，注重展示的app吧。

这篇是环境篇，开发篇：

安装 Flutter

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

下载完成后解压压缩包。

# 切到根目录
cd 
# 新建.bash_profile，如果已存在则直接打开该文件
touch .bash_profile 
# 打开.bash_profile
open .bash_profile

# 添加临时镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# 将flutter命令写进环境变量
export FLUTTER_HOME=/你的flutter安装目录/flutter
export PATH=$PATH:$FLUTTER_HOME/bin:

把以上4行代码加入 .bash_profile 文件，保存。

# 编译
source .bash_profile

运行flutter doctor来安装其他依赖

flutter doctor

初始化项目

创建项目

flutter create myapp

进入项目

cd myapp

平台设置

iOS 设置

安装 Xcode

要为iOS开发 Flutter 应用程序，需要 Xcode 9.0 或更高版本。如果要适配 iOS 12+，则要求Xcode 10.0 或更高版本。（如果不想升级 Xcode，也可以 hack 一下，后面会说 hack 的方法）

配置 Xcode 命令行工具以使用新安装的Xcode版本

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

确保 Xcode 许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -licens同意过了.

使用 Xcode，可以在iOS设备或模拟器上运行Flutter应用程序。

设置iOS模拟器

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

在Mac上，通过Spotlight或使用以下命令找到(打开)模拟器:

open -a Simulator

通过检查模拟器 硬件 > 设备 菜单中的设置，确保模拟器正在使用64位设备（iPhone 5s或更高版本）.

根据开发机器的屏幕大小，模拟的高清屏iOS设备可能会使屏幕溢出。在模拟器的 Window> Scale 菜单下设置设备比例

运行项目

flutter run

项目会在模拟器中自动安装，然后运行

模拟器中运行项目

安装到iOS设备

要将 Flutter 应用安装到iOS真机设备，需要一些额外的工具和一个 Apple 帐户，还需要在Xcode中进行设置。

  1. 安装 homebrew （如果已经安装了brew,跳过此步骤）.
  2. 打开终端并运行这些命令来安装用于将Flutter应用安装到iOS设备的工具
 brew update
 # The following two steps are a temporary workaround to https://github.com/flutter/flutter/issues/22595
 brew install --HEAD usbmuxd
 brew link usbmuxd
 brew install --HEAD libimobiledevice
 brew install ideviceinstaller ios-deploy cocoapods
 pod setup
遵循Xcode签名流程来配置项目

  1. 在项目目录中打开默认的Xcode workspace.

     open ios/Runner.xcworkspace

    自动打开Xcode

  2. 在Xcode中，选择导航面板左侧中的Runner项目

    选择Runner

  3. 要开始第一个iOS开发项目，可能需要使用Apple ID登录Xcode.

    登录Xcode

  4. 将iOS设备连接到Mac

    第一次attach真机设备进行iOS开发时，需要同时信任你的Mac和该设备上的开发证书。首次将iOS设备连接到 Mac 时,请在对话框中选择 Trust。

    信任设备

  5. 确认Xcode中的设备

    选择左上角的Runner，把设备切换为接入的iOS设备。

    信任设备

  6. 如果Xcode中的自动签名失败，请验证项目的 General > Identity > Bundle Identifier 值是否唯一。检测通过后，Xcode会自动签名成功。

    检查 Bundle Identifier

  7. 适配高版本iOS

    如果出现以下报错

     Unable to locate DeviceSupport directory with suffix 'DeveloperDiskImage.dmg'.

    可能是 iOS 版本太高，Xcode 不兼容。我的 Xcode 是 9.2 的，只支持到 11.2。更新 Xcode 到 10.1，才能支持到12.1。Xcode 到10.1要求 macOS 系统 10.13.6+，所以也要升级系统。我把系统升级到了 macOS Mojave(10.14.2)

    如果不想升级 Xcode 的话，可以安装一下步骤 hack 一下：

    1. 前往 Developer Portal 用 apple id 登陆，首次登陆会让授权和同意协议。

    2. 下载最新的 Xcode 测试版（撰写本文时为Xcode 10.1）。如果无法下载的话，可以直接下载我打包的文件，然后跳到第7步。

    3. 解压缩.xip文件

    4. 右键单击Xcode-Beta.app并选择Show Package Contents

      打开Package Contents

    5. 导航到目录 => 开发人员 => 平台 => iPhoneOS.platform => DeviceSupport
    6. 复制12.0（16A5354b）。
    7. 现在转到您当前的Xcode.app
    8. 再次，右键单击Xcode.app并选择Show Package Contents
    9. 再次，导航到Contents => Developer => Platforms => iPhoneOS.platform => DeviceSupport

    10. 在此处粘贴12.0（16A5354b）

      粘贴文件

    11. 重新启动Xcode并插入iOS 12真实设备
    12. 运行你的应用程序，完成！

  8. 运行项目

     flutter run

    第一次构建会要求输入密码。输入密码后选择始终允许，否则弹窗会一直存在。

    输入密码

  9. 信任 App

    在信任App之前，是无法打开App的，要进入手机设置 > 设备管理 > 开发者应用。点击信任XXX。

    信任应用

  10. 成功打开App

Android设置

安装Android Studio

下载并安装 Android Studio.

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

下面展示一下我的Android Studio安装向导，其实不用设置，打开的时候注意不要点代理就可以。

这步点取消，不要点设置代理。 打开Android Studio

向导1

向导2

向导3

安装期间会让输入密码。下图为安装完成。

向导4

导入项目

导入项目

导入项目完成

需要 Flutter 下载插件，下载完成后按编辑器提示进行重启

下载插件

设置Android模拟器

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

  1. 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.

    新建设备

  2. 选择一个设备并选择 Next。

    选择设备

  3. 为要模拟的Android版本选择一个或多个系统映像，然后选择 Next. 建议使用 x86 或 x86_64 image .

    选择系统映像

    选择系统映像

    下载系统映像

    下载系统映像

    下载系统映像完成

    下载系统映像完成

  4. 验证AVD配置是否正确，然后选择 Finish。

    设置设备名称

    有关上述步骤的详细信息，请参阅 Managing AVDs.

  5. 在 Android Virtual Device Manager中, 点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面.

    启动app

    启动app

  6. 检查环境，看有没有缺少的东西。 
     flutter doctor

    我的缺了一条

     [!] Android toolchain - develop for Android devices (Android SDK 28.0.3)
 ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
   --android-licenses

    意思是缺少许可认证，运行以下命令，然后一直输入y和回车，就可以了。

     flutter doctor  --android-licenses

  7. 启动 App

    运行 flutter run 启动设备. 连接的设备名是 Android SDK built for <platform>,其中 platform 是芯片系列, 如 x86.

    也可以点击 Android Studio 菜单栏的启动按钮，启动 App。

    菜单栏启动app

设置Android设备

要准备在Android设备上运行并测试 Flutter 应用，需要安装 Android 4.1（API level 16）或更高版本的Android设备.

  1. 在设备上启用开发人员选项和USB调试。详细说明可在Android文档中找到。

  2. 使用USB将手机插入电脑。如果设备出现提示，请授权计算机访问设备。

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

    要确保只有一个设备连接到电脑。如果开了模拟器，则要关闭模拟器。

  4. 运行启动应用程序 flutter run。

    需要在手机上点击允许安装app。

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

参考链接

觉得文章不错就支持一下呗～

打赏二维码