flutter接入现有的app详细介绍

老套路:

让我们看一下效果呗:

2018-08-14 15_20_19.gif

###接入方式

接入的方式,我是参考的官方的介绍文档,我这里尝试的是android的接入方式,还算比较顺利。

1、在你的Android工程目录同级目录下执行命令

flutter create -t module my_flutter ,执行完毕之后,应该是这个样子。

image.png

2、打开你的Android工程的setting.gradle文件,行起一行,加上:

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

这几行代码的意思就是说,将你刚才创建的那个module作为android模块引入到Android工程中。

3、最后打开你的app目录下的build.gradle,在依赖中加上

 //flutter
    implementation project(':flutter')

ok,同步一下,你就将flutter引入到的你现有的android工程了,ios的步骤就不作介绍了,参照文档,实际上不复杂。

###遇到问题

当然,我上面说的过程相当顺利,但是,我接入的过程并没有这么顺利,我各种都会尝试一下。

1、比如,我们不在Android工程的同级目录去flutter create -t module my_flutter会怎么样,我尝试了,只需要对路径加上你工程目录名即可,这么写

setBinding(new Binding([gradle: this]))                                 // new
evaluate(new File(                                                      // new
        settingsDir.parentFile,                                               // new
        '你工程目录名/tip_flutter/.android/include_flutter.groovy'                          // new
))

也ok,但是不雅观,那ios引入这个flutter模块,岂非需要到你android工程中来找,所以,独立于Android工程会更优雅点,保持物理解耦。

2、有些小伙伴可能配置了buildTypes,当然,同步的话肯定是失败的,解决的办法是修改你的.android目录的flutter目录中的build.gradle。保持和你的app的buildTypes一致即可。

3、debug跑的很好,release跪了,这个肯定就是混淆的问题了,可以参考

-keep class io.flutter.app.** { *; }
-keep class io.flutter.plugin.**  { *; }
-keep class io.flutter.util.**  { *; }
-keep class io.flutter.view.**  { *; }
-keep class io.flutter.**  { *; }
-keep class io.flutter.plugins.**  { *; }

4、找不到libflutter.so

这个明显就是没有加载到对应的cpu架构支持的so库,请参考这里,有人直接

ndk {
                abiFilters "armeabi","armeabi-v7a"。。。。把所有的都加上,这,你的包大的你受得了么。
            }

总结,其实接入的过程并没有那么顺利,哈哈,还是蛮多坑的,不过一般都能找到解决办法。

###使用姿势

原生模块要拉起flutter模块的方式官方提供了两种:

1、直接createView创造一个flutterView,把他添加到你的布局中,这里的route1。

View flutterView = Flutter.createView(
      MainActivity.this,
      getLifecycle(),
      "route1"
    );
    FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800);
    layout.leftMargin = 100;
    layout.topMargin = 200;
    addContentView(flutterView, layout);

相信你一开始不知道是什么,这实际上是flutter管理页面的一种方式,使用路由来处理,可以为每个页面配置好路由,这里route1表示那个页面的名字,这样就可以直接跳到名字为route1的按个页面,如果写"/",那就是直接跳到main.dart的那个页面了,这里继续深究,为什么"/"跳到main,那是因为main.dart里面的这句话

void main() => runApp(new MyApp());,可以理解他是根。

2、使用fragment的方式

FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
   tx.replace(R.id.someContainer, Flutter.createFragment("route1"));
   tx.commit();

好了,以上就是两种元素模块应用flutter模块的方式,实际上机智的你会发现是一种而已,都是添加了一个flutterView到原生中而已,而你看源码,发现flutterView实际上是SurfaceView而已,只不过实现了一个特殊的接口BinaryMessenger

###flutter调用原生模块

光打开一个flutter实现的页面,非常简单,可是里面展示的数据从哪里来呢?通常有两种方式,

a、nativie把数据发送过去给到flutter端。

b、flutter端向native端要数据。

这里,我们首先来看第二种,flutter端向native端要数据,因为第二种官方提到的比较多,通常flutter调用原生的方式是通过MethodChannel来做的,具体怎么做,我们先来了解下。

MethodChannel(getFlutterView(), "app.channel.shared.data")
      .setMethodCallHandler(MethodChannel.MethodCallHandler() {
        @Override
        public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
          if (methodCall.method.contentEquals("getSharedText")) {
            result.success("some thing want to send to flutter");
            sharedText = null;
          }
        }
      });

