/flutter_native

flutter和原生项目混合开发

Primary LanguageObjective-C

flutter_native

flutter和原生项目混合开发 现在Flutter属于试水阶段,要是想在商业app中使用Flutter,目前基本上是将Flutter的页面嵌入到目前先有的iOS或者安卓工程,目前讲混合开发的文章有很多:

Flutter新锐专家之路:混合开发篇

Flutter混合工程改造实践

Flutter混合工程开发探究

Now直播iOS Flutter混合工程实践

不过这些文章大多讲的是安卓和flutter混合开发的,或者单一的iOS和flutter的 试了一下Flutter混合开发,有一些坑,总结给大家

目的

既然用Flutter混合开发,那肯定是希望写一套代码,安卓iOS都能无负担运行,所以在开发的时候,需要满足如下需求:

  • Flutter、iOS、安卓工程的目录在同一级,互相之前平级、无嵌套
  • 开发iOS的时候,不用操心Flutter部分,只用xcode点击运行就可以(即修改编译iOS项目时,使用编译好的Flutter产物)
  • 开发Flutter的时候,不用操心iOS部分,只用android studio点击运行就可以
  • 支持模拟器和真机

混合开发最权威的指南当然是flutter自己的wiki

iOS端集成

1.第一步:新建目录,新建flutter项目

新建目录: 把iOS,安卓项目放进去.然后创建flutter_module flutter create -t module xxx 目录结构: flutter: imagepng iOS: imagepng 安卓: imagepng

1.pod集成

_## ==============Flutter ==============_

_## Flutter 模块的路径 pod update --verbose --no-repo-update_

_##绝对路径_

flutter_application_path = '/Users/lishunfeng/Desktop/flutter_ios/Flutter_module'

eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

_## ==============Flutter ==============_

pod install即可 imagepng

3.add 脚本

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

imagepng

4.跳转页面 或者 设置根页面

关键代码:

FlutterViewController* flutterViewController = [[FlutterViewController alloc] initWithProject:**nil** nibName:**nil** bundle:**nil**];

self.window.rootViewController = flutterViewController;

imagepng

imagepng

5.运行项目即可

imagepng

Andorid端集成

1.在settings.gradle添加代码

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

imagepng

2.在app里build..gradle

compileOptions {
  sourceCompatibility = '1.8'
  targetCompatibility = '1.8'
}

dependencies {
  implementation project(':flutter')
}

imagepng

3.跳转到flutter页面

1.第一种: 布局:

xml version="1.0" encoding="utf-8"?>

RelativeLayout>

</LinearLayout>

imagepng

代码:


package com.example.fndroid;

import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.widget.RelativeLayout;

import io.flutter.facade.Flutter; import io.flutter.view.FlutterView;

public class MainActivity extends AppCompatActivity {

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); RelativeLayout rl = findViewById(R.id.rl_root_view); findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { startActivity(new Intent(MainActivity.this,HomeActivity.class)); } }); View flutterView = Flutter.createView(MainActivity.this, getLifecycle(), "route1"); rl.addView(flutterView);

} }

imagepng

imagepng

第二种: imagepng

imagepng

4.运行效果:

imagepng

总结

通过上面的一些讲解,相信就能够使用native+flutter的混合开发了。但细心一点就会发现, 在前面的讲解中,flutter模块并没有与native项目进行通信,那么该如何通信尼?在笔者的下一篇文章会进行详细讲解。