Flutter混合开发:在已有iOS项目中引入Flutter(上)

简介: 在android项目中添加flutter模块比较简单,因为毕竟都是google的,但是在ios中添加flutter模块有些麻烦了,我们首先参考的是官方文档flutter.cn/docs/develo…但是在实际过程中会遇到各种问题(当然我本身对ios开发不熟悉也造成了不小的困扰),这里结合官方的步骤和我的经验来说说整个接入过程和遇到的坑。我的环境是Android Studio 4.0.1 + Xcode12.4 + flutter2.0.5 (mac是M1芯片,后面会提到它的影响)

前言


在android项目中添加flutter模块比较简单,因为毕竟都是google的,但是在ios中添加flutter模块有些麻烦了,我们首先参考的是官方文档flutter.cn/docs/develo…

但是在实际过程中会遇到各种问题(当然我本身对ios开发不熟悉也造成了不小的困扰),这里结合官方的步骤和我的经验来说说整个接入过程和遇到的坑。

我的环境是Android Studio 4.0.1 + Xcode12.4 + flutter2.0.5 (mac是M1芯片,后面会提到它的影响)


创建flutter module


首先我们创建一个flutter module的项目,可以用命令创建


flutter create --template module 项目名称


也可以直接用idea创建(注意创建的时候一定要选择flutter module)。创建完成build一下,命令如下:


flutter build ios


这里就会出现第一个问题:签名问题。执行上面命令后会报错:


No valid code signing certificates were found

You can connect to your Apple Developer account by signing in with your Apple ID

in Xcode and create an iOS Development Certificate as well as a Provisioning

Profile for your project by:

1- Open the Flutter project's Xcode target with


open ios/Runner.xcworkspace
复制代码


2- Select the 'Runner' project in the navigator then the 'Runner' target


in the project settings
复制代码


3- Make sure a 'Development Team' is selected. - For Xcode 10, look under General > Signing > Team. - For Xcode 11 and newer, look under Signing & Capabilities > Team.


You may need to:
     - Log in with your Apple ID in Xcode first
     - Ensure you have a valid unique Bundle ID
     - Register your device with your Apple Developer Account
     - Let Xcode automatically provision a profile for your app
复制代码


4- Build or run your project again

5- Trust your newly created Development Certificate on your iOS device


via Settings > General > Device Management > [your new certificate] > Trust
复制代码


For more information, please visit:developer.apple.com/library/con…AppDistributionGuide/MaintainingCertificates/MaintainingCertificates.html

Or run on an iOS simulator without code signing


这里可以在build的时候选择不签名,命令如下:


flutter build ios --no-codesign

这样就可以build成功。


创建ios项目


我们本身要在已有项目中接入,但是可以先用一个新的项目来进行调研。

这里要注意,创建ios项目的时候我的设置是:


Interfase: StoryBoard

LifeCycle: UIKit App Delegate

Language:Swift


这是因为在官方后续的示例代码中,使用AppDelegate。

这里因为我对ios开发属于小白,所以一开始选择的是SwiftUI


Interfase: SwiftUI

LifeCycle: SwiftUI App

Language:Swift


但是在后续的开发中发现SwiftUI框架好像没法启动flutter页面,于是重新创建了一个项目。

注意:我们将ios项目和之前的flutter module并列放在同一目录下,后面的操作都是基于这一相对路径的。如果你放在了不同目录,后续引入的时候就需要注意路径问题。


ios接入flutter module


官方给出了三种接入方案,这三种方案各有优缺点,我们先简单看看这三种方案:


  • 使用 CocoaPods 和 Flutter SDK 集成:ios项目中用CocoaPods直接接入管理flutter module。这种方案需要所有开发人员都配置flutter环境,且安装CocoaPods;优点是通过CocoaPods自动集成,配置简单。
  • 在 Xcode 中集成 frameworks:将flutter module先build成FrameWork文件,然后在ios项目中引入文件。这种方案的优点是ios开发人员不需要flutter环境,且项目不需要安装CocoaPods;缺点是每次修改都需要重新build,重新导入。
  • 通过CocoaPods打包Framework:与2类似,只不过在build时加入--cocoapods参数:flutter build ios-framework --cocoapods --xcframework --no-universal --output=some/path/MyApp/Flutter/。打包出来的是Flutter.podspec 文件,ios项目中通过CocoaPods管理集成。这个方案的与2方案差不多,缺点也是每次改动需要重新build,优点是ios开发人员不需要flutter环境。


所以要根据自身的情况来选择符合自己的方案。官方推荐第一种方案,我也先尝试了第一个方案。


使用 CocoaPods 和 Flutter SDK 集成



首先我们需要安装CocoaPods:

$ sudo gem install cocoapods

$ pod setup


注意: 这里网上很多文章在安装前会先让你更新ruby,配置淘宝镜像:


sudo gem update –system

gem sources –remove rubygems.org/

gem sources -a ruby.taobao.org/

gem sources -1  (验证你的ruby是淘宝)


