鸿蒙Flutter实战:16-无痛开发指南(适合新手)

本文讲述如何通过 Flutter 开发鸿蒙原生应用。整个过程结合往期文章、实战经验、流程优化,体验丝滑、无痛。

无痛搭建开发环境

为了减少疼痛,这里使用全局唯一的 Flutter 版本开发。高阶用法可以参看往期同系列文章。

硬件准备

一台 Mac,一部 Mate60 Pro,两台显示器。

鸿蒙 Flutter SDK 开发人员爱用 Mac,使用相同设备(优先选择 Arm 版 Mac,X86 也可以,系统不要太老)无忧。
审核人员爱用 Mate60 系列,选择同款无忧。
显示器两台,左侧放别人的代码,右侧是自己的,方便参考(复制粘贴)。

环境准备

下载 DeEco

进入华为开发者联盟网站,https://developer.huawei.com/consumer/cn/download/,根据电脑机型点击下载。

下载 Flutter SDK

bash 复制代码
# 创建目录 ~/.fvm/versions
mkdir -p ~/.fvm/versions

# 克隆 Flutter SDK
git clone https://gitee.com/harmonycommando_flutter/flutter.git custom_3.22.0

配置环境变量

打开 ~/.bash_profile,增加以下内容

bash 复制代码
# Flutter Mirror
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# HarmonyOS SDK
export TOOL_HOME=/Applications/DevEco-Studio.app/Contents/
export DEVECO_SDK_HOME=$TOOL_HOME/sdk # command-line-tools/sdk
export PATH=$TOOL_HOME/tools/ohpm/bin:$PATH # command-line-tools/ohpm/bin
export PATH=$TOOL_HOME/tools/hvigor/bin:$PATH # command-line-tools/hvigor/bin
export PATH=$TOOL_HOME/tools/node/bin:$PATH # command-line-tools/tool/node/bin

export PATH="~/.fvm/versions/custom_3.22.0/bin:$PATH"

配置完成以后,关闭命令行工具,并重新打开,使之生效。使用 flutter doctor 命令查看是否有 3.22.0-ohos 字样。

创建项目

使用以下命令创建项目

bash 复制代码
flutter create --platforms ohos .

配置自动签名

使用 Deveco 打开项目,Mate60 Pro 手机连上电脑(必须)。

打开 File -> Project Structure -> Signing Configs 勾选 Automatically generate signature

点击 Apply 应用,OK 完成签名。此时可关闭 DevEco。

运行项目

  1. 使用 Flutter run 命令,或者在 IDE 中,点击运行按钮
bash 复制代码
# 查看设备编号
futter devices

出现以下类似输出

bash 复制代码
  Found 3 connected devices:
  FMR0224904009635 (mobile) • FMR0224904009635 • ohos-arm64     • Ohos OpenHarmony-5.0.1.115 (API 13)
  macOS (desktop)           • macos            • darwin-x64     • macOS 14.6.1 23G93 darwin-x64
  Chrome (web)              • chrome           • web-javascript • Google Chrome 131.0.6778.108

找到鸿蒙设备的 ID,如上所示为 FMR0224904009635。

bash 复制代码
# 运行
flutter run -d FMR0224904009635
  1. 在 IDE 中,点击运行按钮,以下是 VsCode 中的入口

确保安装了 Code Runner 插件

参考资料

相关推荐
独守一片天11 小时前
HarmonyOS 鸿蒙碰一碰与跨端协同体验怎么设计?
华为·harmonyos
yuhulkjv33514 小时前
Gemini鸿蒙版导出word格式的终极解法:AI 导出鸭如何重构AI内容落地链路
人工智能·ai·word·harmonyos·ai导出鸭
whyutianict_vv16 小时前
从 Web 前端到 HarmonyOS ArkTS:一次 AI 鸿蒙全栈智能体开发的迁移实录
前端·人工智能·harmonyos
m0_7496902317 小时前
【寻迹校园 HarmonyOS NEXT 实战 01】从校园痛点到可上架 MVP:失物招领应用产品设计
人工智能·深度学习·移动开发·harmonyos·arkts·arkui·产品设计
m0_7496902317 小时前
【寻迹校园 HarmonyOS NEXT 实战 03】NavPathStack 路由实战:18 个页面如何集中管理
华为·移动开发·harmonyos·arkui·navigation·navpathstack
qziovv17 小时前
前端转flutter——项目架构、初始化
前端·flutter
m0_7496902318 小时前
【寻迹校园 HarmonyOS NEXT 实战 02】多模块工程拆解:entry、HAR 与 HSP 如何分工
华为·harmonyos·arkts·软件架构·har·hsp
用户09340777351419 小时前
HarmonyOS WPS Open SDK 实践:用 SdkConstants 判断当前 HAR 形态
harmonyos
独守一片天20 小时前
HarmonyOS鸿蒙新生态智能体意图框架怎么设计?
华为·harmonyos
恋猫de小郭20 小时前
Flutter 3.47 首坑,analysis_options 问题连环回归
android·前端·flutter