原生App项目集成flutter混合开发详细指南

最新推荐文章于 2024-09-11 13:34:31 发布
最新推荐文章于 2024-09-11 13:34:31 发布
阅读量332 收藏 1
点赞数
分类专栏： 移动端 前端 文章标签： flutter ios android
原文链接：https://blog.csdn.net/henry_lei/article/details/116747132
版权

方案选择

目前主流的混合开发方案有两种集成方式：

源码集成：也就是谷歌官方提供的方案[https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps]

产物集成：Flutter项目单独开发，开发完成后发布成aar包或者iOS的framework形式，原生项目依赖flutter输出的制品即可。具体可以参考闲鱼的文章

 

两种方式各有优劣，其实产物集成更好一些，不过即使是进行产物集成，也需要弄懂源码集成的方式，因为当有很多和原生交互的功能进行开发的时候，源码集成的方式可以直接调试会方便很多。

根据目前我们的情况：

1.参与人员都要进行flutter开发、

2.持续发布和构建我可以修改控制

我们现在这个项目选择了源码集成的方式。

为原生项目集成flutter

整个的集成方案是参考谷歌方法：[https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps]，但是有一些不一样，我是创建了一个flutter项目后，在原生的项目中使用git submodule的形式进行管理的。

1.创建flutter module project

我们假定已经有了原生的项目Native-iOS和Native-Android；现在我们需要创建我们的flutter项目。

  1. 把我们的flutter的channel切换到master(master分支下是flutter的preview版本)

    flutter channel master

  2. 创建flutter模块的项目

    flutter create -t module {moduleName}

    我这里创建一个flutter的模块项目叫flutter_module

    ➜ flutter create -t module flutter_module
Creating project flutter_module...
  flutter_module/test/widget_test.dart (created)
  ...
  ...
  flutter_module/.idea/workspace.xml (created)
Running "flutter packages get" in flutter_module...                 7.2s
Wrote 12 files.

All done!
Your module code is in flutter_module/lib/main.dart.

    创建成功后我们可以看一下目录结构

    ➜  flutter_module git:(master) ✗ tree -L 2 -a
.
├── .android
│   ├── Flutter
│   ├── app
│   ├── ...
├── .gitignore
├── .ios
│   ├── Config
│   ├── Flutter
│   ├── ...
│   └── Runner.xcworkspace
├── lib
│   └── main.dart
├── pubspec.lock
├── pubspec.yaml
└── test
    └── widget_test.dart

    在flutter的模块项目中包含有一个隐藏的.android和.ios目录这个目录下是可运行的Android和iOS项目，我们的flutter代码还是在lib下编写，注意在.android和.ios目录下都有一个Flutter目录，这个是我们flutter的库项目了。也就是Android用来生成aar，iOS用来生产framework的库。如果我们用flutter create xxx 生成的纯flutter项目是没有这个Flutter目录的。

  3. 把该项目使用git管理起来，稍后我们要在native项目中以子模块的形式添加进去。

    ➜  cd flutter_module
➜  git init
Initialized empty Git repository in /Users/zhiqiangdeng/Documents/ProjectSource/FlutterProject/flutter_module/.git/
➜  flutter_module git:(master) ✗

    初始化git仓库后我们先编辑一下项目下的.gitignore文件，当前这个文件是把项目下的.ios和.android忽略掉的。这个两个项目我们需要跟踪一下，大家可以去github上找一下iOS和Android的gitignore模版文件，然后添加到这个两个目录中，然后把顶层目录的文件作出如下修改，删除.android和.ios添加.ios/Flutter/Generated.xcconfig

    .gitignore文件：

    -.android/
-.ios/
+.ios/Flutter/Generated.xcconfig

  4. 提交你的flutter模块项目到你的git服务器

    git remote add origin {你的flutter module的仓库地址}
git push origin master

2.给iOS项目集成flutter

1.进入我们原生的iOS项目根目录中，为它添加一个git submodule，把我们的flutter项目拉取下来.

git submodule add {你的flutter module的仓库地址}
git submodule update

2.在项目的Podfile文件中添加下面的代码，在每次执行pod install会运行podhelper.rb

