一、说明

之前写过 Windows 上配置 Flutter 开发 Android 的开发环境,文章地址:http://www.ptbird.cn/windows-flutter-environment-from-zero.html,而 iOS 开发模拟器预览依赖 xcode simulator ,打包编译发布到 app store 也是依赖 xcode。

安装配置的准备工作:

  • Flutter SDK
  • Xcode
  • brew

二、安装配置 flutter sdk

1、下载 SDK

官方文档地址:https://flutter.dev/docs/get-started/install/macos

如果你通过 V.P.N. 网络加速,可以直接从 google 下载 stable,如果你的网络访问 stable 有点问题,建议从 github clone 出 SDK 来。

github 地址:https://github.com/flutter/flutter

git clone https://github.com/flutter/flutter.git

下载下来后如下所示文件目录:

2.jpg

然后移动到你需要安装的同一目录即可,我移动到了 ~/dev/sdk 下面。

2、配置 flutter 环境变量

如果要配置 flutter 的环境变量,需要配置 bash_profile, 地址在 ~/.bash_profile* 一般都会存在,没有创建一个文件即可。

编辑文件 vim bash_profile:

# 创建一个变量用来记录 FLUTTER_PATH 的路径
FLUTTER_PATH=/Users/lizhanwen/sdk/flutter/bin
# 配置国内代理
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# export 最终的 PATH,后面需要拼接上 FLUTTER_PATH
export PATH=${PATH}:${FLUTTER_PATH}

下面是我的 profile 配置信息(忽略掉上面三行的 JAVA 的配置,这是我之前的配的本地 JAVA SDK)。

DART 也是我单独配的,其实 FLUTTER 本身会自动下载 DART SDK,不是必须的。

JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_40.jdk/Contents/Home
PATH=$JAVA_HOME/bin:$PATH:.
CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.

DART_PATH=/Users/lizhanwen/sdk/dart-sdk/bin
FLUTTER_PATH=/Users/lizhanwen/sdk/flutter/bin

export JAVA_HOME

export CLASSPATH

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

export PATH=${PATH}:/Users/lizhanwen/pha-all/arcanist/bin:${DART_PATH}:${FLUTTER_PATH}

使配置文件生效:

source bash_profile

需要注意的是,如果你使用的是 zsh termial 而非 bash,则需要配置 .zshrcsource bash_profile

3.jpg

3、检测 flutter SDK

在命令行中运行 flutter 命令:(我安装的时候 flutter 版本已经升级了,因此会提示我升级 flutter)

flutter

39827-sjrfca7hgv.png

三、Flutter Doctor

运行 flutter doctor 能够检测当前 flutter 环境中缺少,然后按照提示去安装即可。

(下面是我之前安装的,xcode 我本来就有, simulator 也有,主要是调试 ios APP 用,之前就安装了)

(因为 在 mac 电脑上,我不用来做 android 开发,android studio 我不安装,感兴趣的,搜索如何安装配置 android studio 即可)

flutter doctor 对每个问题都会列出解决办法,按照提示执行命令即可。

flutter doctor

95032-8ccv06l3615.png

四、启动 simulator 开启调试

1、一台设备

随便开启一个 simulator 即可

11955-y6t27gz2dv.png

执行 flutter devices 命令即可列出当前能够 connect 的设备:

77844-oxmgb2eqr58.png

五、初始化一个 flutter 项目

执行命令:

flutter create projectname

结果:

73824-mnrbebtwqtf.png

66326-5snp4q6vcq.png

六、运行 flutter 项目

命令: --debug 能够通过 debug 方式运行,在 terminal 中 print() 方法能够显示内容。

flutter run --debug

如果只有一台在线的设备,能够 connected ,则会直接选择那台设备去运行。

04467-6wnyyhpcfh5.png

shift + R 能够进行热替换重刷应用。

69368-9ryuo93g7us.png

2、多台设备

如果有多台设备,比如多个 simulator:

[图片上传中...(78928-7qtdw1lt8kb)]

在运行的时候需要指定使用哪台,通过 -d 制定 device id:

flutter run -d CDD30F40-05EB-4661-B949-53FC672EE78D  --debug

43170-2u6o47ng53c.png

七、xcode 真机调试

iphone 通过数据线连接电脑,打开 xcode

打开新的项目文件,选择 flutter 项目中的 ios/Runner.xcworkspace 文件:

53605-c8rqgkf2vwa.png

在 xcode 的 runner 中能够直接选择真机然后运行:

44733-fai2hh7ke07.png

当然直接运行会 build failed,这主要有两个问题:

1、添加开发者账号

xcode 真机调试是需要 apple 开发者账号,这个和 ios 开发没啥区别:

个人申请一个 apple id 作为 personal team ,然后添加 account 即可:

97516-sec1yr29os.png

2、修改 bundle identifier

默认的 bundle identifier 是 com.example.demo,需要改成自己开发者账号下的唯一名字。

34365-4who1crx40e.png

之后在 xcode 中运行即可:

93766-y5tvfczhqvi.png

八、 命令行真机调试

注意:只有xcode 能够编译通过了,才能进行命令行真机调试,因为依赖 xcode 编译

比如我的设备如下:

80845-agp1wusowqc.png

看到上面 Postbird 就是我的手机,指定上面的 device id 运行即可:

flutter run -d ba487ea3bxxxxxxxxxxxxxxxxxxxx --debug

如果无法安装,手机上需要在 通用-描述文件与设备管理 中将开发者应用信任:

59431-sjzwswdeqwd.png