Flutter iOS & Android 环境运行

前言

最近看到很多Web以及后台岗位在用Flutter进行编程。这里看到各位遇到的问题大概是以下几类。

  1. iOS真机调试。
  2. Android 环境问题。
  3. 一些关于Flutter功能实现的问题。

准备工作

  1. 安装Xcode
  2. 安装Android Studio(也可以用VScode)
  3. 安装Flutter环境

iOS 环境问题

要运行iOS 首先你得安装 XCode,这个在Mac的应用商店搜索直接下载。 Xcode安装完毕后,我们首先创建一个Flutter项目。

然后找到iOS目录下的 Runner.xcworkspace 文件,直接点击运行就能打开Xcode。当我们进行iOS 虚拟机编译的时候。大概会遇到两类问题

  1. 你需要在 Build setting 中去添加你的个人(公司)开发者账号
  1. 项目包名可更改,这里与你flutter项目创建时的包名一致就行
  2. 添加 FLUTTER_BUILD_MODE。如下图

没看到 FLUTTER_BUILD_MODE,就需要你手动点击左上角红框中的 + 去增加,双击是能进行修改的。对应的运行模式如下.

  • Debug -> debug
  • Profile -> Profile
  • Release -> release

特别需要注意,虚拟机运行调试模式,编译模式要修改为debug,真机运行要修改为release。否则编译时就会提示以下警告。另外,当改为release时,iOS真机也能拔线使用了。

Target aot_assembly_release failed: Exception: release/profile builds are only supported for physical devices. attempted to build for simulator.

Android环境编译运行

Android 相比较 iOS没有那么麻烦。

你可以直接真机进行调试,首先在手机设置中打开【开发者选项】。也可以在 Android Studio中安装虚拟机或者下载其他虚拟机,例如【夜神】等。

我们打开 Flutter 中的 Android目录。之后你需要等待Gradle 同步完成,这个过程可能需要科学上网。当同步完成后,你就能直接编译Android项目,跑到手机是一个黑屏效果。

至此,我们Android和iOS编译环境都OK了。

关于Flutter

有过Vue或者前端开发经验,对于Flutter这种声明式UI的写法其实不陌生,也很容上手。这里我推荐多看Flutter的官网的示例。推荐一个很nice的博主https://juejin.cn/user/149189281194766。尤其他开源的项目FlutterUnithttps://github.com/toly1994328/FlutterUnit是一个很好的学习对象。

最后

Flutter的学习带有一些原生开发经验会更容易上手,没有必要深入,用到就去学,积少成多。

相关推荐
用户059540174461 小时前
LLM对话记忆测试踩坑实录:手工回归30分钟,自动化后2分钟发现3个隐藏Bug
前端·css
Ashley的成长之路3 小时前
前端性能优化实战手册·第2篇:资源加载策略全解
前端·性能优化·资源加载·http/3·性能优化实战·资源加载优化
浅水壁虎3 小时前
vue基础(第二章 )
前端·javascript·vue.js
界面开发小八哥3 小时前
界面控件DevExtreme v26.1新版亮点——支持Angular 22
前端·javascript·angular.js·devexpress·ui开发·devextreme
Getflare3 小时前
前端 + UI 设计 + AI:这不是三个工种,是一个新三角能力模型(附自检清单)
前端·人工智能·ui
oil欧哟3 小时前
我做了一个 Vibe Coding 术语学习站:VibeHub
前端·ai·agent·独立开发·vibe coding
审小匠OpenCPAi4 小时前
银行流水核查怎么自动化?单边匹配、双向勾稽与图聚类异常检测的工程对比
java·前端·人工智能·python·审计
Revolution614 小时前
一个公共表格组件,是怎么一步步失控的
前端·前端工程化
腻害兔4 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:CRM 客户关系模块深度解析——从线索到回款,一套完整的 B2B 销售闭环是怎么搭的?
java·前端·javascript·vue.js·产品经理·ai编程