Flutter Module添加到iOS项目示例详解

目录
  • 1. 创建flutter module
  • 2. flutter 模块嵌入原生应用
  • 3. flutter模块和原生通信
  • 小结

1. 创建flutter module

摘要:我们实际开发开始作为混合开发,可能会把一个模块使用flutter开发,之后嵌入到iOS项目中。比如说我们的商城模块使用flutter开发,这样android和iOS都可以使用。

我们通常会把iOS项目和 flutter module在同一目录,我们创建一个商城的module

flutter create --template module mall_flutter_module

目录结构如下我们的flutter的module和原生工程

.ios 是隐藏目录,可以单独运行Flutter module,测试此模块的功能,iOS代码添加到现有应用程序的项目或插件中,而不是添加到模块的.ios 目录中。

由于.ios 目录是自动生成的,因此请勿对其进行源代码控制。在新机器上构建模块之前,请先在mall_flutter_module目录中运行flutter pub get来重新生成.ios 目录,然后再使用Flutter模块构建iOS项目。

或者使用AndroidStudio创建Module

下面的原生工程的目录结构如图

2. flutter 模块嵌入原生应用

flutter_module嵌入原生通常有2种方式,一种是通过Cocoapods,这种对iOS开发比较推荐, 使用CocoaPods和已安装的Flutter SDK,该方法需要我们安装了Flutter 环境。 我们看下podfile,这里主要是要看下你flutter的模块的位置,自己根据实际调整flutter_application_path

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '13.0'
flutter_application_path = '../../mall_flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target 'MallExampleForIOS' do
  use_frameworks!
  install_all_flutter_pods(flutter_application_path)
end

之后执行pod install 后打开我们 workspace进行相关交互

当在mall_flutter_module / pubspec.yaml中更改Flutter插件的依赖性或者第一次运行时,请在Flutter模块目录中运行flutter pub get来刷新podhelper.rb脚本读取的插件列表。然后,从应用程序目录再次运行pod install。

podhelper.rb脚本将插件Flutter.framework和App.framework嵌入到项目中。

首先我们pub get后运行下

修改后最好运行下 flutter module,之后我们使用Xcode编译成功后

  • 手动拖入

这个我们一般iOS开发进入三方都知道,可以通过手动拖入Framework进行编译 在Xcode中拖入 Flutter Frameworks,首先要通过命令创建

flutter build ios-framework --output=./Flutter/

里面包括一些三方的插件生成的Framework,之后将 frameworks 链接到 iOS 应用程序。

将文件夹的frameworks拖入Build Settings > Build Phases > Link Binary With Libraries 或者脱如下图位置

之后添加路径

在 Build Settings -> Search Paths -> Framework Search Paths 中添加  ${PODS_ROOT}/../mall_flutter_module/Flutter/Release

这里使用cocoapods就不用手动了,这里就不手动展示了。

3. flutter模块和原生通信

我们在main.storyboard 中添加些原生界面和元素

在flutter页面嵌入原生iOS程序要使用flutter引擎进行渲染,FlutterEngine是Dart, VM和flutter运行时的hostFlutterViewController附着于FlutterEngine,作用是通信和显示Flutter UI

import Foundation
import Flutter
import FlutterPluginRegistrant
enum Route: Int {
    case none
    case home
    case orders
    case orderCreate
    case evaluates
    case coupons
    case addressList
}
class MallLauncher: NSObject {
    let flutterEngine = FlutterEngine(name: "io.flutter", project: nil)
    lazy var eventChannel = FlutterEventChannel(name: "mall.event.channel", binaryMessenger: flutterEngine.binaryMessenger)
    lazy var viewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
    /// 登录参数
    /// 使用的是正式环境!
    var loginInfo = [
        "host": 1, // app 标识, 1 口腔
        "onlineStoreId": "1366573792149848066", // 网店 id
        "tenantId": "000001", // 租户 id
        "userId": "1384433226133696514", // 商城用户 id
        "token": "test", // 商城 token
        "user": [
            "nickname": "xxx", // 用户昵称
            "phone": "xxxx", // 用户手机号
            "avatar": "" // 用户头像
        ],
        "baseUrl": "https://apisaastore.baiyaodajiankang.com/",
        "shopId": "1366574325145223169" // 初始店铺id
    ] as [String: Any]
    /// 初始化方法
    /// - Parameter initRoute: 初始化路由
    /// - Parameter extraParameters: 额外参数
    init(initRoute: Route = .home, extraParameters: Any? = nil) {
        super.init()
        loginInfo["initRoute"] = initRoute.rawValue // 设置初始路由
        if let extraParameters = extraParameters {
            loginInfo["data"] = extraParameters // 设置额外参数, 如订单信息
        }
        flutterEngine.run()
        eventChannel.setStreamHandler(self)
        GeneratedPluginRegistrant.register(with: flutterEngine)
    }
}
// 交互
extension MallLauncher: FlutterStreamHandler {
    func onListen(withArguments arguments: Any?, eventSink events: @escaping FlutterEventSink) -> FlutterError? {
        events(loginInfo) // 传递登录信息
        return nil
    }
    func onCancel(withArguments arguments: Any?) -> FlutterError? {
        nil
    }
}

