flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。

一、前言

最近开始开发App软件系统,之前一直在做Java开发,且前后台分离的开发模式较多, spring cloud、dubbo +zookeeper、spring boot+zookeeper、spring cloud Alibaba…诸如写下几个业务相关接口 postman一测 写下API扔给前端就不管了哈哈。。。对于刚接触flutter框架的我来说,非常的奔溃:不熟悉dart语言、不熟悉flutter布局,不了解相关sdk…最近也一直睡不好 脑子里都是flutter的东西。于今天下午研究了好半天,总算成功的将一个小demo配置到了我的ios 苹果8上面。对于flutter开发的新手来说(Mac环境下)稍微有点帮助。不足之处,还希望多多指正!

二、准备环境

1、android studio

点击下载
flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。_第1张图片
具体安装就不详细介绍了,next的操作步骤。

2、fltter SDK

从git上下载flutter,配置相关环境变量,自行百度 本篇文章也不是写安装教程的
flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。_第2张图片
安装成功以后,打开终端,查看命令。虽然在android studio里的plugins里面下载了 flutter以及dart,但是用 flutter doctor命令行还是会有叉叉 暂时不做考虑

3、安装Xode

从app store中下载 Xcode,稍微有点慢 耐心等待。

4、配置xcode环境

安装完成以后,正式进入iPhone真机调试的相关配置。首先创建一个flutter项目
flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。_第3张图片
flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。_第4张图片
next ,下一步时候的 一定要注意 注意:包的名字一定要更改 不建议用com.exmaple.xxx 在运行的时候 如果用了默认的包名字会报错,
flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。_第5张图片
点击Finish,完成flutter项目的创建,完成以后,插入手机,等待flutter识别手机,稍微等待一下。直到导航栏看到自己的iPhone
flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。_第6张图片

如果这个时候就run, 会报错类似有个如下的红图
在这里插入图片描述
点击 open 打开xcode,然后找到
flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。_第7张图片
点击 preferences,找到如下
flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。_第8张图片
将自己的appid添加进去后,
flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。_第9张图片
查看是否和本机进行了绑定,而后,

配置完成以后,status不报错,证明配置成功 如下
flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。_第10张图片
配置相关完成以后,flutter run 启动项目
可能系统会提示输入密码,输入mac pro的密码,然后查看手机
flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。_第11张图片
出现这个问题,很明显了。在run的时候保持手机不要锁定状态,而后运行,还会报个小错误 如下:
flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。_第12张图片
但是,查看手机已经成功安装了该flutter软件,然后点击手机上的flutter会提示不信任的xxxx
这个时候就已经大功告成了一半了

点击设置-通用-描述文件与设备管理,找到刚才安装上的flutterapp,点击信任
flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。_第13张图片

而后,打开软件
flutter +Android studio+Xcode 调试iphone手机App程序(Mac系统),图文详解,共勉。_第14张图片
成功打开软件,至此。安装成功,第一个flutter App软件成功放入手机中。

公司中的flutter项目会有很多的依赖,网上百度一下可以找出阿里的镜像配置,修改相关配置文件,同时,在android studio的terminal中输入

flutter clean 清理项目
flutter pub get 获得依赖
点击 run。 相关细节日后更新。

你可能感兴趣的:(移动端,ios,flutter,xcode,android,android,studio)