Flutter环境搭建与多端部署

165 阅读4分钟

前言

在移动互联网时代,只做PC端应用,应用场景还是太局限。

如果要对移动端进行应用开发,最直接的办法就是用原生方式开发,Android 系统用 Android Studio,iOS 系统用 Xcode。

有没有办法用同一套代码,同时适配web、windows、linux、macos、android、ios呢?

当然是有的,其中,Flutter就是其中最具代表性的技术框架之一。

图片

本文就先根据 Flutter 的项目文档,跑通环境搭建、多端部署的流程。

Flutter 开源地址:github.com/flutter/flu…

Flutter 文档地址:docs.flutter.dev

开发环境搭建

开发环境搭建步骤如下:

1.启动 Cursor** 或 VS Code

2.安装 Flutter 插件

图片

3.快捷键ctrl + shift + p,选择Flutter: New Project

4.如果已安装 Flutter SDK,点击“Locate SDK”,如果尚未安装 Flutter SDK,点击下载 SDK,选择下载SDK到相关位置。

图片

Flutter 有两种开发调试模式,比如开发web,桌面端应用,开发设备的调试设备是同一台。

图片

如果是开发移动端应用,可以直接用数据线连接真机开发。

图片

4.安装完后,就可以直接根据提示创建第一个初始项目

图片

按 F5 启动浏览器调试运行,在弹出的界面中,可以看到整个简单的界面。

图片

Android 开发环境搭建

下面来搭建 Android 的开发环境,除了安装完 flutter之外,还需要安装 Android 的相关环境支持。

1.下载 Android SDK

访问:developer.android.com/studio#comm…

下载 Android Studio 和 命令行工具。

图片

启动 Android Studio之后,会自动去下载Android SDK。

图片

2.配置环境变量

我的 sdk 下载路径为D:\Android_sdk

下面设置环境变量:

ANDROID_HOME - D:\Android_sdk

添加Path变量:%ANDROID_HOME%\platform-tools 和 %ANDROID_HOME%\tools

下载最新版的sdk,没有 tools 这个文件夹,因此不添加估计也可以,这里还是遵循官方教程,先加上。

单独下载的命令行工具解压到该路径下。

图片

注意需要手动在里面加一个latest文件夹,这里实测如果不修改顺序,后面会出问题。

文件结构如下:

Android_Sdk\
├── cmdline-tools\
│   └── latest\     
│       ├── bin\
│       ├── lib\
│       └── ...
├── platform-tools\
├── platforms\
└── build-tools\

修改完后,再添加一条环境变量:%ANDROID_HOME%\cmdline-tools\latest\bin

配置完之后运行:

flutter doctor

如果看到下面这样,所有条件均满足,表示环境搭建完成。

图片

Android 真机调试

下面连接 Android 真机进行调试。

首先下载adb调试工具:developer.android.com/tools/relea…

图片

配置完adb环境变量。

以小米手机为例,手机开启开发者模式,和电脑连接同一局域网,启用无线配对,当然也可以通过数据线连接,无限配对更加方便。

命令行执行配对命令,ip和端口号从手机上读取:

adb pair 192.168.1.101:36009

输入匹配的配对码,配对成功后,再连接:

adb connect 192.168.1.101:45917

查看设备

adb devices

输出以下内容,可以看到设备已成功连接:

List of devices attached
192.168.1.101:45917     device
adb-0587A02001A00540-lOHzYB._adb-tls-connect._tcp       devices

使用 flutter 查看设备

flutter devices

输出以下内容,可以看到 flutter也能识别到连接的手机设备。

图片

输入以下内容,开始部署调试,-d 后面为上一步查看到的设备编号。

flutter run -d 25042PN24C

首次启动时,会自动下载 gradle 及相关依赖,下载完之后,就能看到手机上弹出相应界面。

图片

由于默认是 debug 版本,界面右上角会出现 debug 的标记。

如需安装 release 版本,可执行

flutter run -d 25042PN24C --release

iOS 系统应用部署

要在 iphone 上进行调试,和 Android 类似,flutter 需要借助 Xcode 的工具链。

Xcode只能在 macOS 上安装,由于我没有mac设备,只能采用一种“曲线救国的方式”,就是利用 Github 上的自动化 CI 帮我编译打包。

我让 Ai 帮我写了一个自动化打包的workflows。

相关代码放在:github.com/zstar1003/F…

添加 Tag 之后,会自动触发打包任务,自动生成 iOS和 Android 安装包。

图片

获取到 iOS 的 .ipa 安装包后,发给手机,还是不能直接安装。

因为 iOS 要求安装包必须有应用签名。

因此,需要借助第三方工具(如爱思助手),对应用进行签名,再安装到手机上。

首先需要 iphone 开启开发者模式,在老一点版本的 iOS 中,可以直接在隐私与安全性中找到该选项。

然而,在新系统(比如我的系统是18.5)中,移除了该选项。(damn iphone!)

将 iphone 通过数据线连接电脑,爱思助手可以通过虚拟定位**的方式,将该选项恢复。

具体步骤可参考:www.i4.cn/news_detail…

打开开发者模式后,进入工具箱-IPA签名。

apple 有两种签名方式,一种是证书签名,需要开发者缴$99年费获取开发者账号;另一种是通过 Apple id** 进行临时签名,免费,但七天过期。

下面采用后者方式进行签名。

图片

签名完就可以直接安装到手机。

图片

然而,安装完之后,是无法直接打开的,会出现如下提示:

图片

还需要在设置中,配置相应 Apple ID 签名的信任。

图片

设置完之后,终于能打开了。

图片

欸,又是吐槽iPhone的一天。