序言
18月底的这时候用flutter做了个小工程项目，辨认出flutter的确挺好用的。只好试著在子公司找个小工程项目下马，展开混和合作开发试一试。
计划优先选择
现阶段非主流的混和合作开发计划有三种软件系统方式：
源代码软件系统也是Google非官方提供更多的计划，工程项目门牌号如下表所示右图：
https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps
乙醛软件系统Flutter工程项目原则上合作开发，开发顺利完成后正式发布成aar包或是iOS的framework方式，原生植物工程项目倚赖flutter输入的纺织品方可。具体内容能参照eBay的该文。
三种方式各有好坏，只但乙醛软件系统更快许多，但即便是展开乙醛软件系统，也须要搞清楚源码软件系统的方式，即使布季谢许多和原生植物可视化的机能展开合作开发的这时候，源代码软件系统的方式能间接增容会方便快捷许多。
依照现阶段他们的情形：
参予相关人员都要展开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 :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)打开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模块目录中执行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 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.delegateas? AppDelegate)?.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/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。
给原生植物Android工程项目软件系统FlutterAndroid的该文许多，这里不再详细描述了
在原生植物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系统核心进阶资料（对应思维导图）总结
他们整座工程项目都是采用git展开管理工作的，虽然每个合作开发者都须要安装flutter环境，但对于小团队来说成本并不高，加上flutter_wrapper也保证了版本的一致性。iOS合作开发者能在原来的iOS工程项目中合作开发flutter的工程项目，Android合作开发者能在原android工程项目中合作开发flutter，flutter合作开发者也能自己原则上合作开发flutter工程项目，这种方式只但对于合作开发者来说也是很方便快捷的。
