Flutter原生混合开发 - 网站源码_资源分享

混和合作开发概要

采用Flutter从头开始合作开发App是一件随心所欲悠闲的事情，但对许多成形的产品而言，完全摈弃旧有App的历史结晶，全面转为Flutter是不现实生活的。因此采用Flutter去标准化Android、iOS技术栈，把它做为已近原生植物App的扩充能力，通过科学规范推进来提升终端终端产品的合作开发工作效率。目前，想在已近的原生植物App里内嵌许多Flutter网页主要就有两种计划。一类是将原生植物工程建设做为Flutter工程的子工程建设，由Flutter展开标准化管理工作，此种商业模式称作标准化管理工作商业模式。另一类是将Flutter工程建设做为原生植物工程建设的子模块，维持旧有的原生植物工程建设管理工作形式维持不变，此种商业模式被称作埃库谢分立商业模式。

在Flutter架构出现早期，由于非官方提供更多的T2390形式以及资料有限，国内较早采用Flutter展开混和合作开发的项目组多半采用的是标准化管理工作商业模式。但是，随着业务插值的深入细致，标准化管理工作商业模式的弊病也骤然显露出，不仅埃库谢（Android、iOS和Flutter）标识符谐振严重，相关工具链费时也骤然大幅增长，最后导致合作开发工作效率减少。所以，先期采用Flutter展开混和合作开发的项目组多半采用埃库谢标识符分立的商业模式来展开倚赖环境治理，最后同时实现Flutter工程建设的轻量网络连接。除了能轻量网络连接外，埃库谢标识符分立商业模式还能把Flutter模块做为原生植物工程建设的子模块，从而快速地网络连接Flutter模块，减少原生植物工程建设的改建成本。在完成对Flutter模块的网络连接后，Flutter工程建设能采用Android Studio展开合作开发，无须再打开原生植物工程建设就能对Dart标识符和原生植物标识符展开合作开发增容。采用埃库谢分立商业模式展开Flutter混和合作开发的关键性是释放出来Flutter工程建设，将不同网络平台的构筑乙醛依标准模块化的形式展开管理工作，即Android采用aar、iOS采用pod。换句话说，Flutter的T2390计划其实就是将Flutter模块装箱成aar或者pod库，接着在原生植物工程建设像引用其他服务器端原生植物模块库那样导入Flutter模块方可。

Flutter模块

预设情况下，新建立的Flutter工程建设会包涵Flutter产品目录和原生植物工程建设的产品目录。在此种情况下，原生植物工程建设会倚赖Flutter工程建设的库和资源，并且无法瓦解Flutter工程建设独立构筑和运行。在混和合作开发中，原生植物工程建设对Flutter的倚赖主要就分为两部分。两个是Flutter的库和发动机，主要就包涵Flutter的Framework 库和引擎库；另两个是Flutter模块工程建设，即Flutter混和合作开发中的Flutter模块，主要就包括Flutter工程建设lib产品目录下的Dart标识符同时实现。对原生植物工程建设而言，软件系统Flutter只须要在同价位目录建立两个Flutter模块，接着构筑iOS和Android各自的Flutter倚赖库方可。接下去，我们只须要在原生植物项目的同价位产品目录下，执行Flutter提供更多的构筑模块命令建立Flutter模块方可，如下右图。

flutter create -t module flutter_library

其中，flutter_library为Flutter模块名。执行上面的命令后，会在原生植物工程建设的同价位产品目录下生成两个flutter_library模块工程建设。Flutter模块也是Flutter工程建设，采用Android Studio打开它，其产品目录如下表所示图右图。

能看到，和普通的Flutter工程建设相比，Flutter模块工程也内嵌了Android工程建设和iOS工程建设，只不过预设情况下，Android工程建设和iOS工程建设是隐藏的。因此，对Flutter模块工程建设而言，也能像普通工程建设一样采用 Android Studio展开合作开发和增容。同时，相比普通的Flutter工程建设，Flutter模块工程建设的Android工程建设产品目录下多了两个Flutter产品目录，此产品目录下的build.gradle配置就是我们构筑aar时的装箱配置。同样，在Flutter模块工程建设的iOS工程建设产品目录下也会找到两个Flutter产品目录，这也是Flutter模块工程建设既能像Flutter普通工程建设一样采用Android Studio展开合作开发增容，又能装箱构筑aar或pod的原因。

Android软件系统Flutter