platform :ios, '8.0'
use_frameworks!

target 'MyApp' do
  pod 'AFNetworking', '~> 2.6'
  xxxx
end
#添加如下两行代码，路径修改为我们的fluter module的路径
flutter_application_path = './flutter-module-demo'
  eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

3.打开Xcode关闭bitcode配置Build Settings->Build Options->Enable Bitcode

4.添加编译脚本，打开Xcode在 Build Phases中添加New Run Script Phase在里面填入如下脚本

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

 

5.项目的配置完成现在需要生成一些配置文件

​ a. 进入原生项目的flutter模块目录中执行flutter packages get命令

​ b. 回到原生项目根目录执行pod install

➜  cd flutter-module-demo
➜  flutter-module-demo git:(master) flutter packages get
Running "flutter packages get" in flutter-module-demo...            0.4s
➜  flutter-module-demo git:(master) cd ..
➜  FlutterNativeiOS git:(master) ✗ pod install
Analyzing dependencies
Fetching podspec for `Flutter` from `./flutter-module-demo/.ios/Flutter/engine`
Fetching podspec for `FlutterPluginRegistrant` from `./flutter-module-demo/.ios/Flutter/FlutterPluginRegistrant`
Downloading dependencies
Using AFNetworking (2.6.3)
Installing Flutter (1.0.0)
Installing FlutterPluginRegistrant (0.0.1)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 3 dependencies from the Podfile and 3 total pods installed.

到此为止我们的原生项目就已经集成好了flutter项目了。

5.在原生项目中使用flutter，下面以swift项目为例

修改AppDelegate.swift:注意AppDelegate是集成自FlutterAppDelegate

import UIKit
import Flutter
import FlutterPluginRegistrant // Only if you have Flutter Plugins.

@UIApplicationMain
class AppDelegate: FlutterAppDelegate {
  var flutterEngine : FlutterEngine?;
  // Only if you have Flutter plugins.
  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    self.flutterEngine = FlutterEngine(name: "io.flutter", project: nil);
    self.flutterEngine?.run(withEntrypoint: nil);
    GeneratedPluginRegistrant.register(with: self.flutterEngine);
    return super.application(application, didFinishLaunchingWithOptions: launchOptions);
  }

}

修改Controller代码

import UIKit
import Flutter
class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
    let button = UIButton(type:UIButtonType.custom)
    ...
    self.view.addSubview(button)
  }

  @objc func handleButtonAction() {
    let flutterEngine = (UIApplication.shared.delegate as? AppDelegate)?.flutterEngine;
    let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)!;
    self.present(flutterViewController, animated: true, completion: nil)
  }
  1. RUN….

3.iOS项目集成过程梳理

整个的集成过程其实总得来说是如下三个步骤：

1.将flutter项目放入原生项目的文件夹下

2.在podfile中添加podhelper.rb配置

3.在Xcode的build phases添加"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh"iOS编译脚本。

其中podhelper.rb文件位于我们flutter模块项目的.ios/Flutter/podhelper.rb下，大家查看它的源码可以发现，它有下面几个作用：

1.把Flutter（flutterEngine）和FlutterPluginRegistrant两个库用pod给原生项目导入进入

2.如果flutter项目有用到flutter plugin插件，把插件用pod导入

3.导入Generated.xcconfig的相关配置信息，在podhelper.rb同级别的目录下还有一个Generated.xcconfig文件，这个文件在使用flutter create xx、flutter run xxx、flutter packages get命令的时候如果该文件不存在则会生成这个文件。这个文件内容如下：

// This is a generated file; do not edit or check into version control.
FLUTTER_ROOT=/Users/zhiqiangdeng/.flutter_wrapper/1.2.2-pre.43
FLUTTER_APPLICATION_PATH=/Users/zhiqiangdeng/Documents/ProjectSource/XcodeProject/lianhua-order-iOS/order-check-module-flutter
FLUTTER_TARGET=lib/main.dart
FLUTTER_BUILD_DIR=build
SYMROOT=${SOURCE_ROOT}/../build/ios
FLUTTER_BUILD_NAME=1.0.0
FLUTTER_BUILD_NUMBER=1

