Flutter 环境搭建

环境

macOS 15.4.1
Xcode Version 16.3 (16E140)
Visual Studio Code 1.99.3
Flutter 3.29.3 • channel stable • https://github.com/flutter/flutter.git

Framework • revision ea121f8859 (11 days ago) • 2025-04-11 19:10:07 +0000

Engine • revision cf56914b32

Tools • Dart 3.7.2 • DevTools 2.42.3
iPhone iOS(13.4.1)

iPhone iOS(18.0.1)

网络配置

网络原因对镜像做的一些处理

sh 复制代码
$ export PUB_HOSTED_URL="https://pub.flutter-io.cn"
$ export FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"

下载后SDK镜像,我是放到/usr/local,所以在终端执行下面的代码

sh 复制代码
$ export PATH="/usr/local/flutter/bin:$PATH"

可以加到.zshrc/.bashrc里,这点看使用的shell环境

环境搭建

我的环境是macOS + iOS,所以选择了参考1的文档,下载了flutter_macos_3.29.3-stable.zip

  1. Android 不支持目前是预期的
  2. Xcode建议升级,好吧,还要升级系统,麻烦

文档中要WIFI调试,这点目前不关键,然后iPhone Xcode相关的配置文档中也已经详细的写了。

我主要记录学习Flutter过程中遇到的问题和解决过程,而不是文档的copy

第一个Flutter程序

插件安装

IDE按教程推荐的使用VSCode,搜索flutter && 安装插件

文档没有提到,所以按照flutter vscode环境搭建+vscode插件推荐 装了一些插件

创建Flutter工程

会报错,要配置Flutter的SDK路径,因为上面将Flutter放到了/usr/local/flutter,所以选择Locate SDK,在文件窗上把/usr/local/flutter/bin拖拽下,这样会自动跳到这个目录下

然后选择设置即可Flutter SDK ,注意是bin目录

然后再次操作,成功创建Flutter工程

每个平台都有一个目录

多平台运行

左侧工具栏切到Flutter选项,可以看到几个平台的图标,选择对应平台,然后再执行即可查看效果

选择Chrome

执行

显示效果

可以看出对应的效果入口是lib/main.dart

试试macOS

选择iPhone(13.4.1)时报错了,看错误是证书问题,用Xcode打开Flutter里的Xcode工程

因为工程名是helloworld,创建出来的默认包名是com.example.helloworld,这个无法被自动注册

重新运行,安装在手机上,但是还是报错了。

一开始我以为的是免费的开发者账号,所以被手机系统拦截了,需要信任。在手机上打开设置 > 通用 > 描述文件 选择对应的账号并信任

再重新运行但是还是报相同的错误,使用Xcode工程现在是可以运行在手机上,所以问题应该是出在Flutter驱动Xcode的过程,因为跨平台。网上提到的几个方法

  1. flutter clean -- 应该和在Xcode中清理一样
  2. 版本问题: 升级Flutter,-- 我的Flutter和Xcode版本按目前的时间点都很新,应该是这个问题但没办法升级了
  3. 手机上设置信任 -- 这步我已经操作过了,Xcode能正常跑,VSCode上不行

换一台iPhone(18.0.1)试了一下,发现能跑起来,那应该是兼容的问题

设备系统 Xcode VSCode + Flutter
iOS 13.4.1
iOS 18.0.1

启动系统会弹2个告警的弹窗。idevicesyslog和iproxy。

未信任iproxy无法正常运行,会一直等待,处理方法是把这两个工具加入到系统信任的白名单中

sh 复制代码
// flutter路径根据实际的情况进行修改,我这边是 /usr/local/flutter/
$ sudo xattr -d com.apple.quarantine /usr/local/flutter/bin/cache/artifacts/usbmuxd/iproxy
$ sudo xattr -d com.apple.quarantine /usr/local/flutter/bin/cache/artifacts/libimobiledevice/idevicesyslog

然后就正常运行了

看对应的Xcode工程也在执行的状态,所以可以打开Xcode进行调试

体验与其它

  1. 多平台都能运行很好,而且看工程也有原生的部分,对原来熟悉该平台的开发友好
  2. 操作上还是会遇到各自平台一些坑,特别是移动端,flutter既然在上面加了一层,可以接受。
  3. 涉及到原平台的部分还是在对应的IDE操作直观些

后期: 把Android也跑起来,然后学习flutter代码相关的

参考

  1. 开始在 macOS 上构建 Flutter iOS 应用
  2. 编写第一个 Flutter 应用
  3. flutter vscode环境搭建+vscode插件推荐
  4. Flutter真机运行提示 无法打开"iproxy",因为无法验证开发者
相关推荐
Ya-Jun1 小时前
常用第三方库精讲:cached_network_image图片加载优化
android·flutter
程一个大前端6 小时前
【Flutter高效开发】GetX指南:一文学会状态管理、路由与依赖注入
flutter
DEVIL8 小时前
Flutter中各类Controller的本质
android·flutter
ak啊10 小时前
Flutter UI 组件应用一:布局、交互、动画与弹窗
flutter
Lafar10 小时前
Flutter与原生通讯的channel
flutter
lilili啊啊啊11 小时前
iOS 应用性能测试工具对比:Xcode Instruments、克魔助手与性能狗
测试工具·ios·iphone·xcode·克魔
JarvanMo15 小时前
# 还在用灰秃秃的图片占位符?快来试试这款神器
前端·flutter
恋猫de小郭17 小时前
Flutter 在全新 Platform 和 UI 线程合并后,出现了什么大坑和变化?
android·前端·flutter
264玫瑰资源库1 天前
嘻游电玩三端客户端部署实战:PC + Android + iOS 环境全覆盖教程
android·ios