在原生植物Android工程建设中软件系统Flutter，原生植物工程建设对Flutter的倚赖主要就包括两部分，分别是Flutter库和发动机，以及Flutter工程建设构筑乙醛。 – Flutter库和发动机：包涵icudtl.dat、libFlutter.so以及许多class文件，最后这些文件都会被封装到Flutter.jar中。 – Flutter工程建设乙醛：包括应用程序数据段 isolate_snapshot_data、应用程序指令段 isolate_snapshot_instr、虚拟机数据段vm_snapshot_data、虚拟机指令段vm_snapshot_instr以及资源文件flutter_assets。

和原生植物Android工程建设软件系统其他插件库的形式一样，在原生植物Android工程建设中导入Flutter模块须要先在settings.gradle中添加如下表所示标识符。

setBinding(new Binding([gradle: this])) evaluate(new File( settingsDir.parentFile, flutter_library/.android/include_flutter.groovy))

其中，flutter_library为我们建立的Flutter模块。接着，在原生植物Android工程建设的app产品目录的build.gradle文件中添加如下表所示倚赖。

dependencies { implementation project(“:flutter”) }

然后编译并运行原生植物Android工程建设，如果没有任何错误则说明软件系统Flutter模块成功。须要说明的是，由于Flutter支持的最低版本为16，所以须要将Android项目的minSdkVersion修改为16。如果出现“程序包android.support.annotation不存在”的错误，须要采用如下表所示的命令来建立Flutter模块，因为最新版本的Android预设采用androidx来管理工作包。

flutter create –androidx -t module flutter_library

对Android原生植物工程建设，如果还没有升级到androidx，能在原生植物Android工程建设上右键，接着依次选择【Refactor】→【Migrate to Androidx】将Android工程建设升级到androidx包管理工作。在原生植物Android工程建设中成功添加Flutter模块倚赖后，打开原生植物Android工程建设，并在应用的入口MainActivity文件中添加如下表所示标识符。

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); View flutterView = Flutter.createView(this, getLifecycle(), “route1”); FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); addContentView(flutterView, layoutParams); } }

通过Flutter提供更多的createView()方法，能将Flutter网页构筑成Android能够识别的视图，接着将这个视图采用Android提供更多的addContentView()方法添加到父窗口方可。重新运行原生植物Android工程建设，最后效果如下表所示图右图。

如果原生植物Android的MainActivity加载的是两个FrameLayout，那么加载只须要将Flutter网页构筑成两个Fragment方可，如下表所示右图。

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); FragmentTransaction ft= getSupportFragmentManager().beginTransaction(); ft.replace(R.id.fragment_container, Flutter.createFragment(“Hello Flutter”)); ft.commit(); } }

除了采用Flutter模块形式软件系统外，还能将Flutter模块装箱成aar，接着再添加倚赖。在flutter_library根产品目录下执行aar装箱构筑命令方可抽取Flutter倚赖，如下表所示右图。

flutter build apk –debug

此命令的作用是将Flutter库和发动机以及工程建设乙醛编译成两个aar包，上面命令编译的aar包是debug版本，如果须要构筑release版本，只须要把命令中的debug换成release方可。装箱构筑的flutter-debug.aar位于.android/Flutter/build/outputs/aar/产品目录下，能把它拷贝到原生植物Android工程建设的app/libs产品目录下，接着在原生植物Android工程建设的app产品目录的装箱配置build.gradle中添加对它的倚赖，如下表所示右图。

dependencies { implementation(name: flutter-debug, ext: aar) }

然后重新编译一下项目，如果没有任何错误提示则说明Flutter模块被成功软件系统到Android原生植物工程建设中。

iOS软件系统Flutter

原生植物iOS工程建设对Flutter的倚赖包涵Flutter库和发动机，以及Flutter工程建设编译乙醛。其中，Flutter 库和发动机指的是Flutter.framework等，Flutter工程建设编译乙醛指的是 App.framework等。在原生植物iOS工程建设中软件系统Flutter需要先配置好CocoaPods，CocoaPods是iOS的类库管理工作工具，用来管理工作服务器端开源库。在原生植物iOS工程建设中执行pod init命令建立两个Podfile文件，接着在Podfile文件中添加Flutter模块倚赖，如下表所示右图。

flutter_application_path = ../flutter_ library/ load File.join(flutter_application_path, .ios, Flutter, podhelper.rb) target iOSDemo do # Comment the next line if you dont want to use dynamic frameworks use_frameworks! install_all_flutter_pods(flutter_application_path) # Pods for iOSDemo … //省略其他脚本 end

接着，关闭原生植物iOS工程建设，并在原生植物iOS工程建设的根产品目录执行pod install命令安装所需的倚赖包。安装完成后，采用Xcode打开iOSDemo.xcworkspace原生植物工程建设。预设情况下，Flutter是不支持Bitcode的，Bitcode是一类iOS编译程序的中间标识符，在原生植物iOS工程建设中软件系统Flutter须要禁用Bitcode。在Xcode中依次选择【TAGETS】→【Build Setttings】→【Build Options】→【Enable Bitcode】来禁用Bitcode，如下表所示图右图。