我们看下的源码定义,这里截取部分

public final class MethodChannel {
    private static final String TAG = "MethodChannel#";
    private final BinaryMessenger messenger;
    private final String name;
    private final MethodCodec codec;

    public MethodChannel(BinaryMessenger messenger, String name) {
        this(messenger, name, StandardMethodCodec.INSTANCE);
    }

前面提到过,第一个参数是BinaryMessenger,由于FlutterView实现了这个接口,所以,官方demo中传给的是getFlutterView()

那么很显然,我们前面提到的使用姿势章节介绍了两种方式,第一种方式,FlutterView很明显就在那里,你很容易拿到他,然后开启一个MethodChannel。那么第二种方式呢?不急,看看FlutterFragment是个什么鬼。

public class FlutterFragment extends Fragment {
  public static final String ARG_ROUTE = "route";
  private String mRoute = "/";

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {
      mRoute = getArguments().getString(ARG_ROUTE);
    }
  }

  @Override
  public void onInflate(Context context, AttributeSet attrs, Bundle savedInstanceState) {
    super.onInflate(context, attrs, savedInstanceState);
  }

  @Override
  public FlutterView onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    return Flutter.createView(getActivity(), getLifecycle(), mRoute);
  }
}

打开一看很简单,onCreateView返回的其实就是一个FlutterView,这也就是前面提到的,实际上原生引用flutter模块其实就是往已有的布局上加FlutterView而已。

好,弄清楚了两种方式之后,下面,我以第二种方式的形式来介绍一下,具体如何操作。

public class FlutterBaseFragment extends FlutterFragment {

    private static final String METHOD_CHANNEL = "tip.flutter.io/method";

    public static FlutterBaseFragment newInstance(String route) {

        Bundle args = new Bundle();
        args.putString(ARG_ROUTE, route);
        FlutterBaseFragment fragment = new FlutterBaseFragment();
        fragment.setArguments(args);
        return fragment;
    }
    @SuppressWarnings("unchecked")
    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        new MethodChannel((FlutterView) getView(), METHOD_CHANNEL).setMethodCallHandler(
                new MethodChannel.MethodCallHandler() {
                    @Override
                    public void onMethodCall(MethodCall call, final MethodChannel.Result result) {
                        if (call.method.equals("getBatteryLevel")) {
                            int batteryLevel = getBatteryLevel();

                            if (batteryLevel != -1) {
                                result.success(batteryLevel);
                            } else {
                                result.error("UNAVAILABLE", "Battery level not available.", null);
                            }
                        } else {
                            result.notImplemented();
                        }
                    }
                });
    }

    private int getBatteryLevel() {...}
}

以上就是原生的实现部分,然后,flutter那边如何调用呢?

class _MyHomePageState extends State<MyHomePage> {
  static const platform = const MethodChannel('tip.flutter.io/method');
  String _batteryLevel = 'Unknown battery level.';

