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

相关推荐
申阳1 分钟前
Day 6:04. 基于Nuxt开发博客项目-LOGO生成以及ICON图标引入
前端·后端·程序员
中国lanwp14 分钟前
npm中@your-company:registry 和 registry 的区别
前端·npm·node.js
Bacon15 分钟前
Electron 应用商店:开箱即用工具集成方案
前端·github
行走的陀螺仪17 分钟前
uni-app + Vue3 实现折叠文本(超出省略 + 展开收起)
前端·javascript·css·uni-app·vue3
冴羽19 分钟前
JavaScript 异步循环踩坑指南
前端·javascript·node.js
jump68021 分钟前
commonjs 和 ES Module
前端
旧曲重听143 分钟前
前端需要掌握多少Node.js?
前端·node.js
Mr.Jessy44 分钟前
Web APIs 学习第四天:DOM事件进阶
开发语言·前端·javascript·学习·ecmascript
云枫晖1 小时前
前端工程化实战:手把手教你构建项目脚手架
前端·前端工程化
醉方休1 小时前
开发一个完整的Electron应用程序
前端·javascript·electron