他记录了当前flutter sdk的目录位置，以及版本号，还有项目模块的目录位置。这个文件的内容在执行pod install的时候会被写入到xcode build setting中，在执行完pod install之后，可以在原生项目根目录使用xcodebuild -showBuildSettings|grep flutter 查看相关的信息。

 

最后一步就是运行程序，运行程序的时候在Build phase添加了xcode_backend.sh该脚本会使用到上面pod install给xcode build setting设置的那些环境变量，然后找到项目目录生成AppFramework。

4.给原生Android项目集成Flutter

Android的文章很多，这里不再详细描述了

1.在原生Android项目中添加子模块，将上面创建的flutter module项目拉取到原生安卓项目中

git submodule add {你的flutter module的仓库地址}
git submodule update

2.在根目录的settings.gradle中添加如下配置

 

setBinding(new Binding([gradle: this]))                                 
evaluate(new File(                                                                 
  '{xxxxx你的flutter module目录}/.android/include_flutter.groovy'                    
))

3.在原生项目的app目录下的build.gradle文件中添加Flutter库的依赖

 

dependencies {
  implementation project(':flutter')
}

4.在原生代码中集成flutter跳转到flutter页面

我使用了一个新的Activity进行跳转。具体可以参看源码

 

Button open = findViewById(R.id.openBtn);
open.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent = new Intent();
        intent.setClass(MainActivity.this, MyFlutterActivity.class);
        startActivity(intent);
    }
});

 

public class MyFlutterActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flutter);
        final FlutterView flutterView = Flutter.createView(
                this,
                getLifecycle(),
                "route1"
        );
        final FrameLayout layout = findViewById(R.id.flutter_container);
        layout.addView(flutterView);
        final FlutterView.FirstFrameListener[] listeners = new FlutterView.FirstFrameListener[1];
        listeners[0] = new FlutterView.FirstFrameListener() {
            @Override
            public void onFirstFrame() {
                layout.setVisibility(View.VISIBLE);
            }
        };
        flutterView.addFirstFrameListener(listeners[0]);
    }
}

Android从原生跳到Flutter模块的黑屏问题，在网上看到很多说设置透明主题的但是没有用，后来看到一种先隐藏显示，等待渲染好第一帧后才显示flutter页面的方法。这里要注意一点要在布局中先把flutter的Container布局设置为InVisible状态，不要使用Gone，用gone的话是不显示也不渲染，用InVisible不显示但是会渲染界面占位置，等待渲染完成后再设置为Visible即可。

项目demo我已经传到github中：有遇到问题的可以参考项目源码

5.flutter的版本管理

在我们的开发过程中遇到了一个问题，就是各个开发者使用的flutter sdk版本不一致，导致一些库无法运行，在网上也遇到有相同问题的人，提出了模仿gradle wrapper来做一个flutter_wrapper的思路。于是我根据自己的需要写了一个flutter_wrapper的小工具。它的主要作用是统一开发人员的本地flutter环境。

项目仓库地址：https://github.com/zakiso/flutterw.git

使用说明

  1. 在你的项目根目录中执行命令下载脚本
    curl -O https://raw.githubusercontent.com/zakiso/flutterw/master/flutterw && chmod 755 flutterw
  2. 下载好脚本后在根目录中使用
    ./flutterw init
    该命令会收集你当前系统中的flutter版本，并将相关信息写入flutter_wrapper.properties文件中，团队中所有成员都会以该版本号做为该项目的标准版本
  3. 将flutterw文件和flutter_wrapper.properties文件添加到git中提交到仓库里
  4. 其他成员拉取代码后在项目中使用flutter命令的地方使用./flutterw代替，如果使用ide请选择home目录下对应版本的sdk包

flutterw做了什么？

  1. 使用flutterw的时候会获取当前目录下的flutter_wrapper.properties文件中的版本号
  2. 去用户的${HOME}/flutter_wrapper/{版本号}/ 目录下查找是否有该版本sdk
  3. 如果没有该版本sdk会下载下来，然后使用该目录下的sdk执行命令

注意事项

