iOS集成Flutter

一、环境配置

1、Flutter环境安装

因安卓代码原因,有很多jar包和Flutter3.0以后得语法冲突,导致无法使用最新的Flutter语言开发,需要将Flutter的版本控制到Flutter3.0以下,和安卓环境一直的情况下,我们使用Flutter2.2的版本。
因为我的电脑已经安装了Flutter3.0,所以需要降级,先打开终端,具体降级方式如下:
1、查看所有分支和当前分支

flutter channel

2、切换到指定分支

flutter channel stable

3、降级到指定版本

flutter downgrade v2.2.0

4、检查Flutter环境

flutter doctor

如果想要安装最新的Flutter版本,可以这样

如果你要在 Apple 芯片的 Mac 电脑 上使用,你还需要安装 Rosetta 2 环境因为 一些辅助工具 仍然需要,你可以通过手动运行下面的命令来安装:

 sudo softwareupdate --install-rosetta --agree-to-license

如果不是M系列芯片则直接下一步:

1、下载以下安装包来获取最新的 stable Flutter SDK:
Intel芯片下载

Apple 芯片下载

2、将文件解压到目标路径, 比如:

cd ~/development
unzip ~/Downloads/flutter_macos_3.7.12-stable.zip

3、配置 flutter 的 PATH 环境变量:

export PATH="$PATH:`pwd`/flutter/bin"

这个命令配置了 PATH 环境变量,且只会在你 当前 命令行窗口中生效。如果想让它永久生效,请查看 更新 PATH 环境变量。

4、检查Flutter环境

flutter doctor

如下图所示,则表示Flutter环境已经配置完成:
flutter2.2
flutter3.7.10

2、XCode安装和配置

要为iOS开发Flutter应用程序,需要Xcode 9.0或更高版本,因为iOS有一些新特性需要兼容,所以一般我们都是使用最新的XCode版本,安装较为简单,我们打开mac的应用商店,搜索XCode即可。

在这里插入图片描述

等待XCode安装完成之后,我们需要设置开发者账号或者开发证书,否则是无法真机调试的,具体步骤为:
打开XCode -> XCode选项下Settings -> Accounts ->添加开发者账号
完成之后如下:
在这里插入图片描述

flutter和iOS的混合开发是不支持BitCode的,所以我们需要把它设置为在这里插入图片描述

3、Cocoapods安装

目前iOS开发中主流的第三方管理的工具就是cocoapods,Flutter官方也是推荐此方法来管理,相比于手动集成,他们更加便捷,我们只需要使用简单的脚本语言就能把最新的代码集成进来。
具体的集成方式如下:

1、安装ruby环境

mac下是自带ruby环境的,这个我们不需要再关心,如果当前Flutter语法和默认的ruby冲突,我们就需要安装所需的版本,这里因为项目重构和组件化的原因,我们用了一些新的脚本配置,这里ruby环境要安装两个版本,ruby-2.6.3和ruby-3.0.0,相关安装和版本切换如下:
1、查看当前的ruby版本

rvm list

2、查看可安装的ruby版本

rvm list known

3、安装想要的ruby版本

rvm install 3.0.0
rvm install 2.6.3

4、切换ruby默认版本

rvm use ruby-3.0.0 --default

当然如果我们本地有其他的工具需要特定的ruby环境才能跑的话,我们只需要通过第四步切换到对应的环境即可。

2、删除自带的ruby镜像

在终端输入:

gem sources --remove https://rubygems.org/

3、添加新镜像

在终端输入:

gem source --add https://gems.ruby-china.com/

添加完成之后,确保只有一个镜像是我们所需的,在终端输入:

gem sources -l

4、更新ruby

在终端输入:

sudo gem update --system

5、安装cocoapods

在终端输入:

sudo gem install -n /usr/local/bin cocoapods

6、查询cocoapods是否安装成功

在终端输入:

pod --version

7、安装pod

在终端输入:

pod setup

8、完成

二、Flutter代码开发和配置

在集成之前,我们需要先把Flutter代码跑通,否则是无法进行下去的,需要先检查我们check下来的代码是否完整,文件夹中必须要有pubspec.yaml文件,否则无法生成相对应的ios文件夹,如果没有发现iOS文件夹,则需要先运行一下相应指令。

在这里插入图片描述
在VSCode终端执行:

flutter pub get

如果我们需要开发新的页面,这个时候就可以进行了。

1、真机调试

如果需要真机调试,我们需要进一步在XCode中配置相关证书。在iOS开发中,真机调试的情况下是需要开发者账号的,否则生成的相关证书有效期是只有7天,过了7天就无法再次使用了,默认情况下我们使用自动证书管理会简单一点。
我们打开.ios文件夹,然后双击Runner.xcworkspace文件,就会使用XCode打开相应工程
在这里插入图片描述
接下来找到相应位置配置开发者账号,账号配置如下:
在这里插入图片描述

配置完成之后选择好要运行的设备,然后点击run按钮就可以检查代码时候正常运行了。

在这里插入图片描述
如果可以正常运行,则一般情况下就没有问题了,就可以进行集成了。

2、通过cocoapods把代码集成到项目中

1、项目文件夹配置

这里我们需要先把Flutter文件夹和iOS项目的根目录文件夹放到同一层级
在这里插入图片描述

2、编辑Podfile文件夹

这个文件夹是iOS项目工程所有的第三方库的配置文件,基本控制所有的第三方版本的管理,这里我们需要把Flutter项目的代码和依赖库添加进来,当然添加方式有很多种,但是Flutter1.0和Flutter2.0和Flutter3.0的集成方式都是有所区别,这点Flutter的官方文档有提到,下面是Flutter2.0版本的配置方式:
在这里插入图片描述
这里是设置路径和需要引入的项目名称。
然后在target下添加集成
在这里插入图片描述

3、集成Flutter代码

打开终端,cd到iOS项目中

在这里插入图片描述
773dfa.png)
然后运行:

 pod install 

注意:iOS项目中,我们使用了很多新的脚本语言,如果pod install执行失败,这里我们需要把ruby环境先切换到3.0.0版本,然后再执行pod install,执行结束之后再切换到2.6.3

顺利的话这个时候代码就已经集成进来了,这个时候再打开iOS项目就会发现多了3个库,分别是:
在这里插入图片描述

下面,按照上面的真机调试,运行一下,如果正常运行则说明集成已经完成了。

注意:集成部分踩了一些坑,配置方面已经写了一些,按照上面的步骤来基本是可以避免的,如果最后跑不起来,而且XCode也没有具体报错,基本上都是一些环境配置版本冲突造成的。重新检查一下配置环境的版本即可。

猜你喜欢

转载自blog.csdn.net/weixin_38201792/article/details/130361418