Flutter混合開發(fā)

混合開發(fā)簡介

在Flutter框架出現(xiàn)早期，由于官方提供的混編方式以及資料有限，國內(nèi)較早使用Flutter進(jìn)行混合開發(fā)的團(tuán)隊(duì)大多使用的是統(tǒng)一管理模式。

顫振模塊

flutter create -t module flutter_library

Android集成Flutter

• Flutter庫和引擎：包含icudtl.dat，libFlutter.so以及一些類文件，最終這些文件都會被封裝到Flutter.jar中。
• Flutter工程材料：包括應(yīng)用程序數(shù)據(jù)段isolate_snapshot_data，應(yīng)用程序指令段isolate_snapshot_instr，虛擬機(jī)數(shù)據(jù)段vm_snapshot_data，虛擬機(jī)指令段vm_snapshot_instr以及資源文件flutter_assets。

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

dependencies {    implementation project(":flutter")}

flutter create --androidx -t module flutter_library

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);    }}

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 build apk --debug

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

iOS集成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 don't want to use dynamic frameworks  use_frameworks!  install_all_flutter_pods(flutter_application_path)
  # Pods for iOSDemo  … //省略其他腳本end '

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

flutter build ios --debug

Pod::Spec.new do |s|  s.name             = 'FlutterEngine'  s.version          = '0.1.0'  s.summary          = 'FlutterEngine'  s.description      = <<-DESCTODO: 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

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

#import "ViewController.h"#import #import 
@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

Flutter模塊調(diào)試

如果，同時連接了多臺設(shè)備，可以使用Flutter attach -d命令來指定連接的設(shè)備。接下來，只需要按r鍵即可執(zhí)行熱重載，按R鍵即可執(zhí)行熱重啟，按d鍵即可斷開連接。