如果采用的是Flutter早期的版本，还须要添加build phase来支持构筑Dart标识符。依次选择【TAGGETS】→【Build Settings】→【Enable 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已经不须要再添加脚本了。重新运行原生植物iOS工程建设，如果没有任何错误则说明iOS成功软件系统Flutter模块。除了采用Flutter模块方式外，还能将Flutter模块装箱成能倚赖的动态库，接着再采用CocoaPods添加动态库。首先，在flutter_library根产品目录下执行装箱构筑命令生成framework动态库，如下表所示右图。

flutter build ios –debug

上面命令是将Flutter工程建设编译成Flutter.framework和App.framework动态库。如果要生成release版本，只须要把命令中的debug换成release方可。接着，在原生植物iOS工程建设的根产品目录下建立两个名为FlutterEngine的产品目录，并把生成的两个framework动态库文件拷贝进去。不过，iOS生成模块化乙醛要比Android多两个步骤，因为须要把Flutter工程建设编译生成的库手动封装成两个pod。首先，在flutter_ library该产品目录下建立FlutterEngine.podspec，接着添加如下表所示脚本标识符。

Pod::Spec.new do |s| s.name = FlutterEngine s.version = 0.1.0 s.summary = FlutterEngine s.description = <<-DESC TODO: Add long description of the pod here. DESC s.homepage = https://github.com/xx/FlutterEngine s.license = { :type => MIT, :file => LICENSE } s.author = { xzh => [email protected] } s.source = { :git => “”, :tag => “#{s.version}” } s.ios.deployment_target = 9.0 s.ios.vendored_frameworks = App.framework, Flutter.framework end

接着，执行pod lib lint命令方可拉取Flutter模块所需的模块。接下去，在原生植物iOS工程建设的Podfile文件添加生成的库方可。

target iOSDemo do pod FlutterEngine, :path => ./ end

重新执行pod install命令安装倚赖库，原生植物iOS工程建设软件系统Flutter模块就完成了。接下去，采用Xcode打开ViewController.m文件，接着添加如下表所示标识符。

#import “ViewController.h” #import <Flutter/Flutter.h> #import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> @interface ViewController () @end @implementation ViewController – (void)viewDidLoad { [super viewDidLoad]; UIButton *button = [[UIButton alloc]init]; [button setTitle:@”加载Flutter模块” forState:UIControlStateNormal]; button.backgroundColor=[UIColor redColor]; button.frame = CGRectMake(50, 50, 200, 100); [button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted]; [button addTarget:self action:@selector(buttonPrint) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:button]; } – (void)buttonPrint{ FlutterViewController * flutterVC = [[FlutterViewController alloc]init]; [flutterVC setInitialRoute:@”defaultRoute”]; [self presentViewController:flutterVC animated:true completion:nil]; } @end

在上面的标识符中，我们在原生植物iOS中建立了两个按钮，点击按钮时就会跳转到Flutter网页，最后效果如下表所示图右图。

预设情况下，Flutter为提供更多了两种调用形式，分别是FlutterViewController和FlutterEngine。对FlutterViewController而言，打开ViewController.m文件，在里面添加两个加载flutter网页的方法并且添加两个按钮看来调用。

Flutter模块增容

众所周知，Flutter的优势之一就是在合作开发过程中采用热重载功能来同时实现快速增容。预设情况下，在原生植物工程建设中软件系统Flutter模块后热重载功能是失效的，须要重新运行原生植物工程建设才能看到效果。如此一来，Flutter合作开发的热重载优势就失去了，并且合作开发工作效率也骤然减少。那么，能不能在混和项目中开启Flutter的热重载呢？答案是能的，只须要经过如下表所示步骤方可开启热重载功能。首先，关闭原生植物应用，此处所说的关闭是指关闭应用的进程，而不是简单的退出应用。在Flutter模块的根产品目录中输入flutter attach命令，接着再次打开原生植物应用，就会看到连接成功的提示，如下表所示图右图。

如果同时连接了多台设备，能采用flutter attach -d 命令来指定连接的设备。接下去，只须要按r键方可执行热重载，按R键方可执行热重启，按d键方可断开连接。在Flutter工程建设中，我们能直接点击debug按钮来展开标识符调试，但在混和项目中，直接点击debug按钮是不起作用的。此时，能采用Android Studio提供更多的flutter attach按钮来建立与flutter模块的连接，展开同时实现对flutter模块的标识符增容，如图下图右图。