Flutter是目前比较火的开发方式, 本人身为iOS开发, 最近打算研究下Flutter, 并不定期发布一些自己关于Flutter的学习心得,欢迎各路大神前来指点

Flutter的好处与缺点, 我不再多说了, 网上有很多文章分析, 大部分都说夸Flutter的(不好也不会这么火啊😀😀)

首先本人身为原生客户端开发者, 对跨平台开发的认识有些局限, 我并不认为Flutter可以完全取代原生开发, 前端开发方式有好多种, 每种都有自己的优缺点, 一个项目所选用的技术栈, 要充分考虑各端的特性, (以前公司用纯web的方式开发过一款App,结果被苹果无情的拒绝上架…),而且原生并不是一无是处……

话不多说, 开门见山

在网上查了两小时,目前集成Flutter的方案大体分为三种:

1):纯Flutter项目,

2):Flutter项目混编,

3):iOS通过cocoapods引入

基于上面我对跨平台开发的认识,从我个人的角度 简单的分析下这三种方式的缺点

首先我绝对不会选择用纯Flutter 的方式开发, 道理很简单, 我不可能完全摒弃公司现有的原生App,去重写自己的产品, 这样开发成本就太高了, 即便是一个新项目, 我也不建议用纯Flutter, 因为这样会舍弃掉原生平台的优势(还是我上面说的, 开发时要充分考虑到各个端的特性及适用场景)

所以我选择 原生与Flutter混编的方式进行开发, 既然身为iOS开发, 在对工程引入新的框架式, 几乎都会想到用cocoapods, 我也不例外

一: 用Xcode 创建一个新的工程, 先放一个button,

二: 通过cocoapods 管理该工程 (这两个步骤必须要会啊,不会的自己baidu去吧😀)

三: 下载FlutterSDK (https://flutter.dev/docs/development/tools/sdk/releases?tab=macos)

四: 把下载好的SDK 放到一个你喜欢的文件目录下面 然后配置环境变量 步骤如下:

a: 终端输入 open ~/.bash_profile(终端出错, 退回根目录 执行该命令)

b: 在弹出的文本框内 贴如一下代码
export PATH=你喜欢的文件目录/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
c: source ~/.bash_profile 是该配置文件生效
d: flutter -h

在终端内可以看到一些命令 说明你的SDK配置成功了, 如果提示没找到flutter 那么要检查下你的SDK是否下载完整

五: 终端输入 flutter doctor 检查一下看看你的mac是不是还需要配置别的东西(这一步就根据终端的提示进行操作就可以了, 你的mac缺少什么 他就会提示你安装什么)

六: 一切就绪之后 cd到最开始你用Xcode创建的工程目录下 终端输入

flutter create -t module my_flutter

创建一个flutter工程, 工程目录如下

frc 521e60066773506d41782092bf902d37 - iOS Mac 配置Flutter环境, 及在原有项目基础之上引入Flutter
WechatIMG4.jpeg

到此为止你已经有了一个iOS原生工程, 和一个flutter工程了(原谅我demo命名中的 “flatter”😀😀) 下面要做的就是用cocoapods, 引入flutter

七: 在podfile里添加下面两行

flutter_application_path = 'my_flutter的路径'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

八:在Xcode的Build Phases 下 新建个Run Script Phases 贴入下面两行

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

最后 podfile 中的内容如下

frc 07856755d2c43e380ce167f2b9f33090 - iOS Mac 配置Flutter环境, 及在原有项目基础之上引入Flutter
WechatIMG6 2.jpeg

九:pod install 你就会得到一个含有flutter产物的 Xcode 工程啦

frc 7d782e56cdd37790c8b6085d856bf491 - iOS Mac 配置Flutter环境, 及在原有项目基础之上引入Flutter
WechatIMG7.jpeg

想要用 flutter 先要引入 #import 然后在button的点击时间里

    FlutterViewController *vc = [FlutterViewController new];
    [self presentViewController:vc animated:YES completion:nil];

好啦 这样你就相当于 在一个现有的原生的iOS工程里 用cocoapods的方式引入了一个Flutter模块啦
另外 有两点要注意的地方
1: 如果pod install 执行完之后 可能出现出现Flutter: Permission denied 的权限编译错误 具体参照这篇文章https://www.cnblogs.com/lulushen/p/11804693.html
2: 如果在终端操作的某一步骤 出现Permission denied 权限问题
那么需要cd到 FlutterSDK文件夹和 创建的Flutter工程的文件夹下
终端执行

sudo chmod -R 777 *

修改下权限就好啦
最后总结下这篇文章所干的事情, 配置SDK 配置开发环境 创建Flutter工程 Xcode 通过cocoapods集成Flutter
有什么不明白的私信我就好了

iOS Mac 配置Flutter环境, 及在原有项目基础之上引入Flutter