神级大牛教你如何“玩转”Flutter和原生App混合开发,没有这么难

2023-08-23 0 948

序言

18月底的这时候用flutter做了个小工程项目,辨认出flutter的确挺好用的。只好试著在子公司找个小工程项目下马,展开混和合作开发试一试。

计划优先选择

现阶段非主流的混和合作开发计划有三种软件系统方式:

源代码软件系统

也是Google非官方提供更多的计划,工程项目门牌号如下表所示右图:

https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps

乙醛软件系统

Flutter工程项目原则上合作开发,开发顺利完成后正式发布成aar包或是iOS的framework方式,原生植物工程项目倚赖flutter输入的纺织品方可。具体内容能参照eBay的该文。

神级大牛教你如何“玩转”Flutter和原生App混合开发,没有这么难

三种方式各有好坏,只但乙醛软件系统更快许多,但即便是展开乙醛软件系统,也须要搞清楚源码软件系统的方式,即使布季谢许多和原生植物可视化的机能展开合作开发的这时候,源代码软件系统的方式能间接增容会方便快捷许多。

依照现阶段他们的情形:

参予相关人员都要展开flutter合作开发稳步正式发布和构筑我能修正掌控

他们那时那个工程Kozhikode了源代码软件系统的方式。

为原生植物工程项目软件系统flutter

整座的软件系统计划是参照Google方式,但有许多不那样,我是建立了两个flutter工程项目后,在原生植物的工程项目中采用git submodule的方式展开管理工作的。

建立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 projectflutter_module…   flutter_module/test/widget_test.dart (created)   …   …   flutter_module/.idea/workspace.xml (created) Running“flutter packages get” in flutter_module…                 7.2s Wrote12 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

提交你的flutter模块工程项目到你的git服务器(我提交到github上了,大家能参照)

git remote add origin {你的flutter module的仓库门牌号} git push origin master给iOS工程项目软件系统flutter

进入他们原生植物的iOS工程项目根目录中,为它添加两个git submodule,把他们的flutter工程项目拉取下来

git submodule add {你的flutter module的仓库门牌号}git submodule update

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

platform :ios8.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, .iosFlutterpodhelper.rb)), binding)

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

添加编译脚本,打开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
神级大牛教你如何“玩转”Flutter和原生App混合开发,没有这么难

工程项目的配置顺利完成那时须要生成许多配置文件

进入原生植物工程项目的flutter模块目录中执行flutter packages get命令回到原生植物工程项目根目录执行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) ✗ podinstallAnalyzing dependencies Fetching podspecfor `Flutter` from `./flutter-module-demo/.ios/Flutter/engine`Fetching podspecfor `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 projectSending stats Pod installationcomplete! There are 3 dependencies from the Podfile and 3 total pods installed.

到此为止他们的原生植物工程项目就早已软件系统好了flutter工程项目了。

在原生植物工程项目中采用flutter,下面以swift工程项目为例

修正AppDelegate.swift:注意AppDelegate是软件系统自FlutterAppDelegate

import UIKit import Flutter import FlutterPluginRegistrant // Only if you have Flutter Plugins. @UIApplicationMain class AppDelegateFlutterAppDelegate {   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 ViewControllerUIViewController {   override func viewDidLoad() {     super.viewDidLoad()     let button = UIButton(type:UIButtonType.custom)     …self.view.addSubview(button)   }   @objc func handleButtonAction() {     let flutterEngine = (UIApplication.shared.delegateasAppDelegate)?.flutterEngine;     let flutterViewController = FlutterViewController(engine: flutterEngine, nibName:nil, bundle: nil)!;     self.present(flutterViewController, animated: true, completion:nil)   }

RUN….

iOS工程项目软件系统过程梳理

整座的软件系统过程只但总的来说是如下表所示三个步骤:

将flutter工程项目放入原生植物工程项目的文件夹下在podfile中添加podhelper.rb配置在Xcode的build phases添加”$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh”iOS编译脚本

其中podhelper.rb文件位于他们flutter模块工程项目的.ios/Flutter/podhelper.rb下,大家查看它的源代码能辨认出,它有下面几个作用:

把Flutter(flutterEngine)和FlutterPluginRegistrant两个库用pod给原生植物工程项目导入进入如果flutter工程项目有用到flutter plugin插件,把插件用pod导入导入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 versioncontrol. FLUTTER_ROOT=/Users/zhiqiangdeng/.flutter_wrapper/1.2.2-pre.43 FLUTTER_APPLICATION_PATH=/Users/zhiqiangdeng/Documents/ProjectSource/XcodeProject/lianhua-order-iOS/ordercheckmodule-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 查看相关的信息。

神级大牛教你如何“玩转”Flutter和原生App混合开发,没有这么难

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

给原生植物Android工程项目软件系统Flutter

Android的该文许多,这里不再详细描述了

在原生植物Android工程项目中添加子模块,将上面建立的flutter module工程项目拉取到原生植物安卓工程项目中

git submodule add {你的flutter module的仓库门牌号} git submodule update

在根目录的settings.gradle中添加如下表所示配置

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

在原生植物工程项目的app目录下的build.gradle文件中添加Flutter库的倚赖

dependencies {   implementation project(:flutter) }     

在原生植物代码中软件系统flutter跳转到flutter页面

我采用了两个新的Activity进行跳转。具体内容能参看源代码

Button open = findViewById(R.id.openBtn); open.setOnClickListener(newView.OnClickListener() {@Override     public void onClick(View v) {         Intent intent = newIntent();         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”         );         finalFrameLayout 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方可。

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做了什么?

号}/ 目录下查找是否有该版本sdk如果没该版本sdk会下载下来,然后采用该目录下的sdk执行命令

注意事项

如果flutter版本是preview的版本是间接采用master的最新代码来管理工作的。大家可以查看源代码很简单,依照自己的须要定制。

学习进阶之路

如果你正在寻找 Flutter 的学习资源,我这里在免费提供更多了许多 Flutter 的入门——进阶的学习资料,有须要的小伙伴能私信我【 Flutter】,我分享给你,希望大家都能抓住这次机会,提升自己技能,升职加薪。

Flutter系统核心进阶资料(对应思维导图)
神级大牛教你如何“玩转”Flutter和原生App混合开发,没有这么难
Flutter学习导图
神级大牛教你如何“玩转”Flutter和原生App混合开发,没有这么难
Flutter系统学习视频
神级大牛教你如何“玩转”Flutter和原生App混合开发,没有这么难

总结

神级大牛教你如何“玩转”Flutter和原生App混合开发,没有这么难

他们整座工程项目都是采用git展开管理工作的,虽然每个合作开发者都须要安装flutter环境,但对于小团队来说成本并不高,加上flutter_wrapper也保证了版本的一致性。iOS合作开发者能在原来的iOS工程项目中合作开发flutter的工程项目,Android合作开发者能在原android工程项目中合作开发flutter,flutter合作开发者也能自己原则上合作开发flutter工程项目,这种方式只但对于合作开发者来说也是很方便快捷的。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务