这里主要是初始化信息以及创建FlutterEngine,之后运行flutterEngine.run(),之后我们跳转flutterViewController的时候就是使用缓存

  • 交互创建FlutterMethodChannel
let mallLauncher = MallLauncher()
lazy var mathodChannel: FlutterMethodChannel = FlutterMethodChannel(name: "mall.method.channel", binaryMessenger: mallLauncher.flutterEngine.binaryMessenger)
  • 加载flutter页面
let flutterView = mallLauncher.viewController.view!
flutterView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(flutterView)
  • 跳转指定flutter页面
launch(MallLauncher(initRoute: .evaluates, extraParameters: nil))

具体实现

/// 初始化方法
    /// - Parameter initRoute: 初始化路由
    /// - Parameter extraParameters: 额外参数
    init(initRoute: Route = .home, extraParameters: Any? = nil) {
        super.init()
        loginInfo["initRoute"] = initRoute.rawValue // 设置初始路由
        if let extraParameters = extraParameters {
            loginInfo["data"] = extraParameters // 设置额外参数, 如订单信息
        }
        flutterEngine.run()
        eventChannel.setStreamHandler(self)
        GeneratedPluginRegistrant.register(with: flutterEngine)
    }

跳转的页面都是flutter中的页面,这样就嵌入一个flutter到我们iOS工程了。

小结

flutter创建Module可以通过命令行或者AndroidStudio创建,我们添加module到iOS工程可以通过CocoaPods的方式pod isntall 或者手动拖入,最后就是flutter端和原生端的交互,可以看下之前的文章  https://www.jb51.net/article/258981.htm

以上就是Flutter Module添加到iOS项目示例详解的详细内容,更多关于iOS添加Flutter Module的资料请关注我们其它相关文章!

时间: 2022-08-11

ios开发Flutter之数据存储

