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的学习带有一些原生开发经验会更容易上手,没有必要深入,用到就去学,积少成多。

相关推荐
IT_陈寒1 分钟前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询17 分钟前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang20 分钟前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼23 分钟前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师7 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny077 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy8 小时前
css的基本知识
前端·css
昔人'8 小时前
css `lh`单位
前端·css
Nan_Shu_61410 小时前
Web前端面试题(2)
前端