原生App项目集成flutter混合开发详细指南
记得去年9月份的时候谷歌在上海有一次开发者大会，去参加的时候关注到了flutter，随后没过多久就发布了1.0版本。18年末的时候用flutter作了个小项目，发现flutter确实挺好用的。因而尝试在公司找个小项目上马，进行混合开发试试。java
方案选择
目前主流的混合开发方案有两种集成方式：android
源码集成： 也就是谷歌官方提供的方案[github.com/flutter/flu…]ios
产物集成： Flutter项目单独开发，开发完成后发布成aar包或者iOS的framework形式，原生项目依赖flutter输出的制品便可。具体能够参考闲鱼的文章git
两种方式各有优劣，其实产物集成更好一些，不过即便是进行产物集成，也须要弄懂源码集成的方式，由于当有不少和原生交互的功能进行开发的时候，源码集成的方式能够直接调试会方便不少。github
根据目前咱们的状况：shell
1.参与人员都要进行flutter开发、swift
2.持续发布和构建我能够修改控制xcode
咱们如今这个项目选择了源码集成的方式。ruby
为原生项目集成flutter
整个的集成方案是参考谷歌方法：[github.com/flutter/flu…]，可是有一些不同，我是建立了一个flutter项目后，在原生的项目中使用git submodule的形式进行管理的。bash
1.建立flutter module project
咱们假定已经有了原生的项目Native-iOS和Native-Android；如今咱们须要建立咱们的flutter项目。
-
把咱们的flutter的channel切换到master(master分支下是flutter的preview版本)
flutter channel master -
建立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目录的。 -
把该项目使用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
复制代码
上面的内容作一些更正，不须要编辑.gitignore文件使用自动生成的便可。.android和.ios目录在每次执行flutter packages get命令会自动生成（团队其余成员拉取代码后没有.android和.ios执行一下flutter packages get便可）
-
提交你的flutter模块项目到你的git服务器(我提交到github上了[github.com/zakiso/flut…]你们能够参考)
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)
}
复制代码
- 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]);
}
}
复制代码
5.团队中其余同事协同开发
- 拉取项目源码
git clone xxxxx{项目地址} - 初始化项目中的子模块
git submodule init && git submodule update - 执行
flutter packages get(有时候可能出现没法运行能够进入.ios和.android中分别执行pod install 和 gradle assembleDebug,或者flutter build ios,flutter build apk等命令构建一次) - Run...
Android从原生跳到Flutter模块的黑屏问题，在网上看到不少说设置透明主题的可是没有用，后来看到一种先隐藏显示，等待渲染好第一帧后才显示flutter页面的方法。这里要注意一点要在布局中先把flutter的Container布局设置为InVisible状态，不要使用Gone，用gone的话是不显示也不渲染，用InVisible不显示可是会渲染界面占位置，等待渲染完成后再设置为Visible便可。
6.flutter的版本管理
在咱们的开发过程当中遇到了一个问题，就是各个开发者使用的flutter sdk版本不一致，致使一些库没法运行，在网上也遇到有相同问题的人，提出了模仿gradle wrapper来作一个flutter_wrapper的思路。因而我根据本身的须要写了一个flutter_wrapper的小工具。它的主要做用是统一开发人员的本地flutter环境。
使用说明
- 在你的项目根目录中执行命令下载脚本
curl -O https://raw.githubusercontent.com/zakiso/flutterw/master/flutterw && chmod 755 flutterw - 下载好脚本后在根目录中使用
./flutterw init
该命令会收集你当前系统中的flutter版本，并将相关信息写入flutter_wrapper.properties文件中，团队中全部成员都会以该版本号作为该项目的标准版本 - 将flutterw文件和flutter_wrapper.properties文件添加到git中提交到仓库里
- 其余成员拉取代码后在项目中使用
flutter命令的地方使用./flutterw代替，若是使用ide请选择home目录下对应版本的sdk包
flutterw作了什么？
- 使用flutterw的时候会获取当前目录下的flutter_wrapper.properties文件中的版本号
- 去用户的
${HOME}/flutter_wrapper/{版本号}/目录下查找是否有该版本sdk - 若是没有该版本sdk会下载下来，而后使用该目录下的sdk执行命令
注意事项
若是flutter版本是preview的版本是直接使用master的最新代码来管理的。你们能够查看源码很简单，根据本身的须要定制。
项目demo我已经传到github中：有遇到问题的能够参考项目源码
-
原生Android集成Flutter项目：
-
原生iOS集成Flutter项目：
-
Flutter模块项目：
-
Flutter_Wrapper:
最后：
Everything 用flutter开发的一款App，把记帐本日记本，行程，待办等等都装进一个App里
everythings.app/
- 1. Android原生项目集成flutter项目混合开发详解
- 2. Flutter混合开发(二)：iOS项目集成Flutter模块详细指南
- 3. Flutter混合开发(一)：Android项目集成Flutter模块详细指南
- 4. 原生Android集成Flutter混合开发
- 5. Flutter 混合开发(集成到原生 iOS 项目)
- 6. Flutter和原生App混合开发
- 7. Flutter原生混合开发
- 8. Flutter混合开发(三)：Android与Flutter之间通讯详细指南
- 9. iOS混合开发之uni-app本地打包集成到iOS原生项目
- 10. 22.原生项目和Flutter的混合开发(三)
- 更多相关文章...
- • SQL 指南 - 网站建设指南
- • HTML 指南 - 网站建设指南
- • PHP开发工具
- • ☆技术问答集锦（13）Java Instrument原理
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 融合阿里云，牛客助您找到心仪好工作
- 2. 解决jdbc(jdbctemplate)在测试类时不报错在TomCatb部署后报错
- 3. 解决PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE无法输入中文
- 4. vue+ant design中关于图片请求不显示的问题。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解决IDEA用Maven创建的Web工程不能创建Java Class文件的问题
- 7. [已解决] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea让java文件夹正常使用
- 9. Eclipse启动提示“subversive connector discovery”
- 10. 帅某-技巧-快速转帖博主文章（article_content）
- 1. Android原生项目集成flutter项目混合开发详解
- 2. Flutter混合开发(二)：iOS项目集成Flutter模块详细指南
- 3. Flutter混合开发(一)：Android项目集成Flutter模块详细指南
- 4. 原生Android集成Flutter混合开发
- 5. Flutter 混合开发(集成到原生 iOS 项目)
- 6. Flutter和原生App混合开发
- 7. Flutter原生混合开发
- 8. Flutter混合开发(三)：Android与Flutter之间通讯详细指南
- 9. iOS混合开发之uni-app本地打包集成到iOS原生项目
- 10. 22.原生项目和Flutter的混合开发(三)