flutter接入現有的app詳細介紹

brzhang發表於2018-08-14

老套路: 讓我們看一下效果唄:

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
這一點對於包大小有強迫症的童鞋需要慎重考慮了。

相關文章