更新这一步是没问题的,但是淘宝这个镜像就出问题了,目前这个链接已经无法访问了。所以这些老旧的信息就不要再相信了,我这边测试直接安装就可以。

然后可以根据官网guides.cocoapods.org/using/using… 来为ios项目添加CocoaPods。


首先在ios项目中执行命令:

$ pod init


这样会在ios项目中生成一个名为Podfile的文件。

然后我们修改该文件,先在开头加入:


flutter_application_path = '../flutter模块项目'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
复制代码


这里的flutter_application_path就是最开始创建flutter module路径,注意这个相对路径。

然后在每个target中添加:


target 'xxx' do
  install_all_flutter_pods(flutter_application_path)
end
复制代码


最后执行:

$ pod install


CocoaPods会自动将flutter module编辑出的产物集成到ios项目中。如果没有问题,执行⌘+B 编译项目就会成功。

这里有几个问题;


M1 CPU架构导致pod install执行失败

在Finder的Application中找到Terminal(终端),右键选择info(显示简介),在info里将Open with Rosetta(使用Rosetta打开)选中。

然后重新打开终端,执行:

sudo gem install ffi

然后再执行pod install就可以了。


文件缺失

执行pod install后可以看到如下消息:

Installing Flutter (1.0.0)

Installing FlutterPluginRegistrant (0.0.1)

Installing flutter_module项目 (0.0.1)


如果缺失说明编译出了问题,我们在文章一开始创建完flutter module后就执行了flutter build进行编译,然后会在build/ios/目录下生成framework文件,CocoaPods正是将这些文件集成到ios项目中的。所以如果没有进行build,或者build失败就会导致文件缺失。

另外因为涉及到debug和release,所以我执行了两次build:


flutter build ios --no-codesign

flutter build ios --debug --no-codesign


因为第一句命令之生成了release产物。


没有FlutterPluginRegistrant

集成后编译ios不通过,报错:framework not found FlutterPluginRegistrant。但是我们并没有使用任何flutter plugin,所以不存在这个文件,但是CocoaPods不知道为什么一定要这个文件,所以导致一直编译失败。

时间有限,加上与我们的情况不符合,所以我放弃了这种集成方案。


目录
相关文章
|
26天前
|
开发框架 前端开发 Android开发
Flutter 与原生模块(Android 和 iOS)之间的通信机制,包括方法调用、事件传递等,分析了通信的必要性、主要方式、数据传递、性能优化及错误处理,并通过实际案例展示了其应用效果,展望了未来的发展趋势
本文深入探讨了 Flutter 与原生模块(Android 和 iOS)之间的通信机制,包括方法调用、事件传递等,分析了通信的必要性、主要方式、数据传递、性能优化及错误处理,并通过实际案例展示了其应用效果,展望了未来的发展趋势。这对于实现高效的跨平台移动应用开发具有重要指导意义。
105 4
|
27天前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
4天前
|
iOS开发 开发者 MacOS
深入探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】 本文将带领读者深入了解Apple最新推出的SwiftUI框架,这一革命性的用户界面构建工具为iOS开发者提供了一种声明式、高效且直观的方式来创建复杂的用户界面。通过分析SwiftUI的核心概念、主要特性以及在实际项目中的应用示例,我们将展示如何利用SwiftUI简化UI代码,提高开发效率,并保持应用程序的高性能和响应性。无论你是iOS开发的新手还是有经验的开发者,本文都将为你提供宝贵的见解和实用的指导。
85 66
|
14天前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
|
18天前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。
|
20天前
|
存储 前端开发 Swift
探索iOS开发:从新手到专家的旅程
本文将带您领略iOS开发的奇妙之旅,从基础概念的理解到高级技巧的掌握,逐步深入iOS的世界。文章不仅分享技术知识,还鼓励读者在编程之路上保持好奇心和创新精神,实现个人成长与技术突破。
|
26天前
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
56 8
|
23天前
|
安全 IDE Swift
探索iOS开发之旅:从初学者到专家
在这篇文章中,我们将一起踏上iOS开发的旅程,从基础概念的理解到深入掌握核心技术。无论你是编程新手还是希望提升技能的开发者,这里都有你需要的指南和启示。我们将通过实际案例和代码示例,展示如何构建一个功能齐全的iOS应用。准备好了吗?让我们一起开始吧!
|
26天前
|
存储 JavaScript 前端开发
在Flutter开发中,状态管理至关重要。随着应用复杂度的提升,有效管理状态成为挑战
在Flutter开发中,状态管理至关重要。随着应用复杂度的提升,有效管理状态成为挑战。本文介绍了几种常用的状态管理框架,如Provider和Redux,分析了它们的基本原理、优缺点及适用场景,并提供了选择框架的建议和使用实例,旨在帮助开发者提高开发效率和应用性能。
34 4
|
26天前
|
传感器 前端开发 Android开发
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求。本文深入探讨了插件开发的基本概念、流程、集成方法、常见类型及开发实例,如相机插件的开发步骤,同时强调了版本兼容性、性能优化等注意事项,并展望了插件开发的未来趋势。
39 2