目录 偏好存储 sqlite 创建表 数据插入 数据查询 数据修改 删除表 删除数据库 偏好存储 shared_preferences 类比iOS中的UserDefaults,使用方法比较简单. 地址戳这里 pub get之后会自动出现一个这样的文件generated_plugin_registrant.dart 数据存储: void _incrementCounter() { //创建对象,用于操作存储和读取. SharedPreferences.getInstance().then((Sha

Flutter调用Android和iOS原生代码的方法示例

前言 本文主要给大家介绍了关于Flutter调用Android和iOS原生代码的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 分3个大步骤: 1.在flutter中调用原生方法 2.在Android中实现被调用的方法 3.在iOS中实现被调用的方法 在flutter中调用原生方法 场景,这里你希望调用原生方法告诉你一个bool值,这个值的意义你可以随意定,这里表示的意义是是否是中国用户. 你可以在flutter中设计好要调用的方法名称,这里就叫 isChinese 请

Flutter集成到已有iOS工程的方法步骤

前言 之前写过一篇介绍flutter集成到Android工程的文章,这次总结记录一下自己把flutter集成到iOS的流程,以及遇到的问题以及和解决方法供大家参考. 创建flutter_module 要在iOS工程中集成flutter,首先我们需要创建一个flutter_module,创建的方法有两种: 使用Android studio创建 使用Android studio创建在上一篇新版Flutter集成到已有Android项目中有介绍,这里不再赘述. 使用flutter命令创建 在指定目录下

Flutter项目在 iOS14 启动崩溃的解决方法

Flutter是什么? Flutter是Google一个新的用于构建跨平台的手机App的SDK.写一份代码,在Android 和iOS平台上都可以运行. 下面看下Flutter项目在 iOS14 启动崩溃的问题及解决方法 崩溃现象 在iOS14发布之后,运行APP就出现闪退,和机型没关,只要是iOS 14就必闪退 崩溃分析 1.启动就闪退,多起几次可能有一次没有问题. 2.启动后到某个页面卡死(必卡跳不过) 根本原因尚不明确,个人分析Product Name会影响Header Folder Pa

Flutter iOS开发OC混编Swift动态库和静态库问题填坑

目录 引言 OC接入Swift 插件 静态库和 Framework 区别 新的问题: non-modular heade 不能在Framework Module中使用非Modular 的 Header 引言 Flutter 在 iOS 上的编译问题相信大家多多少少遇到过,不知道大家在搜索这方便的问题时,得到的答案是不是让你 clean 或者 install 多几次,很多时候就算解决完问题,也是处于薛定谔的状态,所以本篇也简单记录下 Flutter 开发中,OC 混编 Swift 遭遇动态库和静态

IOS开发OC代码中创建Swift编写的视图控制器

IOS开发OC代码中创建Swift编写的视图控制器 背景 近日在和一群朋友做项目,我和另一位同学负责iOS客户端,我是一直使用OC的,而他只会Swift,因此在我们分工协作之后,就需要把代码合在一起,这就牵扯到如何在TabbarController中添加一个swift创建的子控制器的问题. 解决 首先在一个OC项目中新建一个Swift类,继承自UITableViewController,并且修改其view背景色,方便后续测试. import UIKit class ESSwiftTableVie

浅谈Linux C语言动态库及静态库

假设在math目录下已编辑好add.c sub.c div.c mul.c func_point.c文件,func_point.c为包含main()的源文件! 动态库的制作: 方法一: gcc -c -fPIC add.c sub.c div.c mul.c //-c表示生成.o目标文件,-f后加一些编译选项,PIC表示与位置无关 gcc -shared -o libmymath.so add.o sub.o mul.o div.o//创建共享库mymath,添加add.o,sub.o,mul.

动态库调用静态库示例讲解

生成动态库: 需要的目标文件得用-fPIC选项生成. 而静态库所需的目标文件可以不用-fPIC选项. 例: 复制代码 代码如下: /////// static.h void static_print(); ///////static.cpp #include <iostream> #include "static.h" void static_print() { std::cout<<"This is static_print function&quo

在动态库和静态库中使用模板(dynamic libraries ,static libraries)

动态导入库和静态库: 他们实质是不一样的东西.静态库本身就包含了实际执行代码.符号表等等 ,而对于导入库而言,其实际的执行代码位于动态库中,导入库只包含了地址符号表等,确保程序找到对应函数的一些基本地址信息 问题分析: 模板函数和模板类在库中使用的时候 非常困难,但也不是不可能,因为只有相应参数类型的模板函数在库内部有实例,就能成功导出这个模板函数.对于模板类的公有成员函数们(包括构造/析构函数)全部都必须有实例存在. 为什么要将模板实例化: 只有将导出库里面的模板函数或者模板类实例化,才能将实

Swift使用CoreData时遇到的一些填坑记录

前言 最近在做一个 App 练手,其中用到了 CoreData 来存储用户的播放列表,由于 CoreData 这部分的文章还是比较少的,所以遇到了不少坑,所以写篇随笔记录一下. 题外话:可以给大家看看这个 App 的界面,我觉得还是挺清新的

Linux下g++编译与使用静态库和动态库的方法

在windows环境下,我们通常在IDE如VS的工程中开发C++项目,对于生成和使用静态库(*.lib)与动态库(*.dll)可能都已经比较熟悉,但是,在linux环境下,则是另一套模式,对应的静态库(*.a)与动态库(*.so)的生成与使用方式是不同的.刚开始可能会不适应,但是用多了应该会习惯这种使用,因为步骤上并没有VS下配置那么繁琐. 下面就分别总结下linux下生成并使用静态库与动态库的方法:(由于是C++项目,所以编译器用的g++,但是与gcc的使用是相通的) 首先是准备工作,把我们需

iOS创建与使用静态库

在日常项目开发中,不论是为了两个公司项目上的业务交流还是为了减少项目的编译时间,有的时候我们会把项目中的私密内容打包成静态库,或者是把项目中变动较少一部分打包成静态库以便提高编译效率,那么下面我们就来学习一下"iOS-静态库的创建与使用": (一)iOS静态库.动态库与Framework静态库与动态库的区别 (1)什么是库? 库(Library)直白一点说就是一段编译好的二进制代码,加上头文件就可以供别人使用;(例如: iOS中Objective-C编译下的.h和.m文件,打包静态库后

xcode 详解创建静态库和动态库的方法

xcode 创建静态库和动态库 1.linux中静态库和动态库区别: 库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种. 静态库:这类库的名字一般是libxxx.a:利用静态函数库编译成的文件比较大,因为整个函数库的所有数据都会被整合进目标代码中,他的优点就显而易见了,即编译后的执行程序不需要外部的函数库支持,因为所有使用的函数都已经被编译进去了.当然这也会成为他的缺点,因为如果静态函数库改变了,那么你的程序必须重新编译. 动态库:这类库的名字一般是lib

iOS中.a和.framework静态库的创建与.bundle资源包的使用详解

前言 开发中经常使用三方库去实现某特定功能,而这些三方库通常又分为开源库和闭源库.开源库可以直接拿到源码,和自己写的没有什么区别,我们可以最大程度的修改源码来适应自己功能.闭源库就是被发布者提前打包好的静态库或 Bundle 包,对此我们无法看到内部实现,对于其封装好的特定功能,我们也只需要调用其开放的API即可. 在正式的上代码之前,先介绍一些从网上搜集的静态库相关的基本概念,以加深对后面知识的理解 1. 库 库实际上是一种代码共享的方式,主要用于代码重用和源码隐藏,通常分为动态库和静态库.

IOS 打包静态库详细介绍

IOS 打包静态库详细介绍 一.前言 前段时间看的一本书上说:"隔着一段距离看,很多有趣的知识看起来都很唬人."比如说这篇我要总结的"静态库知识",在我初出茅庐的时候着实觉得那些后缀名为".frameworke".".a".".dylib"的文件很神秘,很高冷.那时我虽然知道只要导入一个库就能引用库里面很多封装好的东西,但对这个"库"究竟是什么"鬼",一直都是云里雾里