如果flutter版本是preview的版本是直接使用master的最新代码来管理的。大家可以查看源码很简单，根据自己的需要定制。

最后：

这是整个项目用来开发的示意图：

 

 

我们整个项目都是使用git进行管理的，虽然每个开发者都需要安装flutter环境，但是对于小团队来说成本并不高，加上flutter_wrapper也保证了版本的一致性。iOS开发者可以在原来的iOS项目中开发flutter的项目，Android开发者可以在原android项目中开发flutter，flutter开发者也可以自己单独开发flutter项目，这种方式其实对于开发者来说也是很方便的。

.︶ㄣ☆.'龍
关注
专栏目录
在原生项目中集成Flutter
xiangzhihong8的专栏
09-04 1807
https://flutter.dev/docs/development/add-to-app/android/project-setup
Flutter混合开发
xiangzhihong8的专栏
01-21 2868
混合开发简介 使用Flutter从零开始开发App是一件轻松惬意的事情，但对于一些成熟的产品来说，完全摒弃原有App的历史沉淀，全面转向Flutter是不现实的。因此使用Flutter去统一Android、iOS技术栈，把它作为已有原生App的扩展能力，通过有序推进来提升移动终端的开发效率。 目前，想要在已有的原生App里嵌入一些Flutter页面主要有两种方案。一种是将原生工程作为Flutter...
打造一个完整的Flutter-APP项目！
最新发布
2401_86637624的博客
09-11 885
/ 两种单例请求方式.//示例//示例});//解析示例= null) {// 网络请求日志ScreenUtil 新增屏幕适配，不依赖context//如果设计稿尺寸与默认配置一致，无需该设置。配置设计稿尺寸 默认 360.0 / 640.0 / 3.0//返回根据屏幕宽适配后尺寸（单位 dp or pt）//返回根据屏幕高适配后尺寸（单位 dp or pt）
Flutter 混合开发、与原生交互、在原生中嵌入flutter模块
qq_27909209的博客
07-22 3197
f
2024年Android最全Flutter混合开发(一)：Android项目集成Flutter模块详细指南，2024年最新年末阿里百度等大厂技术面试题汇总
2401_84545908的博客
05-04 998
下面是有几位Android行业大佬对应上方技术点整理的一些进阶资料。希望能够帮助到大家提升技术高级UI，自定义ViewUI这块知识是现今使用者最多的。当年火爆一时的Android入门培训，学会这小块知识就能随便找到不错的工作了。不过很显然现在远远不够了，拒绝无休止的CV,亲自去项目实战，读源码，研究原理吧！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！
Flutter混合开发(一)：Android项目集成Flutter模块详细指南
2301_82241819的博客
05-06 885
最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识，这里放上相关的我搜集整理的14套腾讯、字节跳动、阿里、百度等2021最新面试真题解析，我把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包知识脉络 + 诸多细节。网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门，即可获取！
Flutter混合开发(二)：iOS项目集成Flutter模块详细指南
weixin_43901866的博客
12-26 994
前言 前一篇文章讲解了Android原生工程如何集成Flutter项目的具体过程，Flutter混合开发(一)：Android项目集成Flutter模块详细指南 ,本篇将带着大家来一起学习原生iOS项目如何集成Flutter。 因为每个版本的集成逻辑都是有差别的，所以这里交代下本篇文章的集成版本: Flutter （channel dev，v1.10.16） dart （v2.7.0） Xcod...
Flutter 混合开发
唐僧的专栏
11-18 3953
Flutter 混合开发
构建属于自己的Flutter混合开发框架
01-03
所谓混合开发，指的是 App 的整体架构以原生技术栈为基础，将 Flutter 运行环境嵌入到原生 App 工程中，然后由原生开发人员为 Flutter 运行提供宿主容器及基础能力支撑，而 Flutter 开发人员则负责应用层业务及 App 内大部分渲染工作。 在这种开发模式下，好处十分明显。对于工程师而言，跨平台的 Flutter 框架减少了对底层环境的依赖，使用完整的技术栈和工具链隔离了各个终端系统的差异，无论是 Android、iOS 甚至是前端工程师，都可以使用统一而标准化的能力进行业务开发，从而扩充了技能栈。而对于企业而言，这种方式不仅具备了原生 App 良好的用户体验，以及丰富的底
Flutter —— 混合开发
LinShunIos的博客
11-29 827
Flutter —— 混合开发1. 混合开发2. 混合开发操作第三方库 imagePicker 1. 混合开发 混合开发分两种情况 Flutter 项目调用原生功能 原生的项目嵌入Flutter（比较重，不建议） 2. 混合开发操作 回到之前的仿微信的我的界面来做一个点击头像通过相册更换图片的功能。 在之前的现实头像的地方添加一个GestureDetector，并且添加onTap方法。 Flutter里面和原生通讯用的是Flutter专门提供的MethodChannel。 这里声明一个_method
轻松玩转Flutter混合开发
乂星人
10-24 1546
Flutter自推出以来备受欢迎，国内最先引入使用的是闲鱼团队的闲鱼App。好多同学都知道Flutter是一套跨平台UI框架，最常见的运用则是一套代码同时可以编译出Android、iOS、H5等多种形式，但是实际开发中一般只有新项目我们才会用flutter进行直接编译打包，针对老项目谁都也不愿意完全推翻再用flutter重新写一遍，更多的是采用混合开发模式，即将flutter的产物嵌入到Android或者iOS项目中一同编译。本文我就总结一下Flutter混合开发的那些事。 方案选择 目前flutter混
Flutter与Android混合开发
u013297881的专栏
02-29 340
1.最先看的，大神写的很好，简单易懂， https://kevinwu.cn/p/964c6c3/#%E6%96%B0%E5%BB%BAFlutter-Module 2.后来查的资料，大哥写的也很好，里面提到了几个坑， https://blog.csdn.net/Android_SE/article/details/92654464 个人记录 Android项目 和fluttermodu...
Flutter混合开发，热修复（Android端）
迷路啦的博客
05-10 2128
热修复，目前只支持 Android 端的热修复。 纯Flutter代码，Google已经是支持热修复了，flutter.jar 里面也有相关的逻辑代码。利用的是微软的 CodePush。 Flutter 页面显示到 Android 端，实际就是用的 FlutterView 填充到 Activity或者 Fragment上的。 public static FlutterView createVie...
Flutter学习之混合开发
yong_19930826的博客
01-06 3117
Flutter学习之混合开发1. 调用原生功能1.1 Camera（已有三方插件支持直接调用）1.1.1 添加依赖1.1.2 平台配置1.1.3 代码实现1.2 电池信息（没有三方插件支持，需要编写原生代码）1.2.1 平台通过介绍1.2.2 创建测试项目1.2.3 编写Dart代码1.2.4 编写IOS平台代码1.2.4.1 swift代码实现1.2.4.2 Objective-C代码实现1.2.5 编写Android代码1.2.5.1 kotlin 实现代码1.2.5.2 java实现代码2. 嵌入原有
在Android原生工程中集成Flutter
smile_shaco的博客
04-27 923
# 在Android原生工程中集成Flutter #第一步 创建Flutter工程 在Android工程根目录的上一级目录创建Flutter工程，保证Flutter工程与Android工程在同一级。 cd Android工程根目录的上一级 创建Flutter工程：flutter create -t module flutter工程名 C:\Damon\flutter\lsn16\Flut...
Android 原生项目集成 Flutter
2301_82241859的博客
04-03 1010
感觉现在好多人都在说什么安卓快凉了，工作越来越难找了。又是说什么程序员中年危机啥的，为啥我这年近30的老农根本没有这种感觉，反倒觉得那些贩卖焦虑的都是瞎j8扯谈。当然，职业危机意识确实是要有的，但根本没到那种草木皆兵的地步好吗？Android凉了都是弱者的借口和说辞。虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。
Flutter混合开发：三端分离模式详解
因此，开发者通常会选择在原生App中嵌入Flutter组件，逐步迁移部分模块，以提高开发效率。 1. 统一管理模式： 在此模式下，原生工程成为Flutter工程的子工程，由Flutter进行统一管理和协调。这种方法在早期Flutter...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值