flutter接入現有的app詳細介紹

時間  2019-12-08
標籤 flutter 現有 app 詳細 介紹 简体版
原文   原文鏈接

老套路： 讓咱們看一下效果唄： java

2018-08-14 15_20_19.gif

接入方式

接入的方式，我是參考的官方的介紹文檔，我這裏嘗試的是android的接入方式，還算比較順利。android

一、在你的Android工程目錄同級目錄下執行命令 flutter create -t module my_flutter ，執行完畢以後，應該是這個樣子。 ios

image.png

二、打開你的Android工程的setting.gradle文件，行起一行，加上：git

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

這幾行代碼的意思就是說，將你剛纔建立的那個module做爲android模塊引入到Android工程中。 三、最後打開你的app目錄下的build.gradle，在依賴中加上github

//flutter
    implementation project(':flutter')
複製代碼

ok，同步一下，你就將flutter引入到的你現有的android工程了，ios的步驟就不做介紹了，參照文檔，實際上不復雜。bash

遇到問題

固然，我上面說的過程至關順利，可是，我接入的過程並無這麼順利，我各類都會嘗試一下。 一、好比，咱們不在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工程會更優雅點，保持物理解耦。 二、有些小夥伴可能配置了buildTypes，固然，同步的話確定是失敗的，解決的辦法是修改你的.android目錄的flutter目錄中的build.gradle。保持和你的app的buildTypes一致便可。架構

三、debug跑的很好，release跪了，這個確定就是混淆的問題了，能夠參考app

-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.**  { *; }
複製代碼

四、找不到libflutter.so 這個明顯就是沒有加載到對應的cpu架構支持的so庫，請參考這裏,有人直接async

ndk {
                abiFilters "armeabi","armeabi-v7a"。。。。把全部的都加上，這，你的包大的你受得了麼。
            }
複製代碼

總結，其實接入的過程並無那麼順利，哈哈，仍是蠻多坑的，不過通常都能找到解決辦法。

使用姿式

原生模塊要拉起flutter模塊的方式官方提供了兩種： 一、直接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());,能夠理解他是根。 二、使用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
這一點對於包大小有強迫症的童鞋須要慎重考慮了。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程