  Future<Null> _getBatteryLevel() async {
    String batteryLevel;
    try {
      final int result = await platform.invokeMethod('getBatteryLevel');
      batteryLevel = 'Battery level at $result % .';
    } on PlatformException catch (e) {
      batteryLevel = "Failed to get battery level: '${e.message}'.";
    }

    setState(() {
      _batteryLevel = batteryLevel;
    });
  }

很熟悉吧,这就是官方demo而已。

那么,通过MethodChannel发送给flutter的数据难道就没有要求么?任意类型的数据都能发送么?很抱歉,并不是,比如,你自定义的class显然是不可以的。他支持的类型只有以下:

image.png

so、我们要发送自定义类型数据过去如何办?

显然,我们需要转换为dart支持的类型,也许,你可能想到了Object->Json,然后,到了flutter那边,在变为Json对象即可。

不过也有其他的方式,比如,你们恰好使用的是protobuf的话,那么直接传byte[]肯定很不错啦,再者,你还可以实现自定义协议,如果有足够的时间的话。总之传递的数据需要是平台之间都能识别的类型。

###原生向flutter发送数据

原生向flutter发送数据,这个感觉起来怪怪的,那么,具体的场景是什么,举个例子是不是好理解点,好的,比如,手机充电状态的改变,这个变动的消息,如何传达到flutter那边呢?

这时候,就需要用到EventChannel,实际上和MethodChannel发送数据过去的方式没啥区别,只不过,我们理解,

MethodChannel是flutter端主动请求,拿到了数据,而,EventChannel可能理解为是从原生主动推送过去的。

new EventChannel((FlutterView) getView(), EVENT_CHANNEL).setStreamHandler(new EventChannel.StreamHandler() {
            @Override
            public void onListen(Object arguments, final EventChannel.EventSink events) {
                Timer timer = new Timer();
                timer.schedule(new TimerTask() {
                    @Override
                    public void run() {
                        events.success("当前时间毫秒" + System.currentTimeMillis() / 1000);
                    }
                }, 1000, 1000);
            }

            @Override
            public void onCancel(Object arguments) {
    ...
            }
        });

那么,flutter端的代码,怎么收到这个EventChannel推送过去的数据呢?

Future<Null> _lisEvent() async {
    String eventStr;
    try {
      _streamSubscription =
          eventChannel.receiveBroadcastStream().listen((data) {
        eventStr = 'event get data is $data ';
        setState(() {
          _eventStr = eventStr;
        });
      });
    } on PlatformException catch (e) {
      eventStr = "event get data err: '${e.message}'.";
      setState(() {
        _eventStr = eventStr;
      });
    }
  }

###总结

原生拉起flutter做的页面以及flutter调用原生模块以及原生模块推送数据到flutter经过验证都是ok的,因此flutter接入现有的app这条路是可行的,接入flutter之后,包大小会激增5.5M+,主要是因为需要用到这个so库,如果能够从网络获取多好,可惜目前只能打包到apk中。在加上业务生成的一些文件,总体上来说,写一个简单的业务,就差不多使得包大小增加了8M左右啦

image.png

这一点对于包大小有强迫症的童鞋需要慎重考虑了。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android机动车

Dagger2系列——实例解析

这篇文章会分享一下实际应用中的Dagger2如何使用,以及Dagger2通过apt插件如何给我们生成代码,以及生成的代码之间的关联。

10720
来自专栏Android机动车

Retrofit实现带进度下载

Retrofit是目前最主流的网络框架了,它对网络请求几近完美的封装,大大降低了我们开发者的研发难度,缩短了研发周期。最近项目中遇到了下载视频和图片文件的需求(...

13120
来自专栏7号代码

Android网络与数据存储——File存储(实现SD卡文件浏览器)

AndroidManifest.xml中manifest标签下有一个属性android:installLocation,用于指定应用程序安装在什么地方,该属性有...

30230
来自专栏小鄧子的技术博客专栏

【译】Retrofit 2 - 如何从服务器下载文件

如果你在阅读本文前没有写过任何一行Retrofit请求代码,那么最好看一下前面几篇博客。对于很多Retrofit使用者来说:定义一个下载文件的请求与其他请求几乎...

24010
来自专栏jianhuicode

如何使用融云地图,文件等插件--融云 Android SDK 2.8.0+ Extension 开发文档

转载自融云 Android SDK 2.8.0+ Extension 开发文档 融云 SDK 2.8.0 后对 会话界面输入区域、+号扩展区域、语音消息、Emo...

350100
来自专栏向治洪

Android Remote Views

听名字就可以看出,remote views是一种远程view,感觉有点像远程service,其实remote views是view的一个结构,他可以在其他的进程...

20470
来自专栏Android开发小工

在Android开发中怎样使用Application类

自己独立开发项目才发现以前对Application类并不是十分了解,现在开始直接搭建一个新项目的框架才重新踩过这个坑。

14350
来自专栏酷玩时刻

统一管理项目中的接口回调

无论是 Java Web 开发还是 Android 开发我们都避免不了异步处理业务的逻辑。有异步的出现一定就有异步结果(接口)的回调。你之前是不是有为每一个异步...

9840
来自专栏Android相关

AAC---LiveData

LiveData是一个与Activity/Fragment生命周期相关(lifecycle-aware)的Observer类。而这种相关性(awareness ...

12220
来自专栏QQ音乐技术团队的专栏

记一次全民K歌的crash定位过程

全民K歌4.6版本发布后,出现了一个与RecyclerView相关的Bug,作此记录。

41830

扫码关注云+社区

领取